Send data between tabs in React.

In this article will look at how to send data between components in React globally, even in different browser tabs.

Story

Imagine you have a list of items, such as users.

Each of the users can be opened in a modal window for modification.

You don't have any subscriptions to the backend, which means that the list of users won't automatically synchronize with the backend if any user changes.

So, once a user's profile is updated, you want to automatically refresh the list of users under the modal window (even in all other tabs of your website).

What will we do to synchronize data in these unrelated components and tabs?

Solution

The modal window and the list of users should be able to exchange events and data.

Thus, if an action is performed in the modal window, the event should be sent to all components waiting for this kind of action (e.g. the list of users), so that they can react to this event, for example, by synchronizing data.

Let's set up such communication between the "UserList" and "UserProfileModal" components by using a small package use-app-events:

const UserProfileModal = () => {
  // retrieve a user ID from URL, for example
  const { userId } = useParams();

  // 1. Create an instance of useAppEvents
  const { notifyEventListeners } = useAppEvents();

  const submitUpdate = async () => {
    // send a request to BE here, await the response...

    // 2. Send an event containing the updated user ID to
    // all other components that are listening for it
    notifyEventListeners('user-update', userId);
  };

  return <button onClick={submitUpdate}>Save changes</button>;
};

👆 Modal window

👇 The list of users

const UserList = () => {
  const [users, setUsers] = useState([]);

  // 1. Create an instance of useAppEvents
  const { listenForEvents } = useAppEvents();

  // 2. Listen and wait for the 'user-update' event to happen in the app
  listenForEvents('user-update', (userId) => {
    // 3. React to the occurred event by loading the refreshed
    // list of users from BE here...
  });

  return users.map((user) => (
    // render users here...
  ));
};

use-app-events is a small open-source package with no dependencies and risks, it is also actively maintained and safe to use.

At this point, the update of the user profile in UserProfileModal will automatically notify all listeners like UserList, which will trigger a refresh of the list of users in UserList, resulting in a better UX.

It doesn't matter where UserList and UserProfileModal are placed in the component tree, they will still be able to send data between each other, even in different browser tabs.

Conclusion

If you need to effortlessly set up global communication to exchange data between components - make use of the use-app-events package.

It provides an easy-to-use API, extensive documentation, and strict typing to ensure you have the best developer experience.