React hooks with useState

Question

I've got the following code:

export default function App() {
    const [lastMessageId, setLastMessageId] = useState(0);
    const [messages, setMessages] = useState([]);

    const addMessage = (body, type) => {
        const newMessage = {
            id: lastMessageId + 1,
            type: type,
            body: body,
        };
        setLastMessageId(newMessage.id)
        setMessages([...messages, newMessage]);
        console.log("point 1", messages);
        return newMessage.id;
    }

    // remove a message with id
    const removeMessage = (id) => {
        const filter = messages.filter(m => m.id !== id);
        console.log("point 2", filter);
        setMessages(filter);
    }

    // add a new message and then remove it after some seconds
    const addMessageWithTimer = (body, type="is-primary", seconds=5) => {
        const id = addMessage(body, type);
        setTimeout(() => removeMessage(id), seconds*1000);
    };

    return (
        ...
    );
}

I would like to know why after I setMessages at point 1, when I do console log it doesn't appear to be updated. This turns into a weird behaviour when I call addMessageWithTimer because when it calls removeMessage then it doesn't remove correctly the messages that I expect.

Could you please explain me how to do it?

because `useState` is async function. Move your `console.log` outside — demkovych, Aug 06 '20 at 15:09

score 2 · Answer 1 · answered Aug 06 '20 at 15:13

Just like setState in class-components, the update functions of useState don't immediately update state, they schedule state to be updated.

When you call setMessages it causes react to schedule a new render of App which will execute the App function again, and useState will return the new value of messages.

And if you think about it from a pure JS perspective, messages can't change: it's just a local variable, (a const one, even). Calling a non-local function can't cause a local variable's value to change, JS just doesn't work that way.

score 0 · Answer 2 · answered Aug 06 '20 at 15:21

@Retsam is correct in his explanation.

I think you would get an issue if you don't use setTimeout in addMessageWithTimer. Isn't it? But for now, it is correct.

If you don't want to give a timer of 5 seconds and still want to keep it running correctly, then give a timer of 0 seconds. It would still work okay.

score 0 · Answer 3 · answered Aug 06 '20 at 17:05

what weird behavior your seeing?
when I tried your code, I'm able to remove the added message after 5 sec.

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  let bodyText = "";
  const [lastMessageId, setLastMessageId] = useState(0);
  const [messages, setMessages] = useState([]);

  const addMessage = (body, type) => {
    if (body === "") return;
    const newMessage = {
      id: lastMessageId + 1,
      type: type,
      body: body
    };
    setLastMessageId(newMessage.id);
    setMessages([...messages, newMessage]);
    bodyText = "";
    return newMessage.id;
  };

  // remove a message with id
  const removeMessage = (id) => {
    const filter = messages.filter((m) => m.id !== id);
    console.log("point 2", filter);
    setMessages(filter);
  };

  // add a new message and then remove it after some seconds
  const addMessageWithTimer = (body, type = "is-primary", seconds = 5) => {
    const id = addMessage(body, type);
    setTimeout(() => removeMessage(id), seconds * 1000);
  };
  console.log("point 1", messages);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <input onChange={(e) => (bodyText = e.target.value)} />
      <button onClick={(e) => addMessage(bodyText, "is-primary")}>
        Add messsage
      </button>
      <button onClick={(e) => addMessageWithTimer(bodyText, "is-primary", 5)}>
        Add temp messsage
      </button>
      {messages.map((message, id) => {
        return (
          <div key={id}>
            <p>
              {message.id} {message.body}
            </p>
          </div>
        );
      })}
    </div>
  );
}

If I add two messages before 5 seconds, when the trigger of the timeout makes the deletion it deletes all, and when the second triggers it appears the first one. — Pere, Aug 06 '20 at 17:13

score 0 · Accepted Answer · answered Aug 06 '20 at 17:40

@Retsam was very useful with his answer as I was able to understand the problem and find a proper solution.

here is the solution that I've found:

export default function App() {
    const [lastMessageId, setLastMessageId] = useState(0);
    const [messages, setMessages] = useState([]);

    const addMessage = (body, type="is-primary") => {
        const newMessage = {
            id: lastMessageId + 1,
            type: type,
            body: body
        };
        setLastMessageId(newMessage.id)
        setMessages([...messages, newMessage]);
        return newMessage.id;
    }

    // delete messages after 5 seconds
    useEffect(() => {
        if (!messages.length) return;
        const timer = setTimeout(() => {
            const remainingMessages = [...messages];
            remainingMessages.shift();
            setMessages(remainingMessages);
        }, 5*1000);
        return () => clearTimeout(timer);
    }, [messages]);

    return (
         ...
    );
}

React hooks with useState

4 Answers4

Linked