React.memo usage - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is React.memo used for in React?

React.memo is a function that helps to optimize functional components by preventing unnecessary re-renders when the component's props have not changed.

beginner

How do you wrap a functional component with React.memo?

<p>You wrap the component by exporting it as <code>export default React.memo(ComponentName);</code> or by assigning <code>const MemoComponent = React.memo(ComponentName);</code></p>

intermediate

What kind of comparison does React.memo use by default to check if props changed?

It uses a shallow comparison of the props, meaning it checks if the prop values are the same by reference or primitive equality.

intermediate

How can you customize the prop comparison in React.memo?

You can pass a second argument to React.memo, a function that receives the old and new props and returns true if they are equal (skip re-render) or false if not.

intermediate

When should you avoid using React.memo?

Avoid using React.memo if the component is very simple or if props change frequently, because the cost of comparing props might outweigh the benefits.

What does React.memo do?

A Automatically updates state

B Prevents re-render if props are unchanged

C Converts class components to functional

D Handles side effects

React.memo helps skip re-rendering a component if its props have not changed.

How does React.memo compare props by default?

A Deep comparison of all nested objects

B Compares only the first prop

C Ignores props and always re-renders

D Shallow comparison of props

It uses shallow comparison, checking if prop values are the same by reference or primitive equality.

Which is a correct way to use React.memo?

A MyComponent.memo()

B React.memo(MyComponent)();

C const MemoComp = React.memo(MyComponent);

D React.memo = MyComponent;

You wrap the component by assigning React.memo(MyComponent) to a variable or export it directly.

What can you pass as a second argument to React.memo?

A A function to customize prop comparison

B A boolean to force re-render

C An object with styles

D A string with component name

The second argument is a function that compares old and new props to decide if re-render is needed.

When might React.memo not improve performance?

A When props change frequently

B When component is complex

C When props rarely change

D When using class components

If props change often, the cost of comparing props can outweigh the benefits of memoization.

Explain how React.memo helps improve React app performance and when to use it.

Think about how React decides to update components.

Describe how to customize prop comparison in React.memo and why you might want to do that.

Consider cases where shallow comparison is not enough.