Want to know why some components are rendering unnecessary ? #65072
Replies: 1 comment 2 replies
-
Let's first clear some doubts:
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. |
Beta Was this translation helpful? Give feedback.
-
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
Beta Was this translation helpful? Give feedback.
All reactions