const [value, setValue] = useState(1);

// ❌ 错误
return (
  <Provider value={{ count: value }}>
    <App />
  </Provider>
)

const [value, setValue] = useState(1);
const globalValue = useMemo(() => { return { count: value } }, [value]);

// ✅ 正确
return (
  <Provider value={global}>
    <App />
  </Provider>
)

const [value, setValue] = useState(1);
const globalValue = useMemo(() => {
  return { count: value, setCount: setValue }
}, [value]);

// ✅ 正确
return (
  <Provider value={global}>
    <App />
  </Provider>
)

import React from 'react';
import { atom, useAtom } from 'jotai';

const countAtom = atom(0);

export default function(props) {
  const [count, setCount] = useAtom(countAtom);

  return (
    <section>
      <h1>
        {count}
        <button onClick={() => setCount(c => c + 1)}>one up</button>
      </h1>
    </section>
  )
}

const doubledCountAtom = atom((get) => get(countAtom) * 2)

const count1 = atom(1)
const count2 = atom(2)
const count3 = atom(3)
const sum = atom((get) => get(count1) + get(count2) + get(count3))

const decrementCountAtom = atom(
  (get) => get(countAtom),
  (get, set, _arg) => set(countAtom, get(countAtom) - 1),
)

function Counter() {
  const [count, decrement] = useAtom(decrementCountAtom)
  return (
      <button onClick={decrement}>Decrease</button>
  )
}

import { useAtom } from 'jotai'
import { atomWithImmer } from 'jotai/immer'

const countAtom = atomWithImmer(0)

const Controls = () => {
  const [count, setCount] = useAtom(countAtom)
  // setCount === update : (draft: Draft<Value>) => void
  const inc = () => setCount((c) => (c = c + 1))
  return (
    <div>
      {count} <button onClick={inc}>+1</button>
    </div>
  )
}