Understanding Jotai

To understand the Jotai application programming interface (API), let's remind ourselves of a simple counter example and the solution with Context.

Here is an example with two separate counters:

const Counter1 = () => {
  const [count, setCount] = useState(0); // [1]
  const inc = () => setCount((c) => c + 1);
  return <>{count} <button onClick={inc}>+1</button></>;
};
const Counter2 = () => {
  const [count, setCount] = useState(0);
  const inc = () => setCount((c) => c + 1);
  return <>{count} <button onClick={inc}>+1</button></>;
};
const App = () => (
  <>
    <div><Counter1 /></div>
    <div><Counter2 /></div>
  </>
);

Because these Counter1 and Counter2 components have their own local states, the numbers shown...