Design Challenge 005: Synchronizing State Across Your React Component Tree

In any dynamic application, there are moments when you need to update a piece of data and see that change reflected across different parts of the application. This is a common challenge that, if not handled well, can lead to inconsistent UI states and confusing user experiences.

Background and Design Challenge

Imagine you're working on an application where users can edit card details in a popup, and once they save the changes, the updated details should automatically reflect in the card list. Another scenario could be marking an item as a favorite, and having that reflected in a "My Favorites" list, even if the list is located in a completely different part of the app.

The pseudo-structure of such an application might look something like this:

const Application = () => {
  return (
    <div>
      <Navigation />
      <Sidebar />
      <Board id="abc" />
    </div>
  );
};

const Sidebar = () => {
  return (
    <div>
      <h2>My boards</h2>
      <BoardList boards={} />
    </div>
  );
};

const Navigation = () => {
  return (
    <nav>
      <FavroiteBoardMenuList />
    </nav>
  );
};

const Board = () => {
  return (
    <div>
      <Topbar>
        <h2>Board name</h2>
        <Favorite />
      </Topbar>
    </div>
  );
};

This is a simplified version, and in a real-world application, you might have many more lines of code to handle styling, data fetching, state management, and so on. Ensuring that the favorite boards are synced across different components can be quite challenging, especially if you want to avoid hardcoding values or structures.

The challenge

The challenge I present to you today is to implement a way to share state across the component tree effectively. Specifically, one part of your application needs to modify the data, while other parts need to listen for changes and update their display accordingly. Additionally, some components might only need to read and render the state, without the ability to modify it.

For example, in the scenario above, the sidebar component might be read-only, displaying a yellow star when a board is marked as a favorite somewhere else in the application.

Ending

This challenge is a great opportunity to think about how you manage state in a React application, especially in a large and complex component tree. I encourage you to experiment with different approaches and share your solutions. How would you ensure that state changes propagate correctly without introducing unnecessary complexity or tightly coupling your components?