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...