Skip to content

React performance

Vercel's React and Next.js performance rules: waterfalls, bundles, re-renders.

From vercel-react-best-practices ↗ by Vercel

33 principles

01

Start early, await late

02

Chain nested fetches per item

03

Check cheap conditions first

04

Stream behind Suspense

05

Fetch in sibling components

06

Skip barrel imports

07

Load heavy code on use

08

Keep import paths static

09

Preload on intent

10

defer or async every script

11

Auth inside every action

12

Dedupe server work

13

Keep handlers lean

14

Keep request data local

15

Send only rendered fields

16

Share requests and listeners

17

Guard browser storage

18

Derive, don't sync

19

Side effects go in handlers

20

Define components at top level

21

Subscribe to what you render

22

Update from latest, immutably

23

Memoize only to skip work

24

Compute once, reuse

25

Keep fast values in refs

26

Keep typing urgent

27

Defer chores to idle time

28

Skip what users can't see

29

Theme before hydration

30

Use a ternary, not &&

31

Batch DOM reads and writes

32

Index once, loop once

33

Stable effect dependencies