React native Hooks not updating

Question

I am updating a state using useState hooks in react native

<Bubble
      {...props}
      onLongPress={() => {
        console.warn('pressed');
        setShowReactions(!showReactions);
        setSelectedMessage(props.currentMessage.text);
      }}
      renderTime={renderTime}
    />

When I use setShowReactions alone, everything works fine. However, when I introduce the setSelectedMessage hook, setShowReactions stops working. What do you think is the reason for this? I need to use both hooks to meet my requirements.

Answer 1

State updates in react native are asynchronous. States updates are batched for performance reasons. To ensure state updates, you can use the functional form of setState, which allows you to access the previous state.

Just replace

setShowReactions(!showReactions);

with

setShowReactions(prevShowReactions => !prevShowReactions);