CODEWITHSUNDEEP
javascriptreactjsreact-hooks
sylargaf
sylargaf

Reputation: 522

React Array State Update Not Consistant

Having a weird problem, hoping someone can assist. I'm trying to "iterate" through an array of words and punctuation in order to make the appearance of scrolling dialogue. I have this working except for when I try to push it to React, it just goes...haywire. Here's what I have:


export default function DialogueBox(params){

    const params="The story, characters, and events, in this game are entirely fictional. Any similarities to actual people, places and events are entirely coicidental.";

    let dialogueValue = [];

    let [dialogue, setDialogue] = useState([]);
  
    let letterArray = params.text.split(/\b/);

    const handleChangeValue = text => {
       
                const updatedLettersArray = [...dialogueValue, text];
                console.log('updated: ' + updatedLettersArray);
                // setDialogue(oldArray=>[...oldArray,updatedLettersArray]);
                
    }

    return (
        <div className="dialogueBox">
            {letterArray.forEach(function(element,index){
                setTimeout(
                    function(){
                        handleChangeValue(element);
                        dialogueValue.push(element);
                    }, index * 500
                );
            })}
            <p>{dialogue}</p>
        </div>
    )
}

Here's the console log, which is correct:

updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, ,story,, DialogueBox.js:15
updated: The, ,story,, ,characters DialogueBox.js:15
updated: The, ,story,, ,characters,, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, ,places DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, ,places, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, ,places, ,and DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, ,places, ,and, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, ,places, ,and, ,events DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, ,places, ,and, ,events, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, ,places, ,and, ,events, ,are DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, ,places, ,and, ,events, ,are, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, ,places, ,and, ,events, ,are, ,entirely DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, ,places, ,and, ,events, ,are, ,entirely, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, ,places, ,and, ,events, ,are, ,entirely, ,coicidental DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, ,places, ,and, ,events, ,are, ,entirely, ,coicidental,.

but, if I uncomment that line

// setDialogue(oldArray=>[...oldArray,updatedLettersArray]);

the following happens:

updated: The 94 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 3 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 3 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 3 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 3 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 3 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story 3 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story 3 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story 2 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story

Basically just repeating itself non stop. I'm positive i'm missing something obvious here but i'm at a loss! Thank you all for any help

Upvotes: 0

Views: 58

Answers (2)

ninjadave
ninjadave

Reputation: 46

Using setInterval and an index to keep track of position. Check out example here https://codesandbox.io/s/bold-wind-sq8lb?file=/src/App.js:

import { useEffect, useState } from "react";

export default function App() {
  const sentence =
    "The story, characters, and events, in this game are entirely fictional. Any similarities to actual people, places and events are entirely coicidental.";

  const [dialogue, setDialogue] = useState("");
  const [index, setIndex] = useState(0);
  const letterArray = sentence.split(/\b/);

  const handleChangeValue = () => {
    if (letterArray[index] !== undefined) {
      setDialogue((dialogue) => dialogue + letterArray[index]);
    }
  };

  useEffect(() => {
    // update the dialogue here
    const interval = setInterval(() => {
      if (index < letterArray.length) {
        setIndex((index) => index + 1);
      }
    }, 100);
    return () => clearInterval(interval);
  });

  useEffect(() => {
    // update the dialogue here
    handleChangeValue();
    console.log(`New dialogue: ${dialogue}`);
  }, [index]);

  return (
    <div className="App">
      <p>{dialogue}</p>
    </div>
  );
}

Upvotes: 1

Mech Tsai
Mech Tsai

Reputation: 190

Don't use setTimeout directly within the React component return, it will setup massive of timers into Javascript runtime and never be recycled.

If the setTimeout or even setInterval is what you needed, wrap them with useEffect would be the idea

By guessing what you're trying to do, this is an example code. It will display a word every 0.5s to the screen till the end of params

export default function DialogueBox(params){

  const params = "The story, characters, and events, in this game are entirely fictional. Any similarities to actual people, places and events are entirely coicidental.";
  const letters = params.split(/\b/)

  const [dialogue, setDialogue] = useState([]);

  useEffect(() => {
    const timers = []

    letters.forEach((letter, index) => {
      timers.push(
        setTimeout(() => {
          console.log(`Display at 500*${index} ms: ${letter}`)
          setDialogue(originDialogue => [...originDialogue, letter])
        }, 500*index)
      )
    })

    return () => timers.map((timer) => clearTimeout(timer))  // clean up timers to prevent memory leak
  }, [params]) // params here as dependency of useEffect, see offical document for useEffect for detail

  return (
    <div className="dialogueBox">
      {dialogue.map((letter) => (
        <p>{letter}</p>
      ))}
    </div>
  )
}

Upvotes: 1

Related Questions