Please enable JavaScript.

Coggle requires JavaScript to display documents.

intermediate React, v2 (Hooks in-Depth (useRef (use case: (You might be…

- - - - useEffect(() => {
        return () => {
        console.log('will unmount');
        }
        }, []);
    - - useEffect(() => console.log('mounted or updated'));
    - - useEffect(() => console.log('mounted'), []);
  - - - passing down this data in unnecessary intermediaries.
- - - - You might be familiar with refs primarily as a way to access the DOM. If you pass a ref object to React with <div ref={myRef} />
      - The only difference between useRef() and creating a {current: ...} object yourself is that useRef will give you the same ref object on every render.
  - - - function RenderPrimes({iterations, multiplier}) {
        const primes = React.useMemo(() => calculatePrimes(iterations, multiplier), [
        iterations,
        multiplier,
        ])
        return <div>Primes! {primes}</div>
        }
      - you're defining the function to calculate the primes on every render (which is VERY fast), React is only calling that function when the value is needed. On top of that React also stores previous values given the inputs and will return the previous value given the same previous inputs. That's memoization at work.
    - - Dependencies lists
        
        function Foo({bar, baz}) {
        const options = {bar, baz}
        React.useEffect(() => {
        buzz(options)
        }, [options]) // we want this to re-run if bar or baz change
        return <div>foobar</div>
        }
        function Blub() {
        return <Foo bar="bar value" baz={3} />
        }
        
        in that case, the useEffect callback will be called after every render
        
        how to fix
        
        1.
        
        function Foo({bar, baz}) {
        React.useEffect(() => {
        const options = {bar, baz}
        buzz(options)
        }, [bar, baz]) // we want this to re-run if bar or baz change
        return <div>foobar</div>
        }
        
        But there's one situation when this isn't a practical solution: If bar or baz are (non-primitive) objects/arrays/functions/etc
        
        function Foo({bar, baz}) {
        React.useEffect(() => {
        const options = {bar, baz}
        buzz(options)
        }, [bar, baz])
        return <div>foobar</div>
        }
        function Blub() {
        const bar = React.useCallback(() => {}, [])
        const baz = React.useMemo(() => [1, 2, 3], [])
        return <Foo bar={bar} baz={baz} />
        }
        
        Note that this same thing applies for the dependencies array passed to useEffect, useLayoutEffect, useCallback, and useMemo.
      - in Javascript
        
        {} === {} // false
        
        [] === [] // false
        
        () => {} === () => {} // false
        
        const z = {}
        
        z === z // true
        
        // NOTE: React actually uses Object.is, but it's very similar to ===
- - - - User types in input box
      - Call action creator to get an action
      - Dispatch action to Redux
      - Redux inserts the action into the root reducer
      - The root reducer delegates that action to the correct reducer
      - The reducer returns a new state given the old state and the action object
      - That new state becomes the store's state
      - React is then called by Redux and told to update