Avoiding unnecessary renders in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What causes unnecessary renders in React components?

Unnecessary renders happen when React re-renders a component even though its output would not change. This can be caused by changing state or props that don't affect the UI, or by passing new object or function references every time.

beginner

How does React.memo help avoid unnecessary renders?

React.memo is a higher-order component that wraps a functional component. It tells React to skip re-rendering the component if its props have not changed, improving performance by avoiding work when not needed.

intermediate

What is the purpose of useCallback in React?

useCallback returns a memoized version of a callback function that only changes if its dependencies change. This helps prevent passing new function references on every render, which can cause child components to re-render unnecessarily.

intermediate

Why should you avoid creating new objects or arrays inside component bodies without memoization?

Creating new objects or arrays inside components causes their references to change every render. If these are passed as props, React thinks the props changed and re-renders child components. Memoizing them with useMemo or useCallback avoids this.

intermediate

What role does useMemo play in avoiding unnecessary renders?

useMemo memoizes the result of a calculation or object creation so React reuses the same value between renders unless dependencies change. This prevents passing new references that cause child components to re-render.

Which React hook helps memoize a function to avoid unnecessary re-renders?

A useCallback

B useState

C useEffect

D useRef

useCallback memoizes functions so their references stay the same unless dependencies change, helping avoid unnecessary renders.

What does React.memo do?

A Runs side effects after render

B Prevents a component from rendering if its props haven't changed

C Automatically updates state

D Creates a new component

React.memo skips rendering a component if its props are the same as before, improving performance.

Why can passing new object literals as props cause unnecessary renders?

A Because React ignores objects

B Because React caches all objects

C Because objects are always equal

D Because objects are compared by reference, new objects look different each time

React compares props by reference, so new object literals create new references causing re-renders.

Which hook would you use to memoize a computed value to avoid recalculating it every render?

A useState

B useCallback

C useMemo

D useEffect

useMemo memoizes computed values so they are recalculated only when dependencies change.

What is a common sign that a React component is rendering unnecessarily?

A The UI looks the same but performance is slow

B The component never updates

C The component crashes

D The component only renders once

Unnecessary renders cause slow performance even though the UI output does not change.

Explain how React.memo, useCallback, and useMemo work together to avoid unnecessary renders.

Think about how React decides to re-render components based on props and function references.

Describe why creating new objects or functions inside a React component can cause performance issues.

Focus on how React compares props and why stable references matter.