Add delay into a map with React Hooks

user_13706444 0
Viewed 3460

I have tried solutions related with Javascript and React using state, but I can't do it with Hooks. I want to add 3 seconds delay for each element that I'm rendering on array.map

import React, { useState } from 'react';

const DelayMapHooks = () => {
    
    const [array, setArray] = useState([1, 2, 3])
    return (
        <div>
            {
                array.map((elem, key) => {
                    // ADD DELAY HERE FOR EACH ELEMENT
                    return( <div>Number: {elem}</div> )
                })
            }
        </div>
    );
};

export default DelayMapHooks;

I have tried adding an await/async immediately after the map, using await delay(3000) with the function

const delay = ms => {return(new Promise(res => setTimeout(res, ms)))}

But it doesn't work, showing the error: Objects are not valid as a React child (found: [object Promise]). Appreciated any help.

react-hooks reactjs javascript
3 Answers

You can't block the render method like that, render should run synchronously. This can be done with useEffect though, you need to modify the state of the array each period. React will then reconcile the DOM and render an extra element every second.

useEffect(() => {
  const interval = setInterval(() => {
   // You'd want an exit condition here
  setArray(arr => [...arr, arr.length + 1]);
}, 1000);

  return () => clearInterval(interval);
}, []);
user_103752910

Does this work for you? The delay needs to be handled through state. Either adding the items over time or a visibility property.

import React, { useEffect, useState } from "react";

const DelayMapHooks = () => {
  const [array, setArray] = useState([]);

  useEffect(() => {
    for (let i = 1; i <= 3; i++) {
      setTimeout(() => setArray((prevState) => [...prevState, i]), 3000 * i);
    }
  }, []);

  return (
    <div>
      {array.map((elem, key) => {
           return <div>Number: {elem}</div>;
      })}
    </div>
  );
};

export default DelayMapHooks;
user_28173860

You could still use delay, but require some more works

  • iterate array with delay using IIFE async function
  • after delay, set the element to be displayed and have a useEffect hook to listen to that update, and then append the to-be-displayed element to a new array using for rendering
const [array] = React.useState([1, 2, 3, 4, 5])
const [displayArray, setDisplayArray] = React.useState([])
const [displayEl, setDisplayEl] = React.useState()

const delay = (ms) =>
  new Promise((res) => {
    setTimeout(() => {
      res()
    }, ms)
  })

React.useEffect(() => {
  (async function () {
    for (let el of array) {
      await delay(1000)
      setDisplayEl(el)
    }
    setDisplayEl(undefined)
  })()
}, [array])

React.useEffect(() => {
  displayEl && setDisplayArray((prev) => [...prev, displayEl])
}, [displayEl])

return (
  <div className="App">
    <h1>Hello CodeSandbox</h1>
    {displayArray.map((elem, key) => (
      <div key={key}>Number: {elem}</div>
    ))}
  </div>
)

Codesandbox for demo (refresh to see from the beginning)

Edit suspicious-wilson-3s78d

user_66551600
Related