React, setInterval not working properly, h1 element not being updated correctly

Question

I want to create a simple React app that upadates a h1 element every second with setInterval function. I have an array with strings and every second I want randomly pick a string from that array and uses that string inside h1. But my code doesn't work properly. h1 is not being updated every second but every millisecond.

import PersonalInfo from './PersonalInfo.js'
import { useState } from 'react';

function App() {
  const myPersonalInfo = ['books', 'music', 'code']; 
  const [state, changeState] = useState(myPersonalInfo[Math.floor(Math.random() * myPersonalInfo.length)]);

  setInterval(() => {
    changeState(myPersonalInfo[Math.floor(Math.random() * myPersonalInfo.length)]);
  }, 2000);

  return (
    <div className="App">
      <PersonalInfo title={state} />
    </div>
  );
}

export default App;

function PersonalInfo({ title}) {
    return <div>
        <h1>I Love {title} </h1>
    </div>
}

export default PersonalInfo

see this: https://stackoverflow.com/questions/36299174/setinterval-in-a-react-app — Ben Clayton, May 26 '22 at 07:54
you are creating a new 'setInterval' on every render - check link above — Ben Clayton, May 26 '22 at 07:55
you create setInterval in global object every time of repaint component. — Pete Pearl, May 26 '22 at 07:55

score 2 · Accepted Answer · answered May 26 '22 at 07:57

    import PersonalInfo from './PersonalInfo.js'
    import { useState } from 'react';
    
    function App() {
      const myPersonalInfo = ['books', 'music', 'code']; 
      const [state, changeState] = useState(myPersonalInfo[Math.floor(Math.random() * myPersonalInfo.length)]);
    
      useEffect(() => {
         setInterval(() => {
            changeState(myPersonalInfo[Math.floor(Math.random() * myPersonalInfo.length)]);
         }, 2000);
      }, [])
    
      return (
        <div className="App">
          <PersonalInfo title={state} />
        </div>
      );
    }
    
    export default App;

Use useEffect hook

score 2 · Answer 2 · answered May 26 '22 at 08:00

Use react useEffect

useEffect with empty dependency only run on first render

clear interval on component unmount

import PersonalInfo from './PersonalInfo.js'
import React, { useState, useEffect } from 'react';

function App() {
  const myPersonalInfo = ['books', 'music', 'code']; 
  const [state, changeState] = useState(myPersonalInfo[Math.floor(Math.random() * myPersonalInfo.length)]);

  useEffect(() => {
    const intervalId = setInterval(() => {
      changeState(myPersonalInfo[Math.floor(Math.random() * myPersonalInfo.length)]);
    }, 2000);
    
    return () => clearInterval(intervalId)
  }, [])

  return (
    <div className="App">
      <PersonalInfo title={state} />
    </div>
  );
}

export default App;

Youssouf Oumar · Answer 3 · 2023-02-17T14:46:00.543

You would wanna use useEffect with an empty dependencies array, to ensure that the code for setting the interval runs only once on mount, as otherwise you create in memory a new interval on every state changes. Also you wanna clear that interval on unmount.

Also, you can use a function to update the state, as otherwise, you will register in memory a set interval that will keep updating the state with the same value, the first random one. The state updater function ensures you hydrate the interval with a new value evrytime.

import PersonalInfo from './PersonalInfo.js'
import { useState } from 'react';

function App() {
  const myPersonalInfo = ['books', 'music', 'code']; 
  const [state, changeState] = useState(myPersonalInfo[Math.floor(Math.random() * myPersonalInfo.length)]);

  
  
  useEffect(()=>{
   const id = setInterval(() => {
       changeState(prev => myPersonalInfo[Math.floor(Math.random() * myPersonalInfo.length)]);
    }, 2000);
    
    // clear the interval before the component gets unmounted
    return ()=>clearInterval(id);
  
  },[])

  return (
    <div className="App">
      <PersonalInfo title={state} />
    </div>
  );
}

export default App;

score 0 · Answer 4 · answered May 26 '22 at 08:03

0

Use useEffect and set state as a dependency.

useEffect(() => {
  setInterval(() => {
    changeState(myPersonalInfo[Math.floor(Math.random() * myPersonalInfo.length)]);
  }, 2000);
}}, [state])

answered May 26 '22 at 08:03

TIshow

918
4
12
27

React, setInterval not working properly, h1 element not being updated correctly

4 Answers4