# React ? | ? :-------------------------:|:-------------------------:  |  --- Tony | Andy :-------------------------:|:-------------------------:  |  --- Idea: Use the github API to get a random person from the FAC17 cohort, display their image and login name along with 2 incorrect names. The challenge: pick the right name and earn sweet, delicious points. --- ## Nice things that work ### Counter ```javascript= React.useEffect(() => { let interval = null; if (active) { interval = setInterval(() => { setSeconds(seconds => seconds - 1); }, 1000); } else if (!active && seconds !== 0) { clearInterval(interval); } return () => clearInterval(interval); }, [active, seconds]); return <div className="clock-css">{seconds}</div>; ``` --- This is the counter, it counts down from 30. When it ends a conditional statement in app changes the render from the questions to the 'game over' page. --- Issue On every second count the entire page would re-render with new questions. --- Fix Ollie reminded us to wrap our state change functions in useEffect with dependcies on the count and the game data so the seconds can re-render to the page which does trigger a re-render of App.js but the components dependant on the answers don't change. ```javascript= React.useEffect(() => { if (gameData) { let iterator = randomizer(gameData.length) console.log(iterator) answerUpdater(gameData[iterator[0]]); nameUpdater1(gameData[iterator[1]].login); nameUpdater2(gameData[iterator[2]].login); } }, [count, gameData]); ``` --- ### useMemo Issue: We needed a shuffle function otherwise the right answer would always be rendered to the left. However every second the timer changed the answers got re-shuffled. --- Fix: > Pass a “create” function and an array of dependencies. useMemo will only recompute the memoized value when one of the dependencies has changed. --- We only shuffle and return an array to render when any of the values inside the component change (as a result of useEffect in app returning new values.) --- ```javascript= const newArray = React.useMemo(() => { return shuffler([userNames, randomName1, randomName2]); }, [userNames, randomName1, randomName2]); ``` --- ## Issues Initally the app was giving duplicate answers, which caused the array of possible answers to increase  ---  --- Initial code ```javascript= React.useEffect(() => { if (gameData) { nameUpdater1(gameData[randomizer(gameData.length)].login); nameUpdater2(gameData[randomizer(gameData.length)].login); answerUpdater(gameData[randomizer(gameData.length)]); } }, [count, gameData]); ``` --- First attempt at fixing the code ```javascript= React.useEffect(() => { if (gameData) { answerUpdater(gameData.splice(randomizer(gameData.length), 1)[0]); nameUpdater1(gameData[randomizer(gameData.length)].login); nameUpdater2(gameData[randomizer(gameData.length)].login); } }, [count, gameData]); ``` --- Actual attempt at fixing the code (without mutating the gameData state) > randomizer returns 3 unique numbers ```javascript= const randomizer = (max) => { let numArray = [] while (numArray.length < 3) { let num = Math.random() if(num === 0 && (!numArray.includes(num))) { numArray.push(num) } else if (!numArray.includes(Math.floor((num * max) +1))) { numArray.push(Math.floor((num * max) +1)) } } return numArray } export default randomizer; ``` --- ```javascript= let iterator = randomizer(gameData.length) answerUpdater(gameData[iterator[0]]); nameUpdater1(gameData[iterator[1]].login); nameUpdater2(gameData[iterator[2]].login); ``` --- Although we do still do get some errors:  --- ## Stretch goals / code review feedback Start again button  --- Clock issues   --- Bugs