CODEWITHSUNDEEP
reactjs
Daniel_Kamel
Daniel_Kamel

Reputation: 619

Reactjs: don't let Modal trigger a re-render

In my Reactjs project I have a component that contains a Modal that has its own states and when 1 (or more) of these states change, they trigger a re-render of that component:

import React from "react";
import CustomModalComponent from "./CustomModalComponent";

const MainComponent = () => {
  const [isModalOpen,setIsModalOpen] = React.useState(false);

  console.log("main component");

  return(
      <React.Fragment>
         <section>Some UI here that can also turn modal state to true</section>
         <CustomModalComponent open={isModalOpen} toggleOpen={() => setIsModalOpen(!isModalOpen)} />
      </React.Fragment>
  );
}

export default MainComponent;

As I said whenever a state changes inside that custom modal component, it triggers a re-render in my main component which is due to the fact that I have a state that changes, but I was wondering if there is a way to change this "behavior" since if my main component is a big one, re-renders will take away from the performance.

Upvotes: 0

Views: 1103

Answers (1)

adsy
adsy

Reputation: 11497

You don't need to worry about rerenders until they are a problem. It is a common beginner's error to optimize for reducing rerenders. Sadly, a lot of false material exists online around this that suggests you need to be thinking about this from day 1. Rerenders are usually extremely cheap and simply don't matter.

Keep in mind a "rerender" doesn't mean it loads all the HTML up again in the DOM. Internally React diffs over the state, meaning it only makes small edits when the state changes.

Upvotes: 4

Related Questions