Lets consider this to be the component:

const Alert = () => {
        useEffect(() => {
            alert("hello");
        }, []);
        return <div>Alert</div>;
    };

It is being understood that useEffect runs after the browser has been painted.

But in this code, why does alert pops up before the browser is painted completely?
NOTE: if it is not happening at the first time, try refreshing it.