In this section, we'll dive into the concept of re-rendering in React, exploring what triggers a re-render and why it's crucial to understand this process.

We'll also look at some common problems developers face with unnecessary or frequent re-renders, which can lead to performance issues. Finally, I'll share practical tips on how to optimize re-renders in your React applications, ensuring a smoother and more efficient user experience.

React LifeCycle

Problem

A state update can trigger unnecessary re-renders of unrelated components ..

The App component manages a piece of state (isOpen) using the useState hook. When the state changes (e.g., when the user clicks the button to open a dialog), React re-renders the entire App component. As a result, components like VerySlowComponent, BunchOfStuff , and OtherStuffAlsoComplicated which are unrelated to the isOpen state get re-rendered unnecessarily. This can lead to performance inefficiencies, especially if these components are complex or slow to render.

Solution

Moving state down is an effective solution for preventing unnecessary re-renders of unrelated components in React. The concept involves moving the state that controls specific behavior or rendering to the closest common ancestor of only the components that actually need that state.

export default function App() {
  return (
    <>
      <ModalOpener />
      <VerySlowComponent />
      <BunchOfStuff />
      <OtherStuffAlsoComplicated />
    </>
  );
}

function ModalOpener() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open dialog</Button>
      {isOpen ? <ModalDialog onClose={() => setIsOpen(false)} /> : null}
    </>
  );
}

The isOpen state is moved into the ModalOpener component, which is only responsible for rendering the button and the modal. Now, when isOpen changes, only ModalOpener and its children re-render, leaving the other components (VerySlowComponent, BunchOfStuff, OtherStuffAlsoComplicated) untouched.

Conclusion

This approach optimizes performance by ensuring that only the components that actually need to re-render will do so, avoiding unnecessary rendering of unrelated components.