Please enable JavaScript.

Coggle requires JavaScript to display documents.

REACT HOOKS - Coggle Diagram

- - - - useState with Object
        
        code : https://github.com/gopinav/React-Tutorials/blob/master/React%20Hooks/state-hook/src/components/HookCounterThree.js
        const [name,setName] = useState({firstName: '', lastName: ''})
        setState will merge the state but useState will not merge state. so we have to explicitly merge the state.
        we can use ... opertor for manual merge
        handleChange(e){ setName({ ...name , firstname: e.target.value }) }
        // first ... operator spread the non-updated object. then overide the firstname property
        
        useState with Array
        
        code : https://github.com/gopinav/React-Tutorials/blob/master/React%20Hooks/state-hook/src/components/HookCounterFour.js
        const [items,setItems] = useState([])
        addRandomItem(){ setItems([ ...items, { id : items.length, value : Math.floor(Math.random()*10)) + 1 } ]) }
        
        summary
        
        The useState hook lets you add state to functional components
        
        In classes, the state is always an object
        
        With the useState Hook, the state doesn't have to be an object
        
        The useState hook returns an array with 2 elelments
        
        The first element is the current value of the state, and the second element is a state setter function
        
        New state value depends on the previous state value. You can pass a function to the setter function
        
        When dealing with objects or arrays, always make sure to spread your state variable and then call the setter function
