Cannot rewrite the title as it is already explicit and clear

Question

I'm using Flashlist in React Native and I'm using the useCallback hook in my renderItem function. In my component I have a state (an array) called todos and when I log todos.length I only get the initial state value 0. Why is this happening and how do I fix it?

export default function MyComponent() {
  // Some code has been omitted for brevity.
  const [todos, setTodos] = useState<string[]>([]);
  const renderItem = useCallback(
    ({ item }: ListRenderItemInfo<Todo>) => (
      <TouchableOpacity
        style={{ height: 50 }}
        onPress={() => {
          console.log(todos.length); // Always log 0.
          if (todos.length >= 10) return;
          setTodos((curr) => [item.name, ...curr]);
        }}
      >
        <Heading color={"black"}>{item.name}</Heading>
      </TouchableOpacity>
    ),
    []
  );

  return (
    <FlashList<Todo>
      data={data?.todos as Todo[]}
      estimatedItemSize={50}
      renderItem={renderItem}
      keyExtractor={(_, idx) => idx.toString()}
    />
  );
}

Note: I tried passing both todos and todos.length as dependencies to useCallback but the result was the same of.

Happy to answer any questions.

Answer 1

const [todos, setTodos] = useState<string[]>([]);

and

const renderItem = useCallback(
  () => {
    //todo's here is a closure, it will not update
    //a dependency of [] means, just run once.
  },
  []
);

This is a common problem because it's not obvious. Because this happens often, setState has a callback version. In your code you are actually using it to set the state, but you also need to use it to get the current state for a maximum of 10 checks.

So a simple solution is to put the length check in the callback function of useState.

setTodos((curr) => curr.length >= 10 ? curr : [item.name, ...curr]);

In the above code, if the current length is greater than or equal to 10, only the current status is returned, otherwise a new item is added.

Another option, of course, is to add todos to useCallback's state, but why this doesn't work in FlashList, not sure.

A better option is to extract Item as another child component. There are other benefits to doing this, such as more composability, code sharing, and most importantly, performance.