useWait React Hook

use-wait-react-hook.js

import React from 'react';
import ReactDOM from 'react-dom';

function useWait(delay) {
	const [status, setStatus] = React.useState(false);

	React.useEffect(() => {
		const id = window.setTimeout(() => {
			setStatus((c) => !c);
		}, delay);

		return () => window.clearTimeout(id);
	}, [delay]);

	return status;
}

function Wait({ delay = 1000, placeholder, ui }) {
	const show = useWait(delay);

	return show === true ? ui : placeholder;
}

function App() {
	return (
		<div className="App">
			<Wait
				delay={3000}
				placeholder={<p> Waiting... </p>}
				ui={<p> This text should appear after 3 seconds. </p>}
			/>
		</div>
	);
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);