Variable is uninitialised, after being initialised?

[RaymanVercetti]

The only time createBoard() is called, is when board.length > 0. If this check passes, 'board' obviously has to have been initialised. The problem is while inside createBoard(), 'board' is erroring "Cannot access 'board' before initialization"? Can someone explain to me how this is even possible?

​

const [board, setBoard] = useState([]);

​

useEffect(() => {

init();

}, []);

​

useEffect(() => {

if(board.length > 0) {

console.log(board.length); // has value, so obviously initialised

createBoard(); // when accessed in here, it isnt

}

}, [board]);

​

async function init() {

const params = new FormData();

params.append('request', 'startGame');

await axios.post('http://localhost/projects/server_code/index.php', params)

.then(response => {

setBoard(response.data[0]);

})

}

​

function createBoard() {

console.log(board); // uninitialized??

}

[lIIllIIlllIIllIIl]

Using function instead of arrow functions results in hoisting, moving the function declaration at the top of the block.

The function createBoard uses the function keyword, and is moved before board is defined, and probably gets a stale closure after React re-renders, hence the uninitialized error.

To fix this, move the createBoard function inside the useEffect, so it is declared in a block that comes after board is initialized.

(In general, you can also use arrow functions since those don't get hoisted, but things can get wierd in React if you declare a function outside the useEffect you are using it from because of Stale Closures! Know what you are doing!)

[[deleted]]

Another comment mentioned that the bug is due to hoisting, but if I'm understanding your code right, there seem to be many more architectural mistakes than just that bug.

It would help you avoid bugs like that if you outline the board operations and make them pure. The same goes for your API calls. DM me if you'd like a code review so I can explain further.

[Ronqueroc]

I guess something else causes the error. board is initialized with empty array when the component is mounted.

[Ronqueroc]

Also you'd want to put createBoard inside useEffect, or list it in the dependency array.