Mastering React Component Communication: Props, Observer, Flux & Redux

Component Relationships in a Pure React Project

Before discussing communication, we outline typical React component hierarchies: a parent with multiple children (Child_1, Child_2, Child_1_1, etc.) and sibling relationships (e.g., Child_1 and Child_2). These relationships are analogous to DOM parent‑child structures for illustration purposes.

Parent‑to‑Child Communication

Data flows one‑way from parent to child via props. The example below shows a parent component passing a msg prop to Child_1:

class Parent extends Component{  state = {msg: 'start'};  componentDidMount(){ setTimeout(()=>{ this.setState({msg: 'end'}); },1000); }  render(){ return <Child_1 msg={this.state.msg} />; }}

For deeper hierarchies (e.g., Parent → Child_1_1), the spread operator ( ...this.props) can forward all parent props to grandchildren, preserving performance after Babel transpilation.

// Using spread operator to pass props to Child_1_1
class Child_1 extends Component{  render(){ return <div> <p>{this.props.msg}</p> <Child_1_1 {...this.props} /> </div>; }}

Child‑to‑Parent Communication

The parent supplies a callback function via props; the child invokes it, sending data back to the parent’s scope.

class Parent extends Component{  state = {msg: 'start'};  transferMsg(msg){ this.setState({msg}); }  render(){ return <div> <p>child msg: {this.state.msg}</p> <Child_1 transferMsg={msg=>this.transferMsg(msg)} /> </div>; }

The child calls the passed function, often using an arrow function to keep this bound to the parent.

Sibling Component Communication

Siblings communicate indirectly through their common parent. Child_1 sends a message to the parent, which then forwards it to Child_2.

class Parent extends Component{  state = {msg: 'start'};  transferMsg(msg){ this.setState({msg}); }  render(){ return ( <div> <Child_1 transferMsg={msg=>this.transferMsg(msg)} /> <Child_2 msg={this.state.msg} /> </div> ); }

This approach triggers lifecycle methods in all involved components, which may be undesirable for large trees.

Observer Pattern (Publish‑Subscribe)

To decouple components, an event bus (e.g., eventProxy) implements on, one, off, and trigger. Child_1 publishes a msg event; Child_2 subscribes and updates its state when the event occurs.

import eventProxy from '../eventProxy';
class Child_1 extends Component{  componentDidMount(){ setTimeout(()=>{ eventProxy.trigger('msg','end'); },1000); } }
class Child_2 extends Component{  state = {msg: 'start'};  componentDidMount(){ eventProxy.on('msg',msg=>{ this.setState({msg}); }); } }

Flux and Redux

Flux is an architectural pattern consisting of Dispatcher, Stores, Views, and Actions. Redux, a popular Flux implementation, provides a single store and pure reducer functions.

import {createStore} from 'redux';
function reducer(state = {}, action){ return action; }
let store = createStore(reducer);
// Child_1 dispatches actions
class Child_1 extends Component{  componentDidMount(){ setTimeout(()=>{ store.dispatch({type:'child_2',data:'hello'}); },1000); setTimeout(()=>{ store.dispatch({type:'child_2_1',data:'bye'}); },2000); } }
// Child_2 subscribes to store updates
class Child_2 extends Component{  state = {msg:'start'};  componentDidMount(){ store.subscribe(()=>{ const s = store.getState(); if(s.type==='child_2'){ this.setState({msg:s.data}); } }); } }

Reducers process actions and return new state; components retrieve the latest state via store.getState(). By checking whether the relevant slice of state has changed before calling setState, unnecessary re‑renders are avoided.

Conclusion

React’s built‑in props mechanism works for simple hierarchies, but for deeper or sibling communication, patterns like the observer (event bus) or state‑management libraries such as Flux/Redux provide more scalable solutions. However, Redux can become cumbersome if overused; the original Flux idea of keeping subscriptions at the top‑level component often offers a cleaner alternative.