Please enable JavaScript.

Coggle requires JavaScript to display documents.

Epic React - Coggle Diagram

- - - - ===
      - Object.is
- - - - Compare using useLayoutEffect to assign values to directly to ref.current
- - - - Dynamic imports can be called in event handlers to import modules as the user interacts with the page
      - Prefetching
        
        Includes code using <link rel="prefetch" />
        
        webpackPrefetch magic comment
    - - Can be used to dynamically import a module that has a React component as the default export
      - Imported component should be rendered within a <React.Suspense /> component with a fallback value
      - (Tools) Suspense fallbacks can be tested with React DevTools's Components tab
    - - webpackChunkName magic comment
      - Places related code together in common bundles
  - - - Use the workerize webpack loader
  - - - Render
        
        Create React elements
      - Reconciliation
        
        Compare previous elements with new ones
      - Commit
        
        Update the DOM only if necessary
        
        Slowest step
      - State change
    - - React.PureComponent and shouldComponentUpdate
        
        Class components
      - React.memo
        
        Function component
        
        Accepts a custom comparator as the second argument
- - - - React.memo
        
        Checks props and returns React elements
      - React.useMemo
        
        Checks a dependency list and returns callback function's return value
      - React.useCallback
        
        Checks a dependency list and returns a function
        
        Shortcut of using useMemo with a function return value
    - - Cache depth is 1 level
      - Should only be used for
        
        Ensuring value stability of dependency lists items
        
        Avoiding really expensive function calls
      - Drawbacks
        
        Prevents out of scope functions from being garbage collected
        
        Has their own computational costs
      - Avoid creating APIs where consumer is required to memoize
- - - - Does not require memoization
      - Allows for tree-shaking and lazy-loading
  - - - Child elements can be cloned with React.cloneElement with props