1

Hoje notei que uso o optional chaining (?.) dentro das dependências de um hook:

useEffect(() => {
  // ...
}, [route.params?.addedProduct]);

Parece funcionar como o esperado, ao menos por enquanto não observei comportamentos inesperados. A questão é que esse operador acaba gerando um código como:

(_a = route.params) === null || _a === void 0 ? void 0 : _a.addedProduct;

Veja um exemplo no Playground

E se eu tento fazer uma comparação dentro das dependências do Hook (route.params == null), recebo o seguinte warning do ESLint:

React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked. eslint(react-hooks/exhaustive-deps)

Como do jeito atual não teve nenhum warning, não sei se o warning acima é simplesmente para validação das dependências ou se isso realmente afeta o React, mas o TypeScript acaba gerando algo diferente ali. Então fiquei com a seguinte dúvida:

  • Usar o optional chaining desse jeito acarreta em algum problema?
1
  • 1
    A quem negativou a pergunta: favor justificar. Onde a pergunta precisa melhorar? Commented 23/12/2020 às 18:15

1 Resposta 1

2

Como o encadeamento opcional é uma adição relativamente recente no JavaScript (estandardizado com o ECMAScript 2020), o TypeScript (dependendo da opção target) pode emitir o código de modo a funcionar em "ambientes" antigos.

É por isso que este código:

const foo = {} as any;
console.log(foo?.bar?.baz);

Compila para isto:

"use strict";
var _a;
const foo = {};
console.log((_a = foo === null || foo === void 0 ? void 0 : foo.bar) === null || _a === void 0 ? void 0 : _a.baz);

Mas note que a expressão passada para o primeiro argumento de console.log continuará avaliando para a mesma coisa, concorda?

Desse modo, em runtime (fora o código adicional), não há nenhuma diferença entre usar o encadeamento opcional ou essa geringonça aí. A expressão sempre avaliará para o mesmo resultado.

No entanto, a mensagem do ESLint é clara:

Extract it to a separate variable so it can be statically checked.

Quando se trata de ambiente estático, pode-se afirmar que trata-se do próprio código-fonte. Nesse caso, é bem diferente você usar uma expressão pequena como foo?.bar?.baz do que usar o resultado compilado do TypeScript (que, embora também seja uma expressão, é bem maior e, portanto, parece exigir mais da análise estática feita pelo eslint-plugin-react-hooks).

Note que, embora a expressão sempre avalie para a mesma coisa, a análise estática (que é sob a qual ESLint e TypeScript trabalham) fica mais difícil no segundo caso. É mais código para analisar.

O plugin eslint-plugin-react-hooks foi criado para "cuidar" do array de dependências do useEffect (e similares). E provavelmente, para "facilitar" o trabalho, ele pede que se utilizem expressões "menos complexas".

Com isso, creio que não haja problema em utilizar o encadeamento opcional no array de dependências se a única preocupação for a diferença entre código-fonte (TypeScript) e o código "compilado". A expressão sempre avaliará para a mesma coisa.

Mesmo se você tivesse utilizando o "código compilado" diretamente no seu código-fonte, o ESLint só ia pedir para que você extraísse a expressão para uma variável fora do array para ficar menos "complexo" — como a própria mensagem de aviso diz. Não sei porque, mas ele diz que isso facilitaria a "análise estática". Como é estático, provavelmente não terá nenhuma influência no runtime do seu código, então pode usar sem medo.

1
  • 1
    Muito obrigado pela resposta. Eu desconfiava que era isso mesmo, mas fiquei com um pé atrás por não encontrar a documentação oficial dessa regra do ESLint. A mensagem realmente dá a entender que é apenas para a análise de dependência por parte do linter, e não um "problema de programação". PS: Bem avisado do encadeamento opcional ter sido incluído no ECMAScript, não estava ciente disso. Commented 12/12/2020 às 21:54

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 .