How can I communicate between related react components?

javascript

react-component-interaction

state-management

event-handling

byNikita Barsukov·Feb 9, 2025

Embed React's props to relay a state-updating function from a parent to child components. This interaction lets them communicate by updating a shared state. The useState hook should be initiated in the parent for handling state, providing children the means to trigger state changes. Here's a quick example:

const Parent = () => {
  // Our shared state that's more popular than the latest meme
  const [sharedState, setSharedState] = useState('');
  // Child and Sibling, sounds like a sitcom, doesn't it?
  return (
    <>
      <Child onChange={setSharedState} />
      <Sibling value={sharedState} />
    </>
  );
}

const Child = ({ onChange }) => (
  // Behold, a button that can change the world...or just our sharedState
  <button onClick={() => onChange('new value')}>Update</button>
);

const Sibling = ({ value }) => (
  // Just displaying sharedState, living the simple life.
  <div>{value}</div>
);

In this prime illustration, Child sends updates via onChange, Sibling consumes the sharedState. This ensures a symmetric flow of data amongst associated components.

State Manipulation and Event Handling

Props: The Postman of React

Pass data from a parent component to a child component through props. This allows a component to pass data directly to another, akin to a neighbor handing over a sweet home-baked pie.

Parent-Child Communication with Callbacks

Parent components can provide callback functions as props to children, allowing children to pass data back to their parent components.

React Context: Global Telegraph

If components are not directly related but need to share data, they can use React Context API. It provides a way to pass data through the component tree without having to pass props down manually at every level.

Redux: The State Generalist

For managing complex states across many components, Redux might be your best ally, as it provides a central data store and enforces consistent state updates.

Event Bus: The Interstellar Communication

Where React components sit quite far apart in the component tree, an Event Bus can be used to enable communication between them.

Enhanced Interactions and Amplified Efficiency

useState() and setState()

React's useState() and setState() methods help trigger state updates, ensuring the UI is in sync with the application's state.

Manual Updates with forceUpdate()

When you need to manually trigger an update, React’s forceUpdate() method to the rescue! Use it scarcely, as it circumvents the usual shouldComponentUpdate lifecycle.

Decoupling State and UI Updates

Rely on shouldComponentUpdate or PureComponent to prevent unnecessary renders. Not every state change needs to result in a UI update.

Deep Dive into Interactions

Testing React Components

Independently run component tests to ensure clear and predictable interactions. I mean, who doesn't like a well-behaved component.

Architecting Components

Consider the relationship and structure of your components. Plan and design with interactions in mind, just like planning out an efficient production line.