Two providers in a React component

In React, when multiple Context Providers are used to pass values and they are nested within the component tree, the resolution of conflicts primarily depends on the nesting order of the Providers. The value provided by the innermost Provider will override the value of the outer, similarly named Provider.

For example, suppose we have two Contexts: ThemeContext and UserContext. We set up two ThemeContext.Provider instances, each with a different theme.

jsx
const ThemeContext = React.createContext();

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemeContext.Provider value="light">
        <Toolbar />
      </ThemeContext.Provider>
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>I am styled by theme context!</button>;
}

In this example, although the outer ThemeContext.Provider sets value="dark", the inner ThemeContext.Provider sets value="light", the ThemedButton component actually uses the value "light" because it is provided by the nearest Provider.

This behavior ensures that components always use the closest context value, which helps maintain logical consistency and predictability, especially in large applications where components may be enclosed within multiple nested Providers with different contexts. This approach also supports component reusability, as you can use the same component in different places but provide it with different behaviors based on its contextual environment.