Tic Tac Toe with React and React Router

Community feedback

• 

  Sean Red•635

  @seanred360

  Posted about 3 years ago

  The useEffect error is a linting error. A linting error means your code will run but you used very bad practices. I think if you understood useEffect you would know how to fix it, let me explain. useEffect is a function that has 3 use cases. Case 1: useEffect(()=>{ doSomething() }) this will run on first render and then re run every time the component renders again. Case 2: useEffect(()=>{ doSomething() },[playerTurn, playerMark, gameActive, gameType]) this has a dependency array at the end of all the variables you used. useEffect will run once on first render and then run again every time one of these variables change. Case 3: useEffect(()=>{ doSomething() }, []) the dependency array is empty here. useEffect will run once on first render and never again.

  The linting error is telling you to either remove the dependency array, or move all your variables into the dependency array. Currently you have it set to only re run when playerTurn changes, but useEffect does not know it also needs to change when playerMark, gameActive, gameType change because you used them. If you put those variables into the dependency array, you app will infinitely re render and crash.

  To fix your problem just remove the dependency array so that useEffect re runs on every render.

  Look at my pull request on Github to see my fixes.

  03

  Marked as helpful
• 

  Faruk Abdulganiyu•380

  @faruking

  Posted about 3 years ago

  Nice design. I completed this challenge as well and it was a fun one. You can check it but I made it with just HTML, vanilla javascript, and it's rule are a little bit more advanced.

  01