Is sending a notification in one component supposed to rerender parallel components?

[pratnayake]

Link to sandbox - https://3xbjcn.csb.app/ Here we can see that when we click the notify button in component 1, both component 1 and component 2 get re-rendered. Note: We see it re-rendering through the React Profiler. Is this intentional or are we doing something wrong.

[pratnayake]

https://codesandbox.io/s/adoring-rain-3xbjcn?file=/src/components/App.js Link to the code itself

[Hypermona]

Hi @pratnayake, move the NotificationSystem inside Component 1 it will work as you expected. https://codesandbox.io/embed/confident-curran-7nqeh2?fontsize=14&hidenavigation=1&theme=dark reason: when you use NotifcationSystem inside the parent, the state change will re-render the component and affect the child components. (correct me if I am wrong)

[LouisBarranqueiro]

👋 @pratnayake, sorry for the very late reply. it is not intended but not related to the library itself. As @Hypermona explained, the entire app is re-rendered because your root component reads notifications. As a reminder, when a component gets re-rendered, all its descendants are re-rendered too. To prevent your entire app from being re-rendered every time notifications changes, you want to wrap the NotificationsSystem inside another component.

Thank you for your help @Hypermona 🙏