Want to know why some components are rendering unnecessary ?

[jaimeenkoffeekodes]

Summary

so when I click on create-bill, it opens one modal which is created using fixed property of tailwindcss . problem is that , sidebar , header should not be re-render but they are rendering .

this popup is showing that sidebar is rendering because context is changing , (note: I have one global context create and provided in layout.tsx, so I am just guessing , is this rendering due to this other reason also )

I want to optimise this app, how can I do it with stoping unnecessary re-rendering?

Additional information

No response

Example

No response

[icyJoseph]

Let's first clear some doubts:

• https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/#standard-render-behavior

React's default behavior is that when a parent component renders, React will recursively render all child components inside of it!

People often think that props not changing, and what not, should not cause re-renders, but React doesn't necessarily work that way.

That being said. Could you share a bit more of how the PopUp is rendered in JSX, how its state is managed, and how the sidebar is rendered?

One way this can happen is when one uses one Context Provider to both, pass state, and state modifiers, then, when state is changed, the components that access the state modifiers, are also re-rendered, even though they, arguably, shouldn't.

One way to fix that, is to use two providers, with properly memoized values. See here, how the button doesn't re-render when the count updates.

[jaimeenkoffeekodes]

okay

[icyJoseph]

I forgot to mention that in the React devtools you can also activate the parse hook names option, to see more details, but also, clicking the context that triggers a render also shows if a hook, and which one, did it. You can switch to the component view and the context will be already selected, so you can locate the hook that triggered the render.