How do you pass data between sibling components that don't have a parent-child relationship?

Difficulty: 5/10

state management, context API, event bus

We can pass data from child to parent using a callback function passed as a prop from parent to children, this callback will be called to update parent with the data in child component.

In such cases, you can use techniques like

1
lifting state up to a common ancestor
2
using a state management library like Redux, mobx
3
Use context api
4
employing a state management pattern like prop drilling.

In React, sibling components cannot directly share data with each other. However, they can communicate indirectly through a common parent component1. Here’s a basic approach. Store the shared state in the parent component: The parent component holds the state that needs to be shared among its child components.

Pass a callback function to one child component: This function updates the state of the parent component.

Pass the shared state to the other child component: The other child component receives the shared state as a prop.

In this example, when the button in ChildComponentA is clicked, the sendData method is called, which in turn calls the handleData method of ParentComponent (passed down as a prop), updating the state of ParentComponent with the data from ChildComponentA. This updated state is then passed to ChildComponentB as a prop.

This is a simple example, and there are other ways to share data among sibling components, such as using context or third-party state management libraries like Redux or MobX, depending on the complexity of your application

Scenario Questions

0-2 years experience

1You have two sibling components, A and B, that need to share a piece of text entered in A. How would you implement this without using a global store?
2If you tried to lift state up to a common parent but the parent is a third‑party component you can’t modify, what alternative would you use to get the data from A to B?
3What happens if you attempt to pass props directly from A to B using a ref?

2-5 years experience

1In a feature you’re adding, Component X needs to notify its sibling Component Y about a user action, but the components are deep in different branches of the tree. Walk me through how you’d set this up and why you’d choose that approach.
2You implemented a Context provider to share state between siblings, but after a recent refactor the UI stops updating. What could be causing the breakage?
3Suppose you introduced an event emitter library to broadcast messages between siblings, and you notice memory leaks after navigating away. How would you debug and fix it?

5-8 years experience

1Design a scalable solution for sharing real‑time data among many sibling components across multiple pages, considering performance and bundle size.
2Compare using Redux, the Context API, and a custom pub/sub system for sibling communication in a large codebase. What trade‑offs would drive your choice?
3How would you refactor an existing app that currently uses ad‑hoc callbacks between siblings to a more maintainable pattern without rewriting all components?

8+ years experience

1Your organization is migrating from a monolithic React app to micro‑frontends. How would you ensure sibling components that previously relied on a shared store continue to communicate efficiently across bundle boundaries?
2When planning long‑term architecture, how do you decide whether to introduce a global state solution versus keeping sibling communication localized, especially given cross‑team ownership?
3Describe a strategy for deprecating a legacy event bus used for sibling communication while minimizing impact on downstream teams.

Follow-up Questions

Can you sketch the code you’d write for that solution?
What are the main pitfalls or edge cases you’d watch out for?
How would you verify that the data is correctly reaching the sibling component?

Sharethis question

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.