Explaining Scoped Context in React with example

React Context is a Global Variable

In Javascript, variables are scoped within function definitions.

Explaining Scoped Context in React with Examples

React Context is often described as a mechanism to manage global state, acting as a shared variable accessible across a React component tree. While this description is accurate, it oversimplifies the capabilities of Context. In this article, we’ll dive into how to scope Context effectively, ensuring that it is used only where needed and avoids unnecessary re-renders.

What is React Context?

React Context provides a way to pass data through the component tree without having to pass props manually at every level. It’s created using React.createContext and consists of a Provider and Consumer pair. A Provider component supplies the value, and any component wrapped with the Consumer or the useContext hook can access it.

Here’s a basic example:

import React, { createContext, useContext } from "react";

const ThemeContext = createContext("light");

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

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

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button>{`Theme: ${theme}`}</button>;
}

export default App;

In this example, ThemedButton can access the theme value provided by ThemeContext.Provider without explicitly passing props through Toolbar.

Why Scoped Context?

While Context is powerful, using it indiscriminately can lead to performance issues. When the value provided by a Context.Provider changes, all components consuming that context will re-render. In complex applications, this can cause unnecessary re-renders of unrelated components.

Scoped Context refers to the practice of limiting the usage of Context to only the parts of the component tree that actually need it. This approach helps maintain performance and keeps the component structure clean and understandable.

Challenges in Compound Components

Consider scenarios involving compound components, such as those provided by libraries like Radix Primitives. These components often use Context internally to manage state and interactions. However, issues can arise when similar components are composed together, leading to context collisions.

Example with Radix Primitives

Radix Primitives provides highly composable APIs for building accessible components. Here’s an example:

<AlertDialog.Root>
  <Dialog.Root>
    <Dialog.Trigger />
    <Dialog.Content>
      <AlertDialog.Trigger /> {/* note the alert trigger in dialog content */}
    </Dialog.Content>
  </Dialog.Root>

  <AlertDialog.Content />
</AlertDialog.Root>

An issue arises here because AlertDialog is a composition of Dialog with additional functionality to meet AlertDialog requirements. This means AlertDialog.Root is also a Dialog.Root, so it provides both DialogContext and AlertDialogContext.

In this setup, the AlertDialog.Trigger (which is also a Dialog.Trigger) might retrieve the wrong context via useContext(DialogContext), ending up with the context from Dialog.Root instead of AlertDialog.Root. As a result, clicking the AlertDialog.Trigger could toggle the Dialog.Content rather than behaving as intended.

Scoped Context Solution

To prevent such issues, Radix Primitives uses scoped context. Scoped context ensures that AlertDialog.Trigger only interacts with AlertDialog parts and does not accidentally retrieve context from a similarly composed component. This is achieved by creating a new context internally and passing it to the Dialog component through a custom prop, such as __scopeDialog. The Dialog component then uses this scoped context in its useContext calls, ensuring isolation.

Source code from radix ui github repo:

https://github.com/radix-ui/primitives/blob/dae8ef4920b45f736e2574abf23676efab103645/packages/react/dialog/src/Dialog.tsx#L69

Here’s an abstraction of how scoped contexts work in Radix UI:

1. Scope Creation: A createScope utility generates a unique namespace for each component or compound component. This ensures that each set of contexts is isolated and doesn’t conflict with others.
   

   import { createScope } from '@radix-ui/react-context';
   
   const [createDialogContext, useDialogScope] = createScope('Dialog');
   

2. Scoped Providers: When creating contexts, they are tied to the scope. This binds the provider and consumer to the same namespace.
   

    const DialogContext = createDialogContext('DialogContext');
   

3. Consumer Isolation: Scoped hooks, like useDialogScope, ensure that consumers access only the context from their intended scope.
   

   const useDialogContext = (scope) => useContext(DialogContext, useDialogScope(scope));
   

Benefits of Scoped Context

• Context Collisions Prevention: By scoping contexts, components like AlertDialog.Trigger can always find their associated context (AlertDialogContext), even when nested inside other contexts.

• Flexible Composition: Scoped contexts enable flexible and safe composition of components, ensuring that interactions remain predictable.

• Reusability: Developers can reuse generic components (e.g., Dialog.Trigger) across different scopes without modifications.

How It Applies to the Example

In your example:

• The AlertDialog.Root creates a scoped AlertDialogContext that encapsulates its state and interactions.

• Nested Dialog.Root and AlertDialog.Trigger coexist without conflicts because each references its respective scoped context.

• This design pattern is a key feature of Radix UI, ensuring that complex component hierarchies work seamlessly without unintended behavior.

References:

1. https://dev.to/romaintrotard/use-context-selector-demystified-4f8e

2. https://github.com/radix-ui/primitives

3. https://react.dev/reference/react/createContext