State Scope with Providers - Next.js with Jotai

In the React state management, Jotai emerges as a minimalist and modern library, offering an elegant solution to handle atom-based state with simplicity and precision. This article delves into the practical use of Jotai to create isolated state scopes within a React application, utilizing the concept of Providers. We'll explore how to structure components for shared or independent state management, walking through a hands-on example that illustrates the power and flexibility of Jotai in a React project.

Isolating Component States with Jotai Providers

When building complex applications in React, it's common to encounter scenarios where components need to share state or maintain their own independent state. Jotai, a state management library, provides a straightforward and efficient way to handle these requirements. Let's look at a practical example to understand how Jotai achieves this with its Provider pattern.

In the code snippet below, we have aSharedComponentthat is utilized multiple times within two separate contexts created byProvider.

// page.tsximport Provider from './path-to-provider'; // Ensure to import the Provider from its fileimport SharedComponent from './shared-component'; // Ensure to import SharedComponentconst Page = () => {  return (    <div>      <Provider>        <SharedComponent /> {/* C1 */}        <SharedComponent /> {/* C2 */}      </Provider>      <Provider>        <SharedComponent /> {/* C3 */}        <SharedComponent /> {/* C4 */}      </Provider>    </div>  );};export default Page;

EachProviderin the code above creates a unique context for state management. Consequently,SharedComponentinstances within the sameProvidershare a common state, while those under differentProviderinstances maintain their own state, isolated from others.

Here's howSharedComponentconnects to the state using Jotai:

// shared-component.tsximport { atom, useAtom } from 'jotai';const countAtom = atom(0); // This atom holds the state for our componentconst SharedComponent = () => {  const [count, setCount] = useAtom(countAtom); // This hook connects our component to the atom's state  return (    <div>      Shared component      <div>{count}</div>      <button onClick={() => setCount((prevCount) => prevCount + 1)}>        +1      </button>    </div>  );};export default SharedComponent;

Clicking the "+1" button in any instance ofSharedComponent(C1, C2, C3, C4) will result in:

• Simultaneous increment of count in C1 and C2, as they share the same state within a singleProvider.
• Simultaneous increment of count in C3 and C4 for the same reason.
• Independent state changes between C1/C2 and C3/C4 due to the distinctProviderwrapping, creating isolated states.

This example demonstrates the use ofProviderto create separate "contexts" or "scopes" of state within a React application, facilitating both shared and independent state management across the component hierarchy.

Structuring Shared and Isolated States with Jotai

In this section, we'll further explore how to share or isolate state between components in a React application using Jotai atoms and Providers.

We begin by declaring a shared atom in a separate file:

// atoms.ts"use client";import { atom } from 'jotai';export const sharedCountAtom = atom<number>(0);

By exporting thesharedCountAtom, we make it available to any component that needs to tap into this shared state.

The main page's component structure is as follows:

// page.tsximport { Provider } from 'jotai';import ComponentC from './ComponentC';import ComponentD from './ComponentD';const Page = () => {  return (    <div>      <Provider>        <ComponentC /> {/* Component C1 */}        <ComponentD /> {/* Component D1 */}      </Provider>      <ComponentC /> {/* Component C2 */}      <ComponentD /> {/* Component D2 */}    </div>  );};export default Page;

ComponentCandComponentDare functionally identical and use thesharedCountAtomfor state management. The context in which they are rendered, inside or outside aProvider, determines their state sharing behavior:

• ComponentC1andComponentD1inside aProvidershare the same atom state.
• ComponentC2andComponentD2outside aProvidershare a different instance of the atom state, isolated fromComponentC1andComponentD1.

Here are the component implementations:

// ComponentC.tsx"use client";import { useAtom } from 'jotai';import { sharedCountAtom } from './atoms';const ComponentC = () => {  const [count, setCount] = useAtom(sharedCountAtom);  return (    <div className='border-2 w-60 h-60'>      Component C      <div>Count: {count}</div>      <button        className="border-1 border-black bg-blue-300 text-white hover:bg-yellow-200 p-3"        onClick={() => setCount((prev) => prev + 1)}      >        +1      </button>    </div>  );};export default ComponentC;

// ComponentD.tsx"use client";import { useAtom } from 'jotai';import { sharedCountAtom } from './atoms';const ComponentD = () => {  const [count, setCount] = useAtom(sharedCountAtom);  return (    <div className='border-2 w-60 h-60'>      Component D      <div>Count: {count}</div>      <button        className="border-1 border-black bg-blue-300 text-white hover:bg-yellow-200 p-3"        onClick={() => setCount((prev) => prev + 1)}      >        +1      </button>    </div>  );};export default ComponentD;

Note: It is crucial to include the directive "use client" in all components to ensure proper client-side state management, preventing potential issues.

In summary,ComponentCandComponentDmay import the same atom fromatoms.ts, but their state sharing is controlled by the use ofProvider. This setup exhibits the adaptability of Jotai in managing state across various scopes within a React application.

Conclusion

The React ecosystem offers various approaches to state management, each with its own set of trade-offs. Jotai, with its minimalist and atom-based approach, provides a powerful yet simple solution for developers to control state scope within their applications. By leveraging Providers, developers can easily create shared or isolated state contexts, ensuring that components behave predictably and maintain clean separation of concerns. As we've seen in the examples above, Jotai's flexibility and ease of use make it an excellent choice for React developers looking to streamline their state management practices.

Reference:

The first example is inspired from this article - # Jotai V2 Notes 02 Store & Provider