0

Olá, estou fazendo um componente que mostra a data atual, porém gostaria que o mesmo atualizasse assim que houvesse a mudança, porém só consegui deixar ele ativo para mudança com um timeout, que acho não ser uma boa solução, pois fica atualizando o tempo todo desnecessariamente ou eu teria que ajustar um valor alto que poderia causar um atraso na hora da atualização.

this.state = {
            curDate : null
        }

componentDidMount() {
    setInterval( () => {
        this.setState({
            curDate : new Date().getSeconds()
         })
    },1000)
}

render() {
     return (
         <div>
             <p>{this.state.curDate}</p>
         </div>
      );
}
4
  • 1
    O próprio site do ReactJs na página de quickstart tem um exemplo que vai evoluindo até algo como o que você quer, no caso ele faz um relógio com data e tudo, que evolui da versão mais errada, até a mais correta
    – Lucas
    Commented 20/03/2018 às 19:25
  • 1
    Qual é a sua pergunta? Seu código parece estar OK. O uso de setInterval no componentDidMount() está correto se for pra mostrar um relógio.
    – nbkhope
    Commented 28/03/2018 às 22:35
  • 1
    Se você quiser que só mostre a data de hoje, é só formatar o valor de new Date().toISOString() no próprio render(). Não precisa ficar contando o tempo. Não acho que ninguém vai entrar na sua página e esperar 24 horas só pra ver a data mudar. Provavelmente a pessoa vai acessar no outro dia, em uma nova reload da página, que novamente vai mostrar da data do dia e não a anterior.
    – nbkhope
    Commented 28/03/2018 às 22:40
  • Eu entendo que o usuário pode dar um reload, mas caso ele esteja na página no momento da troca de data a mesma não seria atualizada, por isso preciso que ela atualize. A questão era que eu testei com segundos e obviamente ele ficava fazendo render a cada segundo, mas trocando por getDate() ele não faz o render a cada segundo, mesmo com o valor do setInterval. Minha preocupação era ele ficar consumindo recursos apenas para isso, mas não é o caso, inclusive já alterei um pouco seguindo orientações de um colega de FB. Commented 29/03/2018 às 2:30

1 Resposta 1

-1

Não acho que você tem muita escolha com relação a usar um interval. O que você pode fazer para diminuir a quantidade de execuções (inclusive você não tem tantos recursos assim sendo utilizados, então não precisa se preocupar) é no load da sua aplicação faça a conta de quanto tempo falta para o dia virar. Daí você põe um timeout com o tempo certo e, em teoria, você só precisa executar uma vez por dia. Quando a data virar você põe outro timeout pra 24h e por aí vai.

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 .