React.memo usage - Mini Project: Build & Apply

Optimize a React Counter with React.memo

📖 Scenario: You are building a simple React app with two counters. One counter updates frequently, and the other does not. To improve performance, you want to prevent unnecessary re-rendering of the counter that does not change.

🎯 Goal: Build two counter components in React. Use React.memo to optimize the component that does not need to re-render when the other counter changes.

📋 What You'll Learn

Create two functional components: CounterA and CounterB

Use useState to manage separate counts for each counter

Wrap CounterB with React.memo to prevent unnecessary re-renders

Add buttons to increment each counter separately

💡 Why This Matters

🌍 Real World

React.memo helps improve app performance by skipping re-renders of components when their inputs (props) have not changed, useful in apps with many components or frequent updates.

💼 Career

Understanding React.memo is important for frontend developers to write efficient React applications and optimize user experience.

1

Set up two counters with state

Create a React functional component called App. Inside it, use useState to create two state variables: countA and countB, both starting at 0.

React

import React, { useState } from 'react';

function App() {
  // Your code here
}

Hint

Use const [countA, setCountA] = useState(0) and similarly for countB.

2

Create two counter components

Create two functional components called CounterA and CounterB. Each should accept count and onIncrement props. Render the count inside a <div> and a button that calls onIncrement when clicked.

React

import React, { useState } from 'react';

function CounterA({ count, onIncrement }) {
  // Your code here
}

function CounterB({ count, onIncrement }) {
  // Your code here
}

function App() {
  const [countA, setCountA] = useState(0);
  const [countB, setCountB] = useState(0);

  return null;
}

Hint

Return a <div> with a <p> showing the count and a button that calls onIncrement.

3

Use React.memo to optimize CounterB

Wrap the CounterB component with React.memo to prevent it from re-rendering when its props do not change.

React

import React, { useState } from 'react';

function CounterA({ count, onIncrement }) {
  return (
    
      Counter A: {count}
      Increment A
    
  );
}

const CounterB = React.memo(function CounterB({ count, onIncrement }) {
  // Your code here
});

function App() {
  const [countA, setCountA] = useState(0);
  const [countB, setCountB] = useState(0);

  return null;
}

Hint

Use const CounterB = React.memo(function CounterB(props) { ... }).

4

Render counters and add increment handlers

Inside the App component, render CounterA and CounterB. Pass countA and setCountA as count and onIncrement props to CounterA. Pass countB and setCountB similarly to CounterB. For onIncrement, pass a function that increases the count by 1.

React

import React, { useState } from 'react';

function CounterA({ count, onIncrement }) {
  return (
    
      Counter A: {count}
      Increment A
    
  );
}

const CounterB = React.memo(function CounterB({ count, onIncrement }) {
  return (
    
      Counter B: {count}
      Increment B
    
  );
});

function App() {
  const [countA, setCountA] = useState(0);
  const [countB, setCountB] = useState(0);

  // Your code here
}

Hint

Render both counters and pass increment functions that add 1 to the current count.

Practice

1.

What is the main purpose of React.memo in React?

easy

A. To manage state inside a functional component

B. To convert a functional component into a class component

C. To prevent unnecessary re-rendering of a functional component when its props have not changed

D. To fetch data from an API automatically

Solution

1. Step 1: Understand React.memo's role

   React.memo is a higher-order component that wraps a functional component to optimize rendering.

2. Step 2: Identify its effect on rendering

   It skips re-rendering the component if the props are the same as the previous render.

3. Final Answer:

   To prevent unnecessary re-rendering of a functional component when its props have not changed -> Option C

4. Quick Check:

   React.memo optimizes rendering = A [OK]

Hint: React.memo skips re-render if props unchanged [OK]

Common Mistakes:

• Thinking React.memo manages state
• Confusing React.memo with class components
• Assuming React.memo fetches data

2.

Which of the following is the correct syntax to wrap a functional component MyComponent with React.memo?

easy

A. const MemoizedComponent = React.memo(MyComponent);

B. const MemoizedComponent = React.memo => MyComponent();

C. const MemoizedComponent = React.memo(MyComponent());

D. const MemoizedComponent = React.memo{MyComponent};

Solution

1. Step 1: Recall React.memo usage syntax

   React.memo is a function that takes a component and returns a memoized version.

