React re-renders guide: everything, all at once

• What is re-render in React?

  • 🧐 What is a necessary and unnecessary re-render?

• When React component re-renders itself?

  • 🧐 Re-renders reason: state changes
  • 🧐 Re-renders reason: parent re-renders
  • 🧐 Re-renders reason: context changes
  • 🧐 Re-renders reason: hooks changes
  • ⛔️ Re-renders reason: props changes (the big myth)

• Preventing re-renders with composition

  • ⛔️ Antipattern: Creating components in render function
  • ✅ Preventing re-renders with composition: moving state down
  • ✅ Preventing re-renders with composition: children as props
  • ✅ Preventing re-renders with composition: components as props

• Preventing re-renders with React.memo

  • ✅ React.memo: component with props
  • ✅ React.memo: components as props or children

• Improving re-renders performance with useMemo/useCallback

  • ⛔️ Antipattern: unnecessary useMemo/useCallback on props
  • ✅ Necessary useMemo/useCallback
  • ✅ useMemo for expensive calculations

• Improving re-render performance of lists

  • ⛔️ Antipattern: random value as key in lists

• Preventing re-renders caused by Context

  • ✅ Preventing Context re-renders: memoizing Provider value
  • ✅ Preventing Context re-renders: splitting data and API
  • ✅ Preventing Context re-renders: splitting data into chunks
  • ✅ Preventing Context re-renders: Context selectors