Atoms value becomes `undefined` after using React.useCallback in useSelector (with atomFamily)

Hey,

This is quite elaborate, but I havent managed to make a smaller example.

Buggy code is here: https://github.com/merisbahti/jotai-optics/blob/meris/clean-arrayfamily/example/index.tsx

To run it, just clone the repo and cd example; yarn start.

The problem appears when removing a field in the form (using the X button), then adding a new field… This resutls in an exception where the value of the atom is undefined!

issue seems to be with useAtomArrayFamily, lines here: https://github.com/merisbahti/jotai-optics/blob/meris/clean-arrayfamily/src/index.ts#L92-L103

With the useCallback the bug appears:

   // other from useAtomArrayFamily truncated
  return useSelector(
    atom,
    React.useCallback(
      elements => {
        const length = elements.length
        return Array.from(new Array(length)).map(
          (_, key) => [atomFamilyGetter(key), () => removeItem(key)] as const,
        )
      },
      [atomFamilyGetter, removeItem],
    ),
  )

but without the React.useCallback, the bug doesnt appear.

[merisbahti]

Actually, dai-shi, it seems like the error is in my side,

I actually took the time to implement the bug in my library on this branch: https://github.com/merisbahti/klyva/tree/meris/klyva-next

So I’ll spend some time to figure out what I’m doing wrong, thanks for your help.

I’ll try and keep this issue posted as I find out more, but you can close it if you want. (I’ll still write here even if its closed)

[merisbahti]

currently at work but will check when finished.