7^th Practical Class:
Memoization

Problem

Your app re-renders often with the same props and its re-rendering process is expensive, which makes the UI unresponsive.

Solutions

• Make the re-rendering logic less expensive
• Refactor code so that only necessary UI is re-rendered
• Reduce the number of unnecessary re-renders

memoization - caching output values calculated with the same inputs.

Skip re-rendering a component when its props are unchanged

• component memoization
• Use React.memo() wisely

,

• : value memoization
• : function/callback memoization

Without Memoization:

With Memoization:

Behavior inside

👉 <StrictMode> in Docs

• components will re-render an extra time to find bugs caused by impure rendering
• components will re-run effects an extra time to find bugs caused by missing cleanup

React Developer Tools

• Chrome Extension
• ⚛️ Components - ⚙️ Settings - ⚙️ General:
  • [ ] Highlight updates when components render

Don't try to memoize everything

• 🚧❗ use memoization only when something becomes slow
• 🚧❗ overuse of memoization can make your app slower!
• remember: Premature optimization is the root of all evil

Quacker Demo

• component in HomeTemplate.tsx