Mais 8 ganchos React que você precisa conhecer

Por Matthew Tyson

Arquiteto de Software, InfoWorld |

React continua sendo o pioneiro entre as estruturas de UI JavaScript. Há muitos desenvolvimentos em andamento no React, mas a mudança mais importante dos últimos anos foi a mudança para componentes funcionais. Os componentes funcionais dependem de ganchos para muitas de suas capacidades. O gancho mais comum é useState, mas existem muitos outros.

Aqui estão oito ganchos úteis do React que você talvez não conheça e como usá-los.

Todo mundo conhece useState porque ele substitui um recurso essencial dos componentes baseados em classe – as variáveis ​​de membro para manter o estado – por um equivalente funcional. O gancho useReducer faz algo semelhante, mas para cenários mais complexos onde as transições de estado estão mais envolvidas e o aplicativo se beneficia ao tornar as transições explícitas. O gancho useReducer é inspirado nos redutores encontrados no Redux. Pode ser visto como um meio termo entre a simplicidade do useState e a complexidade de um sistema de gerenciamento de estado como o Redux.

Aqui está um exemplo de como trabalhar com o gancho useReducer. Você também pode ver o redutor ao vivo neste JSFiddle.

O objetivo deste exemplo é pegar o texto da caixa de entrada e permitir que o usuário clique nos botões para exibir o texto em letras maiúsculas ou minúsculas. O código declara um novo redutor com const [state, dispatch] = useReducer(reducer, initialState);. O useReducer pega a função redutora e o estado inicial e retorna um array, que então desestruturamos para declarar e despachar variáveis.

O redutor em si é definido com: const redutor = (estado, ação) =>, fornecendo uma função de dois argumentos. Sempre que a função de expedição for chamada no código, ela passará o estado atual junto com um objeto de ação. Nesse caso, o objeto de ação possui um campo de tipo e o usamos para determinar como alterar o estado.

Em um aplicativo moderadamente complexo, useReducer pode ser útil no gerenciamento da complexidade e pode até ser compartilhado no aplicativo usando o contexto. Quando useState é difícil de gerenciar devido à complexidade do aplicativo, o gancho useReducer pode ajudar.

O gancho useCallback é um gancho de desempenho. É necessária uma função e garante que apenas uma única versão será retornada e reutilizada para todos os chamadores. Se a função for cara e chamada repetidamente por um loop ou componentes filhos, o gancho useCallback poderá gerar ganhos de desempenho significativos. Esse tipo de otimização é conhecido como memorização de uma função.

Na Listagem 2, temos um exemplo de uso de useCallback para usar a mesma função em vários itens de uma lista. Aqui está o exemplo em um JSFiddle ao vivo.

Usamos React.useCallback() para criar uma nova função memorizada em incrementCounter. Podemos usar a função memoizada como uma função normal no manipulador onClick, na lista. useCallback() usa uma função como primeiro argumento. Dentro dessa função, podemos realizar qualquer trabalho que precisarmos. A principal diferença é que o React simplesmente retorna o valor armazenado em cache da função, a menos que algo tenha mudado na lista de variáveis ​​de dependência, que em nosso exemplo é a variável do contador.

Este é um poder mágico precioso nos casos em que você precisa compartilhar uma função cara entre vários chamadores, especialmente componentes filhos. Tenha em mente, ao examinarmos o próximo gancho (useMemo), que useCallback armazena a própria função. Ou seja, useCallback evita que a função real seja recriada cada vez que aparece e apenas a recria quando necessário.

O gancho useMemo é irmão de useCallback. Onde useCallback armazena em cache a função, useMemo armazena em cache o valor de retorno da função. É uma distinção sutil, mas importante.

Quando você deve usar useMemo versus useCallback? A resposta é: use useMemo quando puder e useCallback quando for necessário. O gancho useCallback é merecido quando o impacto no desempenho que você está evitando é a criação da própria função na renderização, enquanto useMemo não impedirá que a função seja recriada onde quer que apareça. No entanto, useMemo garantirá que a função retorne um valor armazenado em cache se as dependências não tiverem sido alteradas.