How to display text by letters in React with useState?

Question

I want to create a text where's another letter is added to the last one, like in an old computer. But the letters keeps replacing one another instead of adding to one another:

const App = () => {
  const [text, setText] = React.useState(``);
  React.useEffect(() => {
    [`x`,`y`].forEach((letter, index) => {
      setTimeout(()=> {

         // old: setText(text => text + letter) 
         setText(text => text + letter) // new: printing each letter twice

      }, 500 * index)
    })
  }, [])
  return (text)
}

ReactDOM.createRoot(document.getElementById(`root`))
  .render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<div id="root"></div>

What's the way to fix it?

Thanks!

Try replacing setText(letter + text) with setText(text => letter + text). setState functions can take as argument function from old state to new state, which are correct way of changing something based on old state. — Matija Sirk, Jan 11 '23 at 13:40
@MatijaSirk Okay I have tried it (see edit of original post) but unfortunately now it's printing each letter twice. — JDD, Jan 11 '23 at 13:46
`setText` is an asynchronous function. I suppose `text` is not modified yet. — Aurélien Bénel, Jan 11 '23 at 13:46
Does this answer your question? [Why is my React component is rendering twice?](https://stackoverflow.com/questions/48846289/why-is-my-react-component-is-rendering-twice) — Gabriele Petrioli, Jan 11 '23 at 15:11

score 0 · Accepted Answer · answered Jan 11 '23 at 16:07

This is because of StrictMode. Using useEffect dont forget the cleanup function. In this case you need to cleanup timeouts or they will stack up when the component re-render and will survive of an unmount:

React.useEffect(() => {
  let ids = [];
  
  ['x', 'y'].forEach((letter, index) => {
    const id = setTimeout(() => {
      setText(text => text + letter);
    }, 500 * index);
    
    ids.push(id);
  });
  
  // cleanup !
  return () => { ids.forEach((id) => clearTimeout(id)); };
 }, [])

How to display text by letters in React with useState?

1 Answers1