baroman4ik

const propByPath = (object, path) => path.split('.').reduce((acc, cur) => acc?.[cur], object);

React.useEffect(() => {
    (async () => {
        try {
            const themes = await fetch("/arr").then((data) => data.json());
            const activeTheme = Math.floor(themes.length / 2);
            const activePlace = Math.floor(themes[activeTheme].subtopics.length / 2);

            setThemes(themes);
            setActiveTheme(activeTheme);
            setActivePlace(activePlace);
        } finally {
            setIsLoad(false);
        }
    })();
}, []);

https://regex101.com/r/7A2VHE/1 так?

Асинхронные функции должны вызываться в useEffect в таком случае. Поместите setNoteArr(getData()) в useEffect с пустыми зависимостями [] и он будет вызываться при монтировании компонента.

Вообще ваш компонент должен выглядеть так:

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>
  );
}

Тогда все будет работать как надо и читаемость улучшится