React: Por que o comportamento padrão de useEffect é executar em todas as renderizações?

Pelo design da API:

useEffect(
    () => {
        // do something
    },
    [/* dependency list */]
);

useEffect será executado apenas quando a lista de dependências mudar, e o array vazio [] significa que não há dependência (ou seja, será executado apenas uma vez). Parece lógico para mim que a lista de dependências indefinidas significa executar a função envolvida por useEffect cada renderização.

Não consigo pensar em muitos (quaisquer) padrões onde você deseja executar useEffect em cada renderização. Qual foi o raciocínio por trás de não deixar de ser executado uma vez?

Suponha que você seja muito novo no React e queira fazer algo sempre que uma variável useState muda (por exemplo, POSTAR o novo valor em um servidor).

• Com o comportamento atual, você postaria o mesmo valor várias vezes, mas nunca deixaria de postar um valor alterado.
• Com o comportamento que você está sugerindo, apenas o valor inicial / primeira alteração seria POSTADA, e outras alterações não acionariam o retorno de chamada useEffect .

Acho que a lista de dependências pretende ser mais uma otimização de desempenho / auxílio à simplificação de código.

A API atual permite que você decida entre os seguintes comportamentos:

• Execute o efeito todas as vezes. Isso imita o comportamento da classe antiga componentDidMount + componentDidUpdate .
• Execute o efeito apenas uma vez. Isso imita o antigo comportamento de componentDidMount .
• Execute o efeito apenas quando as dependências forem alteradas. Isso é meio novo, embora você pudesse (e costumava fazer) implementar a mesma coisa pelo componente this.props e prevProps na API do componente de classe.

O comportamento "padrão" que você descreve (quando você não especifica explicitamente as dependências) geralmente é o mais seguro, pois evita que valores obsoletos sejam usados ​​em encerramentos .

No futuro, esperamos fornecer algum tipo de compilador para ajudar a automatizar muito disso. Enquanto isso, fornecemos um plug-in ESLint oficial para ajudar a torná-lo um pouco mais fácil. 😄