Очень детально расписал, теперь более понятно, но не все конечно буду изучать синхронный и асинхронный javascript. Теперь на примере моего кода, попробую воспроизвести, что понял. Для того чтобы получить первоначальное состояние useState({}); написал console.log('####: useStatePokemons', pokemons); после получения состояния. Для того чтобы получить snapshot в аргументе setPokemons написал console.log('####: useEffectPokemon', snapshot.val()); после изменения состояния. В итоге получил такой вывод в консоли (картинка внизу): 1. На первом рендеринге он отбразил текущее состояние useState пустой объект, который я туда положил. 2. При первом же рендеринге, после текущего состояния, он так же увидел измененное состояние, которое пришло через setState. 3. После того, как DOM обновился он уже выполнил useEffect и сделал новый рендеринг. Правильно понял или все-таки не совсем? И что мне все таки делать с этой функцей? Как получить состояние карточки при клике в console.log я его уже куда только не засовывал он нигде не работает .