Implementing time delay using React Hooks

Question

I would like to know how to implement time delay in React functional component. Pseudocode is given below

const staring_function = () => {
  return(
    //renders components
  )
}
const main_function = () => {
  return(
    //renders components
  )
}

I would like to run starting_function for 3 seconds to render some texts on the screen on loading after which the main_function run to replace the contents of the starting_function. for example the page displaying a text "LOADING ... " for few seconds and then displaying the contents.

I have been working on this for some days yet still cant get around. I know it has something to do with useEffect hook. It would have been helpful if someone could help me out. Thank you

This question has valuable answers to what you are looking for https://stackoverflow.com/questions/53090432/react-hooks-right-way-to-clear-timeouts-and-intervals — Ozgur Sar, Dec 13 '20 at 07:29

score 0 · Answer 1 · answered Dec 13 '20 at 07:35

You don't need useEffect hook. Try following code:

const [ loading, setLoading ] = useState(true)

setTimeout(() => {
  console.log('now')
  setLoading(false)
}, 3000)

if (loading) {
  return (
    <div>LOADING...</div>
  )
}

return (
  <div>content</div>
)

Implementing time delay using React Hooks

1 Answers1