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

Answer 1

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