3

Quero que determinado componente só apareça na tela depois de 1 segundo. Tem como fazer isso usando bloco JSX?

Quando coloco o código abaixo, aparece um número na tela ao invés da mensagem.

function App() {
  return (
    <>
      {setInterval(() => {
        return (
          <div className="answer">
            <input
              type="text"
              placeholder="Nome e sobrenome"
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
            <button type="submit" onClick={handleInputName}>
              <PlayArrowIcon fontSize="large" color="primary" />
            </button>
          </div>
        );
      }, 1000)}
    </>
  );
}

1 Resposta 1

3

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .