React not state not updating first time - reactjs

Question

So this is my code:
const [module, setModule] = useState([]);
useEffect(()=> {
async function getModuleInfo(){
let ModuleInfo = await firebase
.firestore()
.collection('Modules')
.doc('PBS1Module1')
.get();
if (!ModuleInfo.exists){
console.log('geen module info')
} else {
let ModuleInfov2 = ModuleInfo.data();
setModule(ModuleInfov2)
}} getModuleInfo()
console.log(module)
}, [])
When I go to this screen, the first log is an empty array. Then when I remove the console.log() and save it and than change it back to console.log(module) it gives me the data I need.
What am I doing wrong? All my import statements are good because those are working.

Answer 1

This is because when you are logging out the value module inside the useEffect hook you now have a stale closure. When the component initially renders, the value of module is [] so that is what is passed to the closure inside useEffect. When you update the state via the setModule function, React will rerender the component with the updated state and you get the expected value. To help understand this, try moving your console.log outside of the useEffect. This will make it run every time the component renders, as opposed to now where it only runs on the first render since your dependency array on the useEffect hook is empty.
I tested with the below example and when running it I get logs in the following order:
fresh data is: null
stale data is: null
fresh data is: (4) [1, 2, 3, 4]
import { useEffect, useState } from "react";
const fetchData = async () => {
return [1, 2, 3, 4, ]
}
export const App = () => {
const [data, setData] = useState(null)
useEffect(() => {
const asyncFetch = async () => {
const data = await fetchData();
setData(data);
}
asyncFetch();
console.log("stale data is: ", data);
}, []);
console.log("fresh data is: ", data);
return (
<div>
</div>
)
}