How to wait for an async function to execute to change a state in React?

Question

JavaScript

there is an asynchronous method that receives the date and there is a state array on which the rendering of everything else depends. how to wait for a response from getData in this case?

const App = async () => {
  const [noteArr, setNoteArr] = useState([])
  setNoteArr(getData())
  useEffect(() => {
    return () => {
      console.log(noteArr);
    };
  }, [noteArr]);
  return (
    <div className="App">
      <NoteInfo/>
      <NoteList noteArr={noteArr} setNoteArr={setNoteArr}/>
    </div>
  );
}

Answer 1

Asynchronous functions must be called in useEffect in such a case. Put setNoteArr(getData()) in useEffect with empty dependencies [] and it will be called when the component is mounted.
Basically your component should look like this:

const App = () => {
  const [noteArr, setNoteArr] = useState([])

useEffect(() => {
    (async () => {
    const result = await getData();
setNoteArr(result);
   })()
  }, []);

  useEffect(() => {
    return () => {
      console.log(noteArr);
    };
  }, [noteArr]);
  return (
    <div className="App">
      <NoteInfo/>
      <NoteList noteArr={noteArr} setNoteArr={setNoteArr}/>
    </div>
  );
}

Then everything will work as it should and readability will improve

Answer 2

Your answer is not entirely correct, since this method does not force you to wait for the execution of an asynchronous function if you put the debagger after

useEffect(() => {
    (async () => {
    const result = await getData();
setNoteArr(result);
   })()
  }, []);

then you can make sure that noteArr = []