How to delay the return() of React functional component

Question

I'm using Functional components in my react app. I need to delay the content under the return() of my react component by 3 seconds. Here is the way I'm looking for it. Please help me to do it in this way.

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

const Example = () => {
    useEffect(() => {

        //some codes

    }, []);

    //some codes

    return (
        <div>
            {/* Return Something */}
        </div>
    );
};

export default Example;

Answer 1

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

const Example = () => {
    const [loading, setLoading] = useState(true);
    useEffect(() => {

      setTimeout(() => {
         setLoading(false)
      }, 3000)

    }, []);

    //some codes

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

    return (
        <div>
            {/* Return Something */}
        </div>
    );
};

export default Example;

Answer 2

use the setTimeout method calls a function or runs some code after a period of time, specified using the second argument.

const [state,setState] = useState({
 text:"",
});

useEffect(() => {
const timer = setTimeout(() => {
 setState({
  text:"Hello World"
 });
}, 3000);
return () => clearTimeout(timer);
}, []);

return (
<h1>{state.text}</h1>
);