Global vs Scoped Store in Zustand for Multiple Component Instances in Next.js 14: Which Approach is Better?

[ironexdev]

Use-case

Handle UI state for multiple instances of the same component within one request (on one page) in Next.js (14 with App Router)

• While also avoiding prop-drilling, component composition, and using plain React Context.

I have prepared a demo that showcases two approaches to handling this use-case:

1/ Global Store

The first solution utilizes a global store (specifically, a slice). The store is provided globally (per request) to the entire app via a React Context/Provider placed in the Root Layout. It handles multiple instances of the state by using unique IDs.

export const createImageSlice: StateCreator<ImageSliceType> = (
  set,
  get,
  store,
) => ({
  imagesSlice: {
    images: {},
    actions: {
      setRotation: (id: string, rotation: number) => {
        set((state) => ({
          imagesSlice: {
            ...state.imagesSlice,
            images: {
              ...state.imagesSlice.images,
              [id]: {
                ...state.imagesSlice.images[id],
                rotation,
              },
            },
            actions: state.imagesSlice.actions,
          },
        }))
      },
      setGrayscale: (id: string, grayscale: boolean) => {
        set((state) => ({
          imagesSlice: {
            ...state.imagesSlice,
            images: {
              ...state.imagesSlice.images,
              [id]: {
                ...state.imagesSlice.images[id],
                grayscale,
              },
            },
            actions: state.imagesSlice.actions,
          },
        }))
      },
    },
  },
})

2/ Scoped Store

The second solution uses a scoped store. The store is provided locally via a React Context/Provider that wraps the components using it. It handles multiple instances of the state by providing a new instance of React Context for each wrapped component.

export function createImageStore() {
  return createStore<ImageStoreType>()((set) => ({
    rotation: 0,
    grayscale: false,
    actions: {
      setRotation: (rotation: number) => {
        set({ rotation })
      },
      setGrayscale: (grayscale: boolean) => {
        set({ grayscale })
      },
    },
  }))
}

Question

In both solutions - the global store with IDs and the scoped store - re-rendering behaves the same way: only the images that are modified are re-rendered when the rotation or grayscale actions are triggered (as shown in the attached GIFs). Is one of these approaches objectively better or recommended for handling this use case? Are there any issues with either approach that might not be immediately apparent?

Repository

• https://github.com/ironexdev/next-zustand-playground

Sandbox

• https://stackblitz.com/~/github.com/ironexdev/next-zustand-playground

Re-rendering Preview
_{React Devtools in Google Chrome with enabled "Highlight updates when components render"}

Global	Scoped

|

[dbritto-dev]

@ironexdev I encourage you to read our "nextjs" and "ssr and hydration" guides, but in a nutshel we do not recommend global stores in Nextjs. If you use create then is a global store if you use createStore + Context API + useStore then is a scoped store. The usage of create + Context API is not recommended. Actually, we do not recommend sharing hooks through Context API you should always use createStore + Context API + useStore to share the store instead of the hook and use the store with useStore hook

[dbritto-dev]

They should behave the same but the one at page level only exists on that page and is totally fine

[dbritto-dev]

BTW, we talked about that in our nextjs guide too

[ironexdev]

I basically described App Scoped Store as Global and Page Scoped Store as Scoped. And I get that it does not correlate with the guide, that defines Global Store as shared between requests. Other than that, both examples in the demo are following recommendations in the guide. Both stores are created per-request and state is not written nor read in RSC.

However, the first one - the App Scoped Store - takes a different approach to managing multiple instances of the same state.

App Scoped Store: This approach utilizes a single, shared store accessible throughout the entire application. It manages multiple instances of the same state by assigning unique IDs to each instance. This means you don't need multiple context providers, as all components can interact with the store directly.

function renderImages(images: ImageType[]) {
  return images.map((image) => renderImage(image))
}

function renderImage(image: ImageType) {
  return (
    <div className="flex w-[300px] justify-between" key={image.src}>
      <Controls id={image.src} />
      <MyImage image={image} />
    </div>
  )
}

Page Scoped Store: This method involves creating separate store instances for different parts of your app. Each component or set of components that requires access to the state is wrapped in its own instance of a Context Provider. This results in state isolation, as each store instance manages its own state independently of others. This approach is what you recommend in the guide if I understand it correctly.

function renderImages(images: ImageType[]) {
  return images.map((image) => renderImage(image))
}

function renderImage(image: ImageType) {
  return (
    <div className="flex w-[300px] justify-between" key={image.src}>
      <ImageStoreProvider>
        <Controls />
        <MyImage image={image} />
      </ImageStoreProvider>
    </div>
  )
}

And that's what I'm curious about. Is the App Scoped Store approach better or worse for the use case? Are there any issues with either approach that might not be immediately apparent?

[dbritto-dev]

@ironexdev may this is helpful -> https://zustand.docs.pmnd.rs/hooks/use-store

btw, either approach is good App Scope Store and Page Scope Store are recommended shouldn't be any difference as far as I know

[dbritto-dev]

On useStore docs we talked about global stores, dynamic global stores, scoped stores and dynamic scoped stores

[ironexdev]

thank you