/react-render-tests

Primary LanguageTypeScript

React render tests

When does React re-render? When does it not? We’ll find out!

Summary

A component will re-render if:

  • Its parent re-renders, and the component is NOT wrapped in React.memo().
  • useState() is called. At all. Even if it’s setting state to the previous value.

Testing

You can run the tests yourself with:

pnpm i
pnpm test

This will print out a table of test results like so:

┌─────────┬────────────────────────────────────────┬────────┐
│ (index) │ test                                   │ result │
├─────────┼────────────────────────────────────────┼────────┤
│ 0       │ 'no-props'                             │ false  │
│ 1       │ 'no-props (memo)'                      │ true   │
│ 2       │ 'set-state-primitive-same'             │ false  │
│ 3       │ 'set-state-primitive-same (memo)'      │ false  │
│ 4       │ 'set-state-primitive-same-fn'          │ false  │
│ 5       │ 'set-state-primitive-same-fn (memo)'   │ false  │
│ 6       │ 'set-state-primitive-different'        │ false  │
│ 7       │ 'set-state-primitive-different (memo)' │ false  │
│ 8       │ 'use-effect'                           │ false  │
│ 9       │ 'use-effect (memo)'                    │ true   │
│ 10      │ 'use-ref'                              │ false  │
│ 11      │ 'use-ref (memo)'                       │ true   │
└─────────┴────────────────────────────────────────┴────────┘

In the corresponding test in src/tests/, you’ll find a description of what the test is aiming for, and you can look at the code.