- - - - conditionally run useEffect
        
        code: https://github.com/gopinav/React-Tutorials/blob/master/React%20Hooks/effect-hook/src/components/ClassCounterOne.js ,
        https://github.com/gopinav/React-Tutorials/blob/master/React%20Hooks/effect-hook/src/components/HookCounterOne.js
        
        Run only if count value changes in class component. writing explicitly using if statement.
        componentDidUpdate(prevProps, prevState) { //explicitly checking if (prevState.count !== this.state.count) { console.log('Updating document title') document.title = `Clicked ${this.state.count} times` } }
        Run only if count value changes in functional component. works implicitly. count is specified in the dependency array
        useEffect(() => { console.log('useEffect - Updating document title ') document.title = `You clicked ${count} times` }, [count])
        
        run useEffect only once
        
        code : https://github.com/gopinav/React-Tutorials/blob/master/React%20Hooks/effect-hook/src/components/ClassMouse.js
        logMousePosition = e => { this.setState({ x: e.clientX, y: e.clientY }) } componentDidMount() { window.addEventListener('mousemove', this.logMousePosition) }
        here in that class component. event listener only setup once in componentDidMount.
        How to do that in useEffect hook ?
        const logMousePosition = e => { console.log('Mouse event') setX(e.clientX) setY(e.clientY) } useEffect(() => { console.log('useFffect called') window.addEventListener('mousemove', logMousePosition) }, [])
        
        by specifiying [] (empty dependency array) . useEffect will called once
        
        useEffect of CleanUp
        
        when we unmount a component make sure we shold cleanup all the subscription we have created. otherwise React throw warning and still work old subscription code.
        In class component, we use componentWillUnmount() method for cleanup
        componentWillUnmount() { window.removeEventListener('mousemove', this.logMousePosition) }
        In functional component, we use useEffect with return statement for cleanup.
        useEffect(() => { console.log('useFffect called') window.addEventListener('mousemove', logMousePosition) return () => { console.log('Component unmounting code') window.removeEventListener('mousemove', logMousePosition) } }, [])
        
        useEffect with return statement will mimic componentWillUnmount()
        
        useEffect with incorrect dependency array
        
        Dependency array is the second argument in the useEffect Hook.
        
        In class component,
        counter will autoupdate every 1sec and display it in the UI.
        componentDidMount() { this.interval = setInterval(this.tick, 1000) } componentWillUnmount() { clearInterval(this.interval) } tick = () => { this.setState({ count: this.state.count + 1 }) }
        code: https://github.com/gopinav/React-Tutorials/blob/master/React%20Hooks/effect-hook/src/components/IntervalClassCounter.js
        In this code. componentDidMount subscribe setInterval when mount and it run until the componentWillUnmount cleanup the setInterval.
        
        In Functional Component
        
        we use useEffect
        const tick = () => { setCount(count + 1) } useEffect(() => { const interval = setInterval(tick, 1000) return () => { clearInterval(interval) } },[])
        code: https://github.com/gopinav/React-Tutorials/blob/master/React%20Hooks/effect-hook/src/components/IntervalHookCounter.js
        here, we implemented componentDidMount and componentWillUnmount,
        so we thought it will work fine. but it willn't update after the first update.
        why ?
        
        1st don't think tick function is outside the useEffect. Its inside the useEffect.
        
        useEffect track count for the first mounting time only ! So setInterval excuting the tick function with the first count value
        
        it won't take care of any further changes happened in the count value.
        
        Solution
        
        pass count in the dependency array. so it will render for every time the count update and display changes in counter UI.
        
        use
        const tick = () => { setCount((preValue)=> preValue + 1) }
        this doesn't need count for further update.
        
        Use function definition related to useEffect inside the useEffect Hook (TIP)
        
        Data fetching : https://github.com/gopinav/React-Tutorials/blob/master/React%20Hooks/effect-hook/src/components/DataFetching.js
        
        Fectching data from api list.
        
        Install axios
        npm i axios
        
        get request
        useEffect(()=>{ axios.get("posturl") .then(res=> { setPosts(res.data) }) .catch() },[])
        
        get single request
        
        const [id, setId] = useState(1) useEffect(() => { axios .get(`https://jsonplaceholder.typicode.com/posts/${id}`) .then(res => { setPost(res.data) }) .catch(err => { console.log(err) }) }, [id]) <input type="text" value={id} onChange={e => setId(e.target.value)} />
        
        Get on clicking a button
        
        const [idFromButtonClick, setIdFromButtonClick] = useState(1) useEffect(() => { axios .get(`https://jsonplaceholder.typicode.com/posts/${id}`) .then(res => { setPost(res.data) }) .catch(err => { console.log(err) }) }, [idFromButtonClick]) const handleClick = () => { setIdFromButtonClick(id) } <button type="button" onClick={handleClick}>Fetch Post</button>
- - - - useReducer - complex state and action
        
        using multiple counter with multiple increment and decrement
        code :https://github.com/gopinav/React-Tutorials/blob/master/React%20Hooks/reducer-hook/src/components/CounterTwo.js
        
        By using action as an object we can use aditional data in reducer function.
        
        By using state as an object we are able to keep track of multiple state variables.
        
        multiple useReducer
        
        code: https://github.com/gopinav/React-Tutorials/blob/master/React%20Hooks/reducer-hook/src/components/CounterThree.js
        we can use multiple useReducer in the component. even we can use same reducer function and initial state inside these multiple useReducer. they will run independently.
        const [count, dispatch] = useReducer(reducer, initialState) const [countTwo, dispatchTwo] = useReducer(reducer, initialState)
        this method reduce complexicity and avoid duplication of code in reducer function.
        
        useReducer with useContext
        
        code: https://github.com/gopinav/React-Tutorials/tree/master/React%20Hooks/reducer-hook/src/components ['A'-B,C-'D'-E-'F']
        useReducer is a Local state management. we can use useReducer + useContext for global state management.
        scenario : in App.jsx
        <> <componentA> <componentB> <componentC> </>
        we want to share a App's count state in these 3 child component.
        steps
        
        In app component we create counter using useReducer Hook. we declared initial state with reducer function .
        
        const initialState = 0 const reducer = (state, action) => { switch (action) { case 'increment': return state + 1 case 'decrement': return state - 1 case 'reset': return initialState default: return state } } const [count, dispatch] = useReducer(reducer, initialState)
        
        To provide this value in child component . we have to use contextApi.
        
        we create countContext
        
        export const CountContext = React.createContext()
        
        In provider's value we pass count and dispatch method .
        
        <CountContext.Provider value={ { countState: count, countDispatch: dispatch } }> <div className="App"> <ComponentA /> <ComponentB /> <ComponentC /> </div> </CountContext.Provider>
        
        In child components import useContext and get hold of context value and access necessary state of parent component.
        
        const countContext = useContext(CountContext) return( <> Component A - {countContext.countState} <button onClick={()=> countContext.countDispatch('increment')}>Inrement</button> <button onClick={()=> countContext.countDispatch('decrement')}>Decrement</button> <button onClick={()=> countContext.countDispatch('reset')}>Reset</button> </> )
        
        Fetching data with useReducer
        
        data fetching using useState
        
        code : https://github.com/gopinav/React-Tutorials/blob/master/React%20Hooks/reducer-hook/src/components/DataFetchingOne.js
        
        data fetching using useReducer
        
        code: https://github.com/gopinav/React-Tutorials/blob/master/React%20Hooks/reducer-hook/src/components/DataFetchingTwo.js
        
        useState vs useEffect
        
        video : https://www.youtube.com/watch?v=3VClygDRSsU
        useState
        
        type : Number, String, Boolean
        
        Number of state transition : One or Two
        
        state transition : Better for non-related state trnasition
        
        Business logic : no business logic
        
        better for local state
        
        useReducer
        
        type : Object , Array
        
        Number of state transition : Too many
        
        state transition : Better for Related state transition
        
        Business logic : Complex business logic
        
        better for global state