How to communicate between independent components in React

In React, independent components aren’t directly nested within each other. Communicating between such components can be challenging, but it’s essential for building scalable and maintainable applications. Communication between independent components in React can be achieved through various methods, depending on the complexity of our application. The primary methods include:

Props

Props drilling involves passing data down to nested child components from a parent component. This method suits small to medium-sized applications with a shallow component hierarchy. However, it can become cumbersome in deeply nested structures.

Code example

The following is an example of using props to communicate between independent components:

Explanation

App.js:

• Line 6: In App.js, we define the App component, which holds the message state using useState.

• Line 11: We render the ChildComponentA and pass the message state as a prop, along with the setMessage function.

ChildComponentA.js:

• Line 5: In ChildComponentA.js, we define the ChildComponentA component, which receives the message and setMessage props.

• Line 10: Inside ChildComponentA, we render ChildComponentB and pass the same message and setMessage props down the hierarchy.

ChildComponentB.js:

• Line 4: In ChildComponentB.js, we define the ChildComponentB component, which receives the message and setMessage props.

• Line 9: The ChildComponentB component displays the message and provides a button to update it. When the button clicks, it calls the setMessage function to update the message.

Context API

The Context API is a built-in solution for sharing state across components without prop drilling. It provides a way to create and manage a global state that any component can access. This method is more scalable and easier to maintain in larger applications.

Code example

The following is an example of using Context API to communicate between independent components:

Explanation

App.js:

• Line 5: In App.js, we create a constant variable AppContext that holds a context object created using React’s createContext function.

• Lines 7–8: We define the App component, which provides a message state using useState.

• Lines 11–16: Inside the App component, we wrap the content in an AppContext.Provider. This makes the message state available to all child components wrapped within this provider.

• Line 14: We render the ChildComponent inside of the App component.

ChildComponent.js:

• Line 2: In ChildComponent.js, we import useContext and AppContext.

• Line 6: We define the ChildComponent component and use useContext to access the message state from the context.

• Line 12: The child component displays the message and provides a button to update the message.

Third-party state management

Third-party state management libraries like Redux vs. Mobx provide a centralized store for our application’s state. They offer a powerful way to communicate between independent components, especially in large-scale applications. While they have a steeper learning curve, they provide a robust state management and communication solution.

Conclusion

We can say that we have three main options when it comes to facilitating communication between independent components in React. Prop, the simplest method, is suitable for smaller applications but can become unwieldy in larger, more complex ones. The Context API offers a built-in solution for global state management, making it a better choice for scalability. Third-party state management libraries like Redux provide a centralized store and actions for efficient communication, making them ideal for large-scale applications with intricate component relationships. The choice among these methods depends on our project’s specific needs and complexity.