Please enable JavaScript.

Coggle requires JavaScript to display documents.

React Hooks and Advanced, useMemo & useCallback Reference https…

- - - - pure functions/components
      - component props = object/function
    - - check prev.prop1 to next.prop1 (ignores prop 2 that could be a function)
    - - pairs well with
        
        useMemo
        
        useCallback
    - - use when there's a pure component that receives (for example 2 props from a 4 props parent component, in which the parent component also receive a prop from another parent component
        if the parent component changes the prop that doesn't related to the pure component, it will still re-render. So this is where you should use React.memo
  - - - optimizing uncomparable objects
        
        arrays
        
        objects
        
        functions (try useCallback instead)
      - when memo can't handle it alone (uncomparable props)
    - - return the uncomparable object from its origin
      - ensure correctly put the array dependency
      - e.g
        const myArray = useMemo(() => array, [whenToChange])
    - - paired with map function that maps array into a pure function
      - when the source of array is comparable
      - when you know when should the array be updated
  - - - optimizing callback functions
    - - just like useMemo, but first argument goes to the function directly
      - e.g
        const myFunction = useCallback(myFun, [whenToChange])
    - - passing function to optimized pure-function children
- - - - before DOM renders
      - before useEffect
    - - same as useEffect
    - - get window size
- - - - if you want a predictable state
        
        all possibilities defined and known
      - if changing state requires a FIXED logic
        
        you can use a separate function, still, but inefficient
        
        the setter to be directly changed to a function
    - - redux library
      - updating whole state with spread operator
      - toggle a state (true to false, false to true)
    - - just like reduce functional programming function
      - arguments
        
        first argument is current value (of the state)
        
        second and other argument is yours to decide
      - e.g
        
        [value, toggle] = useReducer(value => !value, true)
        toggle()
        
        [value, toggle] = useReducer((value, newValue) => ({...value, ...newValue}, {})
        toggle(myNewValue)
        
        [value, reducer] = useReducer((state, action) => otherReduxLikeFancyStuffs)