Isso não vai funcionar porque o setInterval
não se comporta adequadamente ao modelo que o React trabalha.
No JSX, tudo o que se coloca entre chaves ({}
) é avaliado como uma expressão pelo React e renderizado no documento. Como setTimeout
, nos browsers, sempre retorna um número (o ID do timeout), é ele que será renderizado. Desse modo, colocar o código JSX dentro do setTimeout
é errado e de nada adiantará, já que são APIs incompatíveis para uso direto.
Para que isso funcionasse do jeito que o exemplo da pergunta mostra, setTimeout
teria que, no mínimo, adequar-se ao modelo de "Suspense" do React.
Como primitivo da web, o setInterval
jamais se adequará a esse modelo. São tecnologias diferentes que não foram pensadas para trabalharem juntas sem um manejo adicional.
É sobre esse "manejo" que trataremos a seguir.
Para fazer com que um componente só seja renderizado após certo tempo, você deve criar uma variável de estado para "saber" quando o componente deve estar escondido ou visível. Também deve utilizar o useEffect
para fazer a "integração" com o setTimeout
.
Um exemplo trivial seria este:
function App() {
// Inicializamos um booleano no estado do componente para sabermos quando
// devemos mostrar ou esconder o componente de acordo com o `setTimeout`.
const [finishedTimeout, setFinishedTimeout] = React.useState(false);
// O "manejo" necessário: integraremos o `setTimeout` com o React através do
// hook `useEffect`:
React.useEffect(() => {
const id = setTimeout(() => {
setFinishedTimeout(true);
}, 1000);
return () => clearTimeout(id);
}, []);
return (
<div>
<h1>Sempre visível.</h1>
{finishedTimeout && <h1>Visível apenas 1s depois.</h1>}
</div>
);
}
ReactDOM.render(<App />, document.querySelector('#root'));
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>
É importante entender o funcionamento dos React Hooks.