What is Client State Management?

With modern NextJS we essentially have two distinct applications running from the same project.

We have the server side application running on our server and then multiple instances of client side applications running in the users browsers.

We already know patterns of managing server state e.g. with databases which we covered in a previous lesson.

However there is a lot of dynamic state on the client that is only relevant when people are interacting with our application in the browser. So now in this lesson we will look at patterns of managing this dynamic client side state.

Using the Power of React

The objective of client side state management is that we want to give each client application their own store to manage any cross component shared state. This store has to be contained in a client component and Reacts built in client component for storing and sharing any global value among a set of components is context.

Basically if we render a context higher up in the render tree:

// Provide Context
export default function Parent() {
  return (
    <Context.Provider>
      <Children />
    </Context.Provider>
  );
}

It automatically becomes available to any direct and indirect children:

// use Context
export function GreatGrandChild() {
  const store = use(Context);

  return <>...render → store.state ...on-events → store.actions()</>;
}

Context in Server Components

A question you might have at this point is how do you render the context in a server page and initialize the context store with some initial state from the server.

Well we know from our lessons on server vs client components, that we can render a client component on the server and even pass in server components as children:

export default async function ServerPage() {
  return (
    <>
      <ClientComponent>
        <ServerComponent />
      </ClientComponent>
    </>
  );
}

The context provider is nothing more than a simple client component, so it can be:

Rendered on the server
Wrap other server and client components
Can even be passed some initial state from the server

export default async function ServerPage() {
  const initialState = await loadData();
  return (
    <>
      <Context.Provider initial={initialState}>
        <ServerComponent />
      </Context.Provider>
    </>
  );
}

And then we will be able to use this store in any child client component:

'use client';

// ServerPage -> ... -> SomeDeepChild
export function SomeDeepChild() {
  const store = use(Context);

  return <>...render → store.state ...on-events → store.actions()</>;
}

Context for Sections of your Site

Rendering the context in a the page component is fine if you want to manage global state for a particular route, but what about entire sections or your site or even the whole site. Fortunately the answer lies in layout components.

We can render the provider at the at the root layout and this makes it available for all routes (/**/*):

/** `/layout.tsx` */
export default async function RootLayout({ children }: React.PropsWithChildren) {
  return (
    <html lang="en">
      <body>
        <Context.Provider>{children}</Context.Provider>
      </body>
    </html>
  );
}

Or render it in a layout specific to a sub-portion or our site e.g. /dashboard/**/*:

// `/dashboard/layout.tsx`
export default async function Layout({ children }) {
  return <Context.Provider>{children}</Context.Provider>;
}

Transcript