React: Chamada inesperada de componente de função usando useState

Criado em 20 dez. 2019 · 3Comentários · Fonte: facebook/react

Você quer solicitar um recurso ou relatar um bug ?

pergunta

Qual é o comportamento atual?

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function Child() {
  console.log("Child render");
  return null;
}

function App() {
  const [count, setCount] = useState(0);

  console.log("Render");

  useEffect(() => {
    console.log("count changed", count);
  }, [count]);

  return (
    <div>
      <h2>UseState</h2>
      <p>clicked: {count}</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        +1
      </button>
      <button
        onClick={() => {
          setCount(count);
        }}
      >
        +0
      </button>
      <Child />
    </div>
  );
}

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

Existem dois botões neste exemplo de contagem. Clicar em um faz a contagem + 1, outro faz a contagem não mudar. Se clicar no botão sem alteração primeiro, "Render" não será registrado. Mas se clicar no botão +1 primeiro e depois clicar em outro, "Render" será exibido duas vezes, mas "" Child render "será exibido apenas uma vez.

Encontrei a explicação no documento.

Se você atualizar um State Hook com o mesmo valor que o estado atual, o React irá sair sem renderizar os filhos ou disparar efeitos. (React usa o algoritmo de comparação Object.is.)

O React apenas promete que o componente Filhos não será renderizado nesta situação? O componente atual ainda pode ser renderizado?

Este é um exemplo em sandbox.

https://codesandbox.io/s/long-firefly-nz5px?fontsize=14&hidenavigation=1&theme=dark

Quais versões do React e quais navegadores / sistemas operacionais são afetados por esse problema?

"react": "^ 16.12.0",
"react-dom": "^ 16.12.0",

Question

Fonte

yqz0203

Comentários muito úteis

Este problema não parece tanto um "bug" quanto uma pergunta para esclarecimento? :sorriso:

O próximo parágrafo abaixo da seção dos documentos que você referenciou diz o seguinte:

Observe que o React ainda pode precisar renderizar esse componente específico novamente antes de sair. Isso não deve ser uma preocupação, porque o React não vai desnecessariamente “mais fundo” na árvore.

React sai cedo quando sabe que é seguro. Em alguns casos, é necessário trabalhar um pouco mais para ter certeza de que é seguro resgatar.

As razões para isso não podem ser explicadas sem nos aprofundarmos nos detalhes da implementação atual - o que provavelmente não seria útil e é provável que mude em uma próxima versão à medida que continuamos trabalhando em novas APIs como o modo simultâneo e suspense.

A boa notícia é que, como os documentos mencionam, a quantidade de trabalho adicional que o React realiza em ambos os casos deve ser pequena!

bvaughn em 20 dez. 2019

👍2

Todos 3 comentários

Este problema não parece tanto um "bug" quanto uma pergunta para esclarecimento? :sorriso:

O próximo parágrafo abaixo da seção dos documentos que você referenciou diz o seguinte:

Observe que o React ainda pode precisar renderizar esse componente específico novamente antes de sair. Isso não deve ser uma preocupação, porque o React não vai desnecessariamente “mais fundo” na árvore.

React sai cedo quando sabe que é seguro. Em alguns casos, é necessário trabalhar um pouco mais para ter certeza de que é seguro resgatar.

A boa notícia é que, como os documentos mencionam, a quantidade de trabalho adicional que o React realiza em ambos os casos deve ser pequena!

bvaughn em 20 dez. 2019

👍2

Este problema não parece tanto um "bug" quanto uma pergunta para esclarecimento? 😄
O próximo parágrafo abaixo da seção dos documentos que você referenciou diz o seguinte:
Observe que o React ainda pode precisar renderizar esse componente específico novamente antes de sair. Isso não deve ser uma preocupação, porque o React não vai desnecessariamente “mais fundo” na árvore.
React sai cedo quando sabe que é seguro. Em alguns casos, é necessário trabalhar um pouco mais para ter certeza de que é seguro resgatar.
Os motivos para isso não podem ser explicados sem nos aprofundarmos nos detalhes da implementação atual - o que provavelmente não seria tão útil _e_ eles provavelmente mudarão em uma próxima versão à medida que continuamos trabalhando em novas APIs como o modo simultâneo e suspense.
A boa notícia é que, como os documentos mencionam, a quantidade de trabalho adicional que o React realiza em ambos os casos deve ser pequena!

Thx, que homem descuidado! 😁

yqz0203 em 23 dez. 2019

Sem problemas! 😄

bvaughn em 25 dez. 2019

Esta página foi útil?

0 / 5 - 0 avaliações