Alexey Alexey - 11 months ago 38
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

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

leo leo
Answer Source

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