[Advanced React] Master Memoization in React

[reboottime]

No description provided.

[reboottime]

Major Concepts

• Shallow comparison: compare by reference

• Memo funcs

  • useCallback: guarantee a func between always refer to the same reference value between renders
  • useMemo: guarantee a value between always refer to the same value between renders

• How things work under the hood ( pseudocode)

[reboottime]

Practices Examples

Example 1: Declare component inside of another component

Declared a component inside of another component, and every re-render brings in a new Input declared

As React thinks the Input before and after are two different component, so when Input unmounts and mounts.

Example 2: Apply key property