title: How do I call a function automatically when page loads up in React JS ?(in 2020)
body: <p>I am trying to get the array of Notes from MongoDB server example of the notes array is as shown</p>
  <pre><code>{
      &quot;_id&quot; : ObjectId(&quot;5f240b9ab414f1377c4155e0&quot;),
      &quot;title&quot; : &quot;Hello&quot;,
      &quot;content&quot; : &quot;World !&quot;,
      &quot;__v&quot; : 0
  }
  
  /* 2 */
  {
      &quot;_id&quot; : ObjectId(&quot;5f240d45b414f1377c4155e1&quot;),
      &quot;title&quot; : &quot;aaaaaaaaaa&quot;,
      &quot;content&quot; : &quot;aaa&quot;,
      &quot;__v&quot; : 0
  }
  </code></pre>
  <p>Now the Function getNote gets the note from MongoDB and then using useState I am passing the array , Now my question is: I want the function getNote to be called automatically when React Page loads up .Below is the code for function getNote</p>
  <pre><code>function getNote() {
      axios
        .get(&quot;/&quot;)
        .then((response) =&gt; {
          setFinalNoteDB(response.data);
          
        })
        .catch((err) =&gt; {
          if (err) {
            console.log(&quot;error in app.jsx&quot;);
          }
        });
  </code></pre>
  <p>The general app.jsx code is as shown below</p>
  <pre><code>import React, { useState, Component } from &quot;react&quot;;
  import Header from &quot;./Header&quot;;
  import CreateArea from &quot;./CreateArea&quot;;
  import Footer from &quot;./Footer&quot;;
  import Note from &quot;./Note&quot;;
  import EnterNameTemplate from &quot;./EnterNameTemplate&quot;;
  import axios from &quot;axios&quot;;
  
  function App() {
    const [finalNote, setFinalNote] = useState([]);
    const [finalNoteDB, setFinalNoteDB] = useState([]);
    // const [isNameThere, setIsNameThere] = useState(false);
    function addNote(note) {
      setFinalNote((prevNotes) =&gt; {
        return [...prevNotes, note];
      });
    }
    function deleteNote(id) {
      setFinalNote((prevNotes) =&gt; {
        return prevNotes.filter((singleNote, index) =&gt; {
          return index !== id;
        });
      });
    }
    function getNote() {
      axios
        .get(&quot;/&quot;)
        .then((response) =&gt; {
          setFinalNoteDB(response.data);
          
        })
        .catch((err) =&gt; {
          if (err) {
            console.log(&quot;error in app.jsx&quot;);
          }
        });
    }
    return (
      &lt;div&gt;
        &lt;Header /&gt;
        &lt;CreateArea addNote={addNote} /&gt;
        {finalNoteDB.map((singleNote, index) =&gt; {
          return (
            &lt;Note
              key={index}
              id={index}
              title={singleNote.title}
              content={singleNote.content}
              deleteNote={deleteNote}
            /&gt;
          );
        })}
  
        &lt;Footer /&gt;
      &lt;/div&gt;
    );
    
  }
  
  export default App;
  </code></pre>
  <p>Hope you get my question ! .</p>