PaulieScanlon

// src/components/primitive-toggle-local-storage.tsx

'use client';

import { useAtom } from 'jotai';
import { darkModeAtom } from '../state';

export const PrimitiveToggleLocalStorage = () => {
  const [darkMode, setDarkMode] = useAtom(darkModeAtom);

PaulieScanlon

// src/state/index.ts

import { atom } from 'jotai';
+ import { atomWithStorage } from 'jotai/utils';

export const countAtom = atom(0);

export const objectAtom = atom({
  foo: 'bar',
  test: true,

PaulieScanlon

// src/layouts/_layout.tsx

import { Provider } from 'jotai';

type Props = {
  children: React.ReactNode;
};

const RootLayout: React.FunctionComponent<Props> = async ({ children }) => {
  return (

PaulieScanlon

// src/components/server-read-only-component.tsx

'use client';

import { useAtom } from 'jotai';
import { useHydrateAtoms } from 'jotai/utils';
import { userAtom } from '../state';

type Props = {
  userData: {

PaulieScanlon

// src/pages/default-page.tsx

import { ServerReadOnlyComponent } from '../components/server-read-only-component';

const Page = async () => {
  const userData = await getServerData();

  return (
    <main>
      <ServerReadOnlyComponent userData={userData} />

PaulieScanlon

// src/state/index.ts

import { atom } from 'jotai';

export const countAtom = atom(0);

export const objectAtom = atom({
  foo: 'bar',
  test: true,
});

PaulieScanlon

// src/components/object-read-write-component.tsx

'use client';

import { useAtom } from 'jotai';
import { objectAtom } from '../state';

export const ObjectReadWriteComponent = () => {
  const [obj, setObj] = useAtom(objectAtom);

PaulieScanlon

// src/state/index.ts

import { atom } from 'jotai';

export const countAtom = atom(0);

+ export const objectAtom = atom({
+   foo: 'bar',
+   test: true,
+ });

PaulieScanlon

// src/components/primitive-read-write-component.tsx

'use client';

import { useAtom } from 'jotai';
import { countAtom } from '../state';

export const ReadWriteComponent = () => {
  const [count, setCount] = useAtom(countAtom);

PaulieScanlon

// src/components/primitive-read-only-component.tsx

'use client';

import { useAtom } from 'jotai';
import { countAtom } from '../state';

export const ReadOnlyComponent = () => {
  const [count] = useAtom(countAtom);