Alexey Alexey - 2 months ago 6
React JSX Question

How to communicate between two siblings components without changing state of parent?

I am new to ReactJS and I faced the following problem - I have

Parent
component, and two child components -
List
and
Map
. Both of these has children items. What I want is when I hover a component in
Map
- change style of appropriate component in
List
and vice versa.
I can handle hover events, but if I save ID of hovered element in
Parent
state, it will rerender full
Parent
component on each hover. How can I avoid this?
I'm not using Redux or something like this.

leo leo
Answer

No, it won't.


It will only rerender the elements that have changed.
Just do it and don't worry - O(n) is extremely fast. As pointed out in the comments, if your component is extremely large - you could implement an intermediate one as well.

Here is how React implements the diff algorithm.

Rerender in case of:

  • Different Node Types
  • Key attribute changed
Comments