How to use unique identifier in key prop when mapping splitAtom ?

[smontlouis]

I'm using splitAtom to handle tabs reordering, adding and removing.

const tabsAtom = atom<TabItem[]>([
  { id, type, data, ....},
  { id, type, data, ....},
  { id, type, data, ....},
])

const tabsAtomsAtom = splitAtom(tabsAtom)

// in component
const [tabsAtoms, dispatch] = useAtom(tabsAtomsAtom)

<ScrollView>
  {tabsAtoms.map(
    (tabAtom, i) =>
        <TabPreview
          key={i}
          index={i}
          tabAtom={tabAtom}
          tapGestureRef={tapGestureRefs[i]}
          simultaneousHandlers={scrollViewRef}
          onPress={onItemPress}
          onDelete={onDeleteItem}
        />
  )}
</ScrollView>

I'm using reanimated to animate entering / exiting animations, but it fail to work properly.
I believe this is due to the fact I'm using i as key.

Is there any way to use an atom unique identifier ?

[dai-shi]

That's what keyExtractor is for.

const tabsAtomsAtom = splitAtom(tabsAtom, item => item.id)

  {tabsAtoms.map(
    (tabAtom, i) =>
        <TabPreview
          key={`${tabAtom}`}

[smontlouis]

I need "xxx" and "ccc" as key for my component, but I have "atom15, atom16".

What is the purpose of the keyExtractor then ?

edit: nvm I understand the purpose of keyExtractor, and it's working !
I thought there would some visual change also.

Thank you !

[dai-shi]

Yeah, it will re-use the atom object based on "keys".

If you are interested, I would appreciate very much if you could improve the doc as you seem to understand how things work in the specific use case.

[smontlouis]

Not a native speaker, but will try my best ;)

[saoudi-h]

Great! That helped, but unfortunately, this is not in the doc. I might be wrong

[dai-shi]

Will you send a PR please?