Today's Tech Byte: Intro to re-renders

Remember when I mentioned that I purchased a new book called Advanced React? Well, I started reading it and I’m going to share with you what I learned from the first chapter.

Intro to re-renders

The most important stages of a React component’s lifecycle are:

• Mounting: when the component is created and inserted into the DOM.

• Re-rendering: when the component is updated with new data.

• Unmounting: when the component is removed from the DOM.

Re-rendering is one of the crucial stage of a React component’s, it’s important to understand how it works in order to avoid performance issues.

Rendering occurs when the component’s state. React will re-render the component and its children.

Contrary to what you might think, a component does not re-render when its props change. For example, in the following code, the component will not re-render when the props change.

const App = () => {
  // local variable won't work
  let isOpen = false;
  return (
    <div className="layout">
      {/* nothing will happen */}
      <Button onClick={() => (isOpen = true)}>Open dialog</Button>
      {/* will never show up */}{" "}
      {isOpen ? <ModalDialog onClose={() => (isOpen = false)} /> : null}
    </div>
  );
};

In order to make the component re-render, we need to use state.

“Moving state down” pattern

Usually people are tempted to reach out to memoization, to avoid unnecessary re-rendering, however this is not the always right solution.

Let’s take a look at the following example:

const App = () => {
  const [isOpen, setIsOpen] = useState(false);
  // everything that is returned here will be re-rendered when the state is updated
  return (
    <div className="layout">
      <Button onClick={() => setIsOpen(true)}> Open dialog </Button>
      {isOpen ? <ModalDialog onClose={() => setIsOpen(false)} /> : null}
      <VerySlowComponent />
      <BunchOfStuff />
      <OtherStuffAlsoComplicated />
    </div>
  );
};

We could just move the state to the component that needs it, and avoid re-rendering the whole app. and that’s what we call “moving state down” pattern.

const ButtonWithModalDialog = () => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open dialog</Button>
      {isOpen ? <ModalDialog onClose={() => setIsOpen(false)} /> : null}
    </>
  );
};

const App = () => {
  return (
    <div className="layout">
      {/* here it goes, component with the state inside */}{" "}
      <ButtonWithModalDialog />
      <VerySlowComponent />
      <BunchOfStuff />
      <OtherStuffAlsoComplicated />
    </div>
  );
};

Conclusion

I was familiar with the concept of re-rendering, but I never thought about it in depth. I’m glad I read this chapter, I learned a lot and I’m looking forward to reading the next one.

P.S. this post is inspired by the book, but it’s not a summary of it. I’m just sharing what I learned from it. If you want to learn more about React, I highly recommend you to read it.