Entrar Ainda não tem acesso?
1
resposta

2 logs no console

Referente ao curso React: escrevendo com Typescript, no capítulo State e atividade Atualizando a tarefa

por Arthur York Weber Nantal
| 72.2k xp | 13 posts

Quando faço a verificação aparecem dois logs no console. Comentei a linha em Index/Item para ver se por um acaso não estava vindo de outro lugar, mas não funciona, logo é dessa linha de código:

import { ITarefa } from '../../../types/tarefa';
import style from '../Lista.module.scss';

export default function Item({ tarefa, tempo, selecionado, completado, id }: ITarefa) {
    console.log('item atual:', { tarefa, tempo, selecionado, completado, id })
    return (
        <li className={style.item}>
            <h3>{tarefa}</h3>
            <span>{tempo}</span>
        </li>
    )
};

Talvez não atrapalhe em nada da aplicação, mas não consigo entender o porquê isso contece.

1 resposta
por Neilton Seguins
| 331.2k xp | 469 posts
Instrutor Instrutor e desenvolvedor de software

Olá, Arthur! Tudo bem?

Isso pode está acontecendo devido ao modo estrito (Strict Mode) do React. Você pode ativar este modo para qualquer parte da aplicação. O que ele faz é te ajudar a identificar potenciais problemas de sua aplicação.

import React from 'react';

function ExampleApplication() {
  return (
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
  );
}

Conceitualmente o React funciona em duas fases:

A fase de renderização determina quais mudanças precisam ser feitas para, por exemplo, o DOM. Durante essa fase, o React chama o método render e compara o resultado com a renderização anterior.

A fase de commit é quando o React aplica qualquer mudança. (No caso do React DOM, isso é quando o React insere, atualiza ou remove nós do DOM.)

O React pode invocar a fase de renderização várias vezes antes de commitar, por isso você acaba observando que ele renderiza algumas coisas duplicadas, como no seu caso.

Para saber mais recomendo ler a documentação do React e entender como funciona esse modo estrito.

Abraços e bons estudos!