React.memo usage - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output behavior of this React.memo wrapped component?

Consider the following React component wrapped with React.memo. What will happen when the parent component re-renders but the props remain the same?

React

import React, { useState } from 'react';

const Child = React.memo(({ count }) => {
  console.log('Child rendered');
  return <div>Count: {count}</div>;
});

export default function Parent() {
  const [count, setCount] = useState(0);
  const [other, setOther] = useState(0);

  return (
    <>
      <Child count={count} />
      <button onClick={() => setOther(other + 1)}>Change Other</button>
    </>
  );
}

A The Child component only renders once initially and does not re-render when the Parent's 'other' state changes.

B The Child component never renders because React.memo prevents initial rendering.

C The Child component re-renders every time the Parent re-renders, logging 'Child rendered' each time.

D The Child component re-renders only when the Parent's 'other' state changes.

💡 Hint

React.memo prevents re-rendering if props do not change.

React.memo wraps the Child component to memoize it. It only re-renders if its props change. Since 'count' stays the same when 'other' changes, Child does not re-render, so 'Child rendered' logs only once.

📝 Syntax

intermediate

Which option correctly uses React.memo with a custom comparison function?

You want to prevent re-rendering of a component unless the 'user.id' prop changes. Which code snippet correctly uses React.memo with a custom comparison function?

A const MemoComp = React.memo(Component, (prev, next) => prev.user.id > next.user.id);

B const MemoComp = React.memo(Component, (prev, next) => prev.user.id !== next.user.id);

C const MemoComp = React.memo(Component, (prev, next) => prev.user === next.user);

D const MemoComp = React.memo(Component, (prev, next) => prev.user.id === next.user.id);

💡 Hint

The comparison function should return true if props are equal to skip re-render.

The second argument to React.memo is a function that returns true if props are equal (to skip re-render) and false if props changed (to re-render). Option D returns true when user.id is the same, so it is correct.

❓ state_output

advanced

What will be logged when clicking the button in this React.memo example?

Analyze the code below. What will be logged to the console when the button is clicked twice?

React

import React, { useState } from 'react';

const Display = React.memo(({ value }) => {
  console.log('Display rendered with value:', value);
  return <div>{value}</div>;
});

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <Display value={count} />
      <button onClick={() => setCount(count)}>Click me</button>
    </>
  );
}

A 'Display rendered with value: 0' logs twice, once on initial render and once after each click.

B 'Display rendered with value: 0' logs once initially and once after the first click only.

C 'Display rendered with value: 0' logs only once on initial render.

D No logs appear because the component never renders.

💡 Hint

React.memo skips re-render if props are shallowly equal.

Clicking the button calls setCount with the same value (count). React.memo sees the same prop value and skips re-rendering Display, so the log appears only once on initial render.

🔧 Debug

advanced

Why does this React.memo component still re-render on every parent update?

Look at the code below. Despite using React.memo, the Child component re-renders every time the Parent updates. Why?

React

import React, { useState } from 'react';

const Child = React.memo(({ data }) => {
  console.log('Child rendered');
  return <div>{data.text}</div>;
});

export default function Parent() {
  const [count, setCount] = useState(0);
  const data = { text: 'Hello' };

  return (
    <>
      <Child data={data} />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
}

A Because React.memo does not work with objects as props.

B Because the 'data' object is recreated on every render, causing props to be different.

C Because the Child component is missing a key prop.

D Because the Parent component does not use useCallback for the button handler.

💡 Hint

Objects are compared by reference, not by content.

Each render of Parent creates a new 'data' object. React.memo shallowly compares props by reference, so it sees a new object each time and re-renders Child.

🧠 Conceptual

expert

Which statement best describes React.memo's behavior?

Select the most accurate description of how React.memo works in React functional components.

A React.memo shallowly compares props and skips re-render if props are equal by reference or primitive value.

B React.memo prevents all re-renders of a component regardless of prop changes.

C React.memo deeply compares all nested objects in props to decide on re-rendering.

D React.memo only works with class components to optimize rendering.

💡 Hint

Think about how JavaScript compares objects and primitives.

React.memo performs a shallow comparison of props. It compares primitive values by value and objects by reference. If props are equal, it skips re-rendering the component.