Optimizing Re-Renders by Moving State

Source: Dev.to

Introduction

One way to improve performance and reduce unnecessary re‑renders is by lowering the state, especially if it only affects a specific part of the component tree.

For example, consider a parent component that has a button to change a count state. By moving this state change to a separate component, we can prevent the entire parent from re‑rendering.

Before (with performance issue)

import { useState } from 'react';
import { data } from '../../../../data';
import List from './List';

const App = () => {
  const [people, setPeople] = useState(data);
  const [count, setCount] = useState(0);

  return (
    
       setCount(count + 1)}
        style={{ marginBottom: '1rem' }}
      >
        count {count}
      
      
    
  );
};
export default App;

In this setup, every time the count state changes, the entire App component (including the List component) re‑renders, which is inefficient.

Solution: Move the counter button to a separate Counter component

import { useState } from 'react';
import { data } from '../../../../data';
import List from './List';
import Counter from './Counter';

const App = () => {
  const [people, setPeople] = useState(data);

  return (
    
      
      
    
  );
};
export default App;

By extracting the counter button into its own Counter component, only that component re‑renders when the count changes, leaving the rest of the UI untouched.

Updated Counter Component

import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
     setCount(count + 1)}
      style={{ marginBottom: '1rem' }}
    >
      count {count}
    
  );
};

export default Counter;

The React Profiler

In the React Profiler, you’ll see that only the Counter component re‑renders when the button is clicked, not the List component or its child components (e.g., Person).

Profiler Screenshots

Summary

By separating the state that affects specific UI elements (like the counter button) into its own component, we can reduce unnecessary re‑renders and improve performance.