DEV Community

VTeacher
VTeacher

Posted on

Show: A state management library for React Server Components (RSC) on Next.js 13

Show HN:
https://news.ycombinator.com/item?id=35724597

A state management library for React Server Components (RSC) on Next.js 13. A new invention to replace Recoil. This state can be read from any Server-component, and updates will result in a re-render of all components.

nrstate

State for React Server Components (RSC) on Next.js

N: Next.js

R: React Server Components

State

Features

✨ Next.js 13 support, for RSC

  • Read/Write state also works on Client-component.
  • Read state also works on Server-component.

Quick start

npm i nrstate
Enter fullscreen mode Exit fullscreen mode
npm i nrstate-client
Enter fullscreen mode Exit fullscreen mode

You can play with the example code here.

https://github.com/vteacher-online/nrstate-demo

Server and Client Components Observation

Implement persistence, read or write by observing all state changes across your page, without impairing code-splitting.

PageState

A PageState represents a state of Page-component.

  • Client-component

    PageState can be read and write from any Client-component.

  • Server-component

    PageState can be read from any Server-component.

ex.
Demo

  • PageStateDemo.tsx
export const pathDemo = '/demo';

export type PageStateDemo = {
  a: string;
  d: string;
};

export const initialPageStateDemo = { a: '', d: 'asc' } as PageStateDemo;
Enter fullscreen mode Exit fullscreen mode

PageStateProvider

Components that use nrstate need <PageStateProvider> to appear somewhere in the parent tree. A good place to put this is in your root component.

Make the "page" Server-component.

( Do not write "use client" )

  • page.tsx
export default function Page() {
  return (
    <PageStateProvider
      current={currentPageState<PageStateDemo>(
        initialPageStateDemo,
        pathDemo,
      )}
    >
      <></>
    </PageStateProvider>
  );
}
Enter fullscreen mode Exit fullscreen mode

Read PageState

  • Client component
'use client';
Enter fullscreen mode Exit fullscreen mode
export default function ClientComponent() {
  const [pageState, setPageState] = usePageState<PageStateDemo>();
  const { a, d } = pageState;

  return (
    <>
      a={a}, d={d}
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode
  • Server component
export default async function ServerComponent() {
  const pageState = getPageState<PageStateDemo>(initialPageStateDemo, pathDemo);
  const { a, d } = pageState;

  return (
    <>
      a={a}, d={d}
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

Write PageState

Client-component can use this.
PageState updates will result in a re-render of all components subscribed to that Page-component.

'use client';
Enter fullscreen mode Exit fullscreen mode
export default function ClientComponentInput() {
  const [pageState, setPageState] = usePageState<PageStateDemo>();
  const { a } = pageState;
  return (
    <input type="text" onChange={(e) => {
      setPageState({
          ...pageState,
          a: e.target.value,
        }, pathDemo);
      }}
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

useState and usePageState can be used together.

You can play with the example code here.

https://github.com/vteacher-online/nrstate-demo

Then, http://localhost:3000/

Top comments (1)

Collapse
 
theklr profile image
Kevin R • Edited

Nice idea. What was the choice to use a remote DB and not regulate to the browser DB?