2. Step 2: Check each option's syntax

   const MemoizedComponent = React.memo(MyComponent); correctly calls React.memo with the component reference without invoking it.

3. Final Answer:

   const MemoizedComponent = React.memo(MyComponent); -> Option A

4. Quick Check:

   React.memo(Component) syntax = D [OK]

Hint: React.memo takes component, no parentheses after component name [OK]

Common Mistakes:

• Calling component inside React.memo (using parentheses)
• Using arrow function syntax incorrectly
• Using braces instead of parentheses

3.

Consider this code snippet:

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

function App() {
  const [count, setCount] = React.useState(0);
  const [text, setText] = React.useState('');

  return (
    <>
      <MyComponent count={count} />
      <input value={text} onChange={e => setText(e.target.value)} />
    </>
  );
}

What will be logged to the console when the user types in the input box?

medium

A. 'Rendered' logs only once when the component mounts

B. 'Rendered' logs every time the input changes

C. 'Rendered' never logs

D. 'Rendered' logs only when count changes

Solution

1. Step 1: Understand React.memo behavior with props

   MyComponent is memoized and only re-renders if its props change. It receives count as prop.

2. Step 2: Analyze prop changes on input update

   Typing changes text state, causing App to re-render. However, the count prop remains unchanged (same primitive value), so React.memo skips re-rendering MyComponent.

3. Step 3: Check if console logs on input change

   Since count does not change, React.memo prevents re-render, so 'Rendered' logs only once on mount.

4. Final Answer:

   'Rendered' logs only once when the component mounts -> Option A

5. Quick Check:

   React.memo skips re-render if props unchanged = B [OK]

Hint: React.memo skips re-render if props unchanged, so no log on input [OK]

Common Mistakes:

• Assuming any parent state change triggers child re-render
• Ignoring React.memo's prop comparison
• Thinking console logs every input change

4.

Consider this usage of React.memo:

const MyComponent = React.memo(({ value }) => {
  return <div>Value: {value}</div>;
}, (prevProps, nextProps) => {
  return prevProps.value === nextProps.value;
});

Which of the following correctly describes this code?

medium

A. The component function should not be an arrow function

B. The custom comparison function should return false when props are equal

C. React.memo cannot accept a second argument

D. The custom comparison function returns true when props are equal, which prevents re-rendering correctly

Solution

1. Step 1: Understand React.memo's custom comparison function

   The second argument is a function that returns true if props are equal, meaning skip re-render.

2. Step 2: Analyze the provided function

   The function returns true when prevProps.value === nextProps.value, which is correct to skip re-render when props are equal.

3. Step 3: Confirm the correct description

   The custom comparison function returns true when props are equal, which prevents re-rendering correctly accurately describes that it returns true when props are equal, preventing re-rendering correctly.

4. Final Answer:

   The custom comparison function returns true when props are equal, which prevents re-rendering correctly -> Option D

5. Quick Check:

   Custom compare returns true to skip re-render = C [OK]

Hint: Custom compare returns true to skip re-render [OK]

Common Mistakes:

• Thinking custom compare should return false when props equal
• Believing React.memo can't take a second argument
• Confusing arrow function usage

5.

You have a component wrapped with React.memo that receives a prop data which is an object. You notice it re-renders every time the parent renders, even if data has the same content. How can you fix this?

hard

A. Convert data to a string before passing it as prop

B. Use a custom comparison function in React.memo to do a deep comparison of data

C. Wrap the parent component with React.memo instead

D. Use useState inside the child component to store data

Solution

1. Step 1: Understand why re-renders happen with object props

   Objects are compared by reference, so even if content is same, new object causes re-render.

2. Step 2: Use custom comparison function

   React.memo accepts a second argument to compare props deeply and prevent re-render if content is equal.

3. Step 3: Evaluate other options

   Converting to string is inefficient and error-prone; wrapping parent doesn't solve child re-render; useState inside child doesn't prevent re-render.

4. Final Answer:

   Use a custom comparison function in React.memo to do a deep comparison of data -> Option B

5. Quick Check:

   Deep compare object props with custom function = A [OK]

Hint: Use custom compare to deep check object props [OK]

Common Mistakes:

• Passing new object each render without memoization
• Ignoring object reference equality
• Trying to fix with useState inside child