hfhc2 hfhc2 - 1 month ago 18
React JSX Question

ReactJS component communication

I am wondering what is the recommended way to communicate between ReactJS components. I took a look at a related question. However, I did not find the answer sufficient. The key approaches seem to be the following:


  1. Assume that only childs / parents communicate.

  2. Communication from parent to child is realized by setting props, the reverse is realized by passing a callback as a prop.



This has the following disadvantages:


  1. Since siblings can't communicate directly, all state which has to be passed back and forth between siblings has to be stored in their common parent. This means that the parent has a lot of state which it doesn't really need.

  2. Passing callback is rather inelegant.



What I would like to do is to add to components methods / members in order to establish communication. I am thinking along the lines of RxJS. This would mean the following:


  1. I accept that communication is out of the scope of functionality handled by ReactJS. This seems to be the case anyhow.

  2. The members of classes need to be persistent. For example, a parent component should not create a new
    <Child />
    during each call to its
    render
    function since in this case all the subscriptions would have to be reestablished. Instead the constructor would have to create a
    this.child = <Child />
    object and in the
    render
    call render
    {this.child}
    instead.



My question is: Is component communication somehow handled by ReactJS or is this something that should be taken care of by the developer in some other way?

In the first case: Is there a scalable and elegant way that communication between components can be realized in ReactJS? Is the rationale of the developers of ReactJS is done in the way described above or is there something I am missing?

In the second case: How should the components communicate instead?

Answer

Well there are two established way in React to communicate between components.

Observable architechture: Mobx

Flux like architechture: Redux

Note: Look at mobx if you are not sure what to start with :)