Sharing State Between Non-Parent-Child Components in React

React is known for its component-based architecture, and sharing state between components is a common necessity in React applications. However, there are scenarios where we need to share the state between two components that are not related by parent-child relationship. There are two primary and correct ways to accomplish this: using the Context API and using a state management library like Redux.

Using the Context API

The context API is a feature offered by React that allows you to share state between unrelated components without passing props through intermediate components. This works by allowing you to define a context object, with which you can set an initial state. Any component within the context provider’s scope can access the context value and can also alter the context value if the provider component provides an updater function.

Here's a simple use case for context:

import React, { createContext, useState } from 'react';

const MyContext = createContext(null);

const MyProvider = ({ children }) => {
  const [state, setState] = useState('initial state');

  return (
    <MyContext.Provider value={{ state, setState }}>
      {children}
    </MyContext.Provider>
  );
};

// Now any component under MyProvider can access 'state'.

Using a State Management Library like Redux

Redux is a predictable state container for JavaScript applications that helps you write applications that behave consistently in different environments (client, server, and native). It's a great choice for managing complex state.

In Redux, state is kept in a store which is accessible to every component, no matter where it is in the component tree. Components can dispatch actions, which are processed by reducers to modify the state. The updated state is then propagated back down to the relevant components.

Here's a simple use case for Redux:

import { createStore } from 'redux';

// This is a reducer:
function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

// Create a Redux store holding the state of your app.
let store = createStore(counter);

// You can use subscribe() to update the UI in response to state changes.
store.subscribe(() => console.log(store.getState()));

// And you can dispatch actions like so:
store.dispatch({ type: 'INCREMENT' });

Conclusion

Both the Context API and Redux enable the sharing of state between two components that are not parent-child in React. While the Context API might be simpler and requires fewer dependencies, Redux provides robust state management for larger, more complex applications, and includes additional features like middleware support and time-travel debugging. The choice between the two depends entirely on the specific needs of your application.