useDocumentation - useState callback

anthonyhumphreys

Anthony Humphreys

Posted on May 15, 2020

useDocumentation - useState callback

useDocumentation

Setting the scene

Between talks at React Europe Conference I was working on a chat interface in React Native, backed by Amazon Lex. I encountered a fun bug, where the message typed by the user was rendering very briefly, only to be mysteriously whisked away again when the response came back from Lex and the message was supposedly appended to the array of sent and received messages.

GIF showing the broken behaviour

The broken code

const appendMessage = ({ message, from }) => {
  setMessages([...messages, { message, from }]);
  if (from === "me") {
    sendToLex(message);
  }
};
Enter fullscreen mode Exit fullscreen mode

For a little context - this function takes an object which contains a message and the sender (either 'me', or 'bot'). If from is set to me then the message is sent to Lex as well as being set in the component's state.

The fix

Okay, so first thing is to actually read the documentation. That doesn't mean opening it and scrolling for a bit, but actually reading it. If I'd done this, i'd have spotted:

Functional updates
If the new state is computed using the previous state, you can pass a function to setState. The function will receive the previous value, and return an updated value. Here’s an example of a counter component that uses both forms of setState:

Ah. So by simply changing

setMessages([...messages, { message, from }]);
Enter fullscreen mode Exit fullscreen mode

to

setMessages(oldMessages => [...oldMessages, { message, from }]);
Enter fullscreen mode Exit fullscreen mode

This now works, producing the following behaviour

GIF showing the working behaviour

That's all there is to it. This is analagous to the 'old' way of setting state using:

this.setState(oldState => ({ value: oldState.value }));
Enter fullscreen mode Exit fullscreen mode

...which I should've really thought about when writing the function in the first place!

TL;DR

RTFM XKCD Web Comic

💖 💪 🙅 🚩
anthonyhumphreys
Anthony Humphreys

Posted on May 15, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related