[Advanced React] Master Memoization in React - Githubissues

reboottime / React-Develpment

Some notes, thought, articles or source code readings aggregated here about React Web development.

0 stars 0 forks source link

[Advanced React] Master Memoization in React #76

Open reboottime opened 6 months ago

reboottime commented 6 months ago

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 commented 6 months ago

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