Why can inline objects and functions as props hurt memoisation?
Model answer
A new object or function is created on each render, so its reference differs every time, and React.memo sees "changed" props and re-renders the child. Fix by moving constants outside the component, or memoising with useMemo and useCallback when the child is memoised.
If the child is not memoised, this does not matter.
Learn this topic
React Performance: memo, useMemo, useCallback and When Not to Use Them in the course React.js Full Course: Beginner to Advanced.
Sign in to add your own answer.
More questions
- Why does a component re-render, and is re-rendering always bad?
- What does React.memo do?
- What is the difference between useMemo and useCallback?
- What is the React Compiler, and does it replace useMemo and useCallback?
- How do you lazy-load components in React?
- How do you render a very long list efficiently?