How to implement "selected/active" item state correctly?

[VictorAtPL]

I have a classic problem of elements in a list which should be selectable.

If I had to implement it in a View/FlatList, that how I'd do that:
https://snack.expo.dev/@pixelthedog/flashlist-and-checkbox-in-item---modify-data-via-function-v-1

In FlashList, it's very slow both on iOS and Android. If I understand correctly, it's because of the fact that when I invoke setChecked function then the state is changed and the whole component reloaded.

How should I keep the state of selected items then? I know I can keep state inside item (with help of useState and useRef) and it's pretty fast, but how do I maintain the state of all checked items globally?

Here is what I tried to implement with in-item useRef/useState approach:
https://snack.expo.dev/@pixelthedog/flashlist-and-checkbox-in-item---modify-data-via-function-v-2

With this approach I can access the state outside items and it works medium-fast in Snacks, but slow in a real-world app.

Is there any way I could improve this code? With useCallback, useMemo? By getting rid of some state?

Current behavior:

actual.mp4

Semi-expected behavior (works smoothly if I delete toggleGlobalChecked(item);, but with no state so items are not re-selected when scrolling):

without_state.mp4

[ser-emejia]

Hello @VictorAtPL, I'm facing a similiar issue, did you find a solution?

[Iltimirov]

Wrap setChecked func into useCallback and your Card component to React.memo