qiugu-he / 20-react-app

Build 20 React Apps !

Build 20 Small React Apps

Made by Qiugu.

01-Pomodoro: Count-Down Timer

02-Markdown Editor

03-Broswer Tab Routes

04-Paper, Rock, Scissors

05-Moving Link

06-Infinit Image Gallery

07-Trivia_Game

Key Notes Summary:

(Updating...)

React Hook - useState():

• Add state in functional component -> create state varibale, store the current value, any time it changed, react will re-render this
• 2 elements inside, a pointer to state, second is a state update function
• If use the same value as the current state to update the state, React won’t trigger a re-render
• If use the previous value to update state, you must pass a function that receives the previous value and returns an updated value

    //E.g. state variable used from App 07-Trivia_Game: 
    const[correctScore, setCorrectScore] = useState(0);

React Hook - useEffect():

• After every render, the callback passed to this useEffect function is called
• By default, it runs after every render but by customize it with the second param of the useEffect function. The second argument accepts an array that allow us to tell React when we want our effect to be called.
• After a render and before calling an effect, React will compare the array of values defined in the second parameter with the array defined in the same effect from the previous render. React will only call the effect when any value of the array has changed since the previous render.

    /* E.g.
       useEffect from App 07-Trivia_Game: Every time getQuestion & selectedCategory changed, useEffect will be called
    */
      useEffect(()=>{
        setIsCorrect(null);
        let url = 'https://opentdb.com/api.php?amount=1';
        if(selectedCateogry !== 'any')
        url += `&category=${selectedCateogry}`;

        fetch(url)
        //since we using fetch, so have to warp data
        .then((res) => res.json())
        .then((data) => setQuestion(data.results[0]));
    }, [getQuestion, selectedCateogry]); 

React Hook - useRef():

• In a state variable: useState or useReducer. Updates in state variables will cause a re-render of the component.
• In a ref: Equivalent to instance variables in class components. Mutating the .current property won’t cause a re-render.
• useRef(): A function that returns a mutable ref object whose .current property is initialized with the passed argument (initialValue). The returned object will persist for the full lifetime of the component. lets us create mutable variables inside functional components.
• A ref created with useRef will be created only when the component has been mounted and preserved for the full lifecycle.
• Updating a ref is a side effect so it should be done only inside a useEffect (or useLayoutEffect) or inside an event handler.