How to create delayed effect with setTimeout and useEffect? - reactjs

Question

Ref: https://stackblitz.com/edit/react-ts-8ykcuf?file=index.tsx
I created a small example to replicate the issue I am facing.
I am trying to create a delayed effect with setTimeout inside useEffect. I can see from console.log that setTimeout has already triggered and I expect the DOM to be updated, but actually the DOM is not rendered until the next human interaction.
The side effect in the sample example is to simulate a bot appending new message after user has entered a new message.
import React, { useEffect, useState } from 'react';
import { render } from 'react-dom';
interface Chat {
messages: string[];
poster: string;
}
const App = () => {
const [activeChat, setActiveChat] = useState<Chat>({
poster: 'Adam',
messages: ['one', 'two', 'three'],
});
const [message, setMessage] = useState('');
const [isBotChat, setIsBotChat] = useState(false);
useEffect(() => {
if (isBotChat) {
setIsBotChat(false);
setTimeout(() => {
activeChat.messages.push('dsadsadsada');
console.log('setTimeout completed');
}, 500);
}
}, [isBotChat]);
const handleSubmit = (e) => {
e.preventDefault();
if (message !== '') {
activeChat.messages.push(message);
setMessage('');
setIsBotChat(true);
}
};
return (
<div>
<h1>Active Chat</h1>
<div>
{activeChat?.messages.map((m, index) => (
<div key={index}>{m}</div>
))}
</div>
<form onSubmit={handleSubmit}>
<input
type="text"
value={message}
onChange={(e) => setMessage(e.currentTarget.value)}
/>
<button type="submit">Send Message</button>
</form>
</div>
);
};
render(<App />, document.getElementById('root'));

Answer 1

To set your state you need to use setActiveChat, in this case something like:
setActiveChat(previous => ({
...previous,
messages: [...previous.messages, 'dsadsadsada']
}))
The set state function React provides can accept a function, which we'll use in this case to avoid race conditions. previous is the previous value of activeChat (We can't rely on activeChat itself being up to date yet since the current render may be out of sync with the state) Then we expand the existing state and add the new property.
In your comments you mention only changing properties, and I'm afraid it's really not recommended to change anything in state directly, there are several in depth explanations of that here (StackOverflow question), and here (Documentation).
Full example (StackBlitz):
import React, { useEffect, useState } from 'react';
import { render } from 'react-dom';
import './style.css';
interface Chat {
messages: string[];
poster: string;
}
const App = () => {
const [activeChat, setActiveChat] = useState<Chat>({
poster: 'Adam',
messages: ['one', 'two', 'three'],
});
const [message, setMessage] = useState('');
const [isBotChat, setIsBotChat] = useState(false);
useEffect(() => {
if (isBotChat) {
setIsBotChat(false);
setTimeout(() => {
setActiveChat(previous => ({
...previous,
messages: [...previous.messages, 'dsadsadsada']
}))
console.log('setTimeout completed');
}, 500);
}
}, [isBotChat]);
const handleSubmit = (e) => {
e.preventDefault();
if (message !== '') {
setActiveChat(previous => ({
...previous,
messages: [...previous.messages, message]
}))
setMessage('');
setTimeout(() => {
setActiveChat(previous => ({
...previous,
messages: [...previous.messages, 'dsadsadsada']
}))
console.log('setTimeout completed');
}, 500);
}
};
return (
<div>
<h1>Active Chat</h1>
<div>
{activeChat?.messages.map((m, index) => (
<div key={index}>{m}</div>
))}
</div>
<form onSubmit={handleSubmit}>
<input
type="text"
value={message}
onChange={(e) => setMessage(e.currentTarget.value)}
/>
<button type="submit">Send Message</button>
</form>
</div>
);
};
render(<App />, document.getElementById('root'));