atomFamily missing Typescript types for function setter

With regular atoms, we can have function setters. It works great and the Typescript types are working:

const updateAtom = useUpdateAtom(atomConfig)
...
updateAtom(prevValue => !prevValue);

The same functionality works with atomFamily, but the Typescript types for the function setter seem to be missing and we get “Argument of type () => … is not assignable to parameter of type …”. Here’s a full example:

import { atom, PrimitiveAtom } from "jotai";
import { atomFamily, useAtomValue, useUpdateAtom } from "jotai/utils";
import { useCallback } from "react";

const myAtomFamily = atomFamily<string, boolean | null, boolean | null>(
  () => atom<boolean | null>(false)
);

export default function App() {
  const atomValue = useAtomValue(myAtomFamily("meow"));
  const updateAtom = useUpdateAtom(myAtomFamily("meow"));

  const toggle = useCallback(() => {
    updateAtom((x) => !x);
  }, [updateAtom]);

  return (
    <div className="App">
      <button onClick={toggle}>Toggle</button>
      <p>Is on?: {atomValue ? "YES" : "NO"}</p>
    </div>
  );
}

Here’s a screenshot of the TypeScript error:

[dai-shi]

@ahfarmer Thanks for the repro!

Here is the fix:

const myAtomFamily = atomFamily(() =>
  atom<boolean>(false)
);

Please give it a try.

If you want to explicitly annotate it, try this:

const myAtomFamily = atomFamily<string, boolean, SetStateAction<boolean>>(() =  >
  atom<boolean>(false)                                                        
);                                                                            

[ahfarmer]

Ahhh, wonderful. Thank you! I’ll go ahead and close this then.