Avoiding unnecessary renders in React - Mini Project: Build & Apply

Avoiding unnecessary renders in React

📖 Scenario: You are building a simple React app that shows a counter and a button to increase it. You want to make sure the button component does not re-render unless necessary to improve performance.

🎯 Goal: Build a React app with a counter and a button. Use React.memo to avoid unnecessary re-renders of the button component.

📋 What You'll Learn

Create a state variable count initialized to 0

Create a button component called IncrementButton

Use React.memo to wrap IncrementButton

Pass a callback increment to IncrementButton that increases count

Ensure IncrementButton only re-renders when increment changes

💡 Why This Matters

🌍 Real World

Avoiding unnecessary renders is important in React apps to keep them fast and responsive, especially when components are complex or the app grows large.

💼 Career

React developers often optimize components with React.memo and hooks like useCallback to improve app performance and user experience.

1

Set up the counter state

Create a React functional component called CounterApp. Inside it, create a state variable called count initialized to 0 using useState.

React

import React, { useState } from 'react';

function CounterApp() {
  // Create state variable count with initial value 0
  const [count, setCount] = useState(0);
}

Need a hint?

Use const [count, setCount] = useState(0) inside your component.

2

Create the IncrementButton component

Create a new functional component called IncrementButton that accepts a prop called increment. Inside it, return a <button> element with the text Increase and an onClick handler that calls increment.

React

import React, { useState } from 'react';

function CounterApp() {
  const [count, setCount] = useState(0);
}

// Create IncrementButton component with increment prop
function IncrementButton({ increment }) {
  return Increase;
}

Need a hint?

Define IncrementButton as a function with { increment } props and return a button with onClick={increment}.

3

Use React.memo to wrap IncrementButton

Wrap the IncrementButton component with React.memo to prevent unnecessary re-renders when its props do not change.

React

import React, { useState } from 'react';

function CounterApp() {
  const [count, setCount] = useState(0);
}

// Wrap IncrementButton with React.memo
const IncrementButton = React.memo(function IncrementButton({ increment }) {
  return Increase;
});

Need a hint?

Use const IncrementButton = React.memo(function IncrementButton({ increment }) { ... }).

4

Complete CounterApp with increment callback and render

Inside CounterApp, create a function called increment that increases count by 1 using setCount. Render the current count inside a <div>. Render the IncrementButton component and pass the increment function as a prop.

React

import React, { useState } from 'react';

function CounterApp() {
  const [count, setCount] = useState(0);

  // Create increment function to increase count
  function increment() {
    setCount(prev => prev + 1);
  }

  // Render count and IncrementButton
  return (
    
      Count: {count}
      
    
  );
}

const IncrementButton = React.memo(function IncrementButton({ increment }) {
  return Increase;
});

Need a hint?

Define increment inside CounterApp and use it in IncrementButton props. Render count in a div.