Docs CodeSandBox: Give explicit type to atom when used with useUpdateAtom

In this CodeSandBox about useUpdateAtom, the setCount function has a TypeScript error, which arises due to TypeScript making a literal type from the 0 provided in the atom(0).

I am not sure if this type of inference for numbers is by design or a bug in TypeScript.

But having this error in a Docs Sandbox can make the first time onlooker feel like this isn’t ready, so I suggest the atom(0) be converted to atom<number>(0)

The final code is:

import * as React from "react";
import { useRef } from "react";
import "./styles.css";
import { Provider, atom, useAtom } from "jotai";
import { useUpdateAtom } from "jotai/utils";

const countAtom = atom(0);

const Counter = () => {
  const [count] = useAtom(countAtom);
  return (
    <div>
      count: {count}
      (rendered: {++useRef(0).current})
    </div>
  );
};

const Controls = () => {
  const setCount = useUpdateAtom(countAtom);
  const inc = () => setCount((c) => c + 1);
  return (
    <div>
      <button onClick={inc}>+1</button>
      (rendered: {++useRef(0).current})
    </div>
  );
};

export default function App() {
  return (
    <Provider>
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <Counter />
        <Controls />
      </div>
    </Provider>
  );
}

[dai-shi]

So, it was sort of a doc issue. Thanks for reporting!

[PuruVJ]

Yeah, updating Jotai in Sandbox fixed it, the ones in docs have a weird version like cs:[hash] or something, had to click on Update deps button to fix