React Array State Update Not Consistant

Question

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

Is there a reason you're naming your parameter params and then also declaring a variable named params? — larz
– larz, Commented Jan 11, 2022 at 18:50
Yeah, this is a component and I wanted some test data in there for folks to see. That line isn't in the actual program itself. — sylargaf
– sylargaf, Commented Jan 11, 2022 at 18:51

ninjadave · Accepted Answer · 2022-01-11 19:31:23Z

1

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>
  );
}

answered Jan 11, 2022 at 19:31

ninjadave

464 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sylargaf Over a year ago

Thank you so much ninjadave. This is perfect and exactly what I needed.

ninjadave Over a year ago

@sylargaf You're welcome

Mech Tsai · Accepted Answer · 2022-01-11 19:26:56Z

1

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>
  )
}

answered Jan 11, 2022 at 19:26

Mech Tsai

1906 bronze badges

2 Comments

sylargaf Over a year ago

Heck yea! That did it. Thank you so much. I knew useEffect was where I needed to go but couldn't get it tow ork in the correct way. Thank you!!

Mech Tsai Over a year ago

You're welcome~

Collectives™ on Stack Overflow

React Array State Update Not Consistant

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related