How to Effectively Manage Inter-Component Communication in React?

Inter-Component Communication in React

In React, maintaining state across multiple components can be challenging. Here's how to facilitate communication between related components:

Scenario #1: Filters as a Child of List

Pass a handler from the parent (List) to the child (Filters). When the filter changes, the handler in Filters calls the parent's method to update the state and trigger a re-render in List.

Scenario #2: Common Parent for Filters and List

Introduce a parent component that delegates communication. The parent passes a handler to Filters and updates the state of both Filters and List when the filter changes.

Scenario #3: Global Event System

For components without a parent-child relationship, consider using a global event system. Define an event name, such as 'filterUpdated', and subscribe to it in both Filters and List components. On filter changes, trigger the event, which will notify any subscribed components to update their state accordingly.

Example:

// Global events file
export const myEmitter = new EventEmitter();

// Filters component
componentDidMount() {
  myEmitter.on('filterUpdated', this.handleFilterUpdate);
}

handleFilterChange() {
  // Emit event and pass new filter value
  myEmitter.emit('filterUpdated', newFilterValue);
}

// List component
componentDidMount() {
  myEmitter.on('filterUpdated', this.handleFilterUpdate);
}

handleFilterUpdate(newFilterValue) {
  // Update state
  this.setState({ filterValue: newFilterValue });
}

The above is the detailed content of How to Effectively Manage Inter-Component Communication in React?. For more information, please follow other related articles on the PHP Chinese website!