11^th Practical Class:
More hooks, memo, forwardRef

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
• Reduce the number of unnecessary re-renders

One solution is memoization - caching output values calculated with the same inputs.

useMemo, useCallback

• useMemo: "value memoization"
• useCallback: "function/callback memoization"

Without Memoization:

With Memoization:

React.memo

• memo "component memoization"
• Use React.memo() wisely

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

useRef

• useRef documentation
• Reference a value which is not needed for rendering

React.forwardRef

• React.forwardRef documentation
• allows you to use ref in custom components

Enable ref for custom component: