O que são react hooks?

Hooks são os novos padrões que foram introduzidos na versão React 16.8. Os hooks do React deram vida a esses recursos que pudemos fazer nos componentes de classe, mas desta vez nos componentes funcionais. Isso significa que essas APIs do React Hooks podem nos ajudar a interagir com os estados locais do React, os recursos do ciclo de vida e muito mais.

Os React Hooks existentes e como os usamos

useEffect: Este hook ajuda a realizar os efeitos colaterais nos componentes funcionais, como atualizar o Dom e buscar dados. Ele aceita uma função que será executada por padrão toda vez que o componente renderizar novamente. Podemos parar esta renderização passando algumas condições no array de dependências que é o segundo argumento de useEffect.

useState: Este hook ajuda a usar e atualizar variáveis ​​de estado em um componente funcional.

useRef: Este hook retorna um objeto ref mutável que contém uma propriedade .current que é usada para múltiplos propósitos.

useCallback: Este hook retorna uma versão memorizada do retorno de chamada somente se as dependências foram alteradas. A memorização é uma maneira de armazenar em cache um resultado, economizando assim o uso da memória.

useMemo: Este hook recalcula o valor memoizado somente quando uma das dependências é alterada e retorna o valor memoizado. Essa também é uma das maneiras de armazenar em cache um resultado.

useContext: Este hook aceitará o valor fornecido por React.createContext e. Isso só irá renderizar novamente o componente sempre que seu valor for alterado. Isso, portanto, ajuda a criar, fornecer e consumir o contexto.

useReducer: Este hook nos permite lidar com algumas manipulações e atualizações de estado complexas. Estamos muito familiarizados com o redux, este gancho é um pouco semelhante a isso. ele aceita uma função redutora e um estado inicial.

useLayoutEffect: é executado de forma síncrona após uma renderização, mas antes que a tela seja atualizada.

useDebugValue: Este hook ajuda a registrar informações importantes nas ferramentas de desenvolvimento criadas pelo React. Isso é recomendado para uso apenas para ganchos personalizados. Então agora temos um resumo dos ganchos que vieram antes do react 18.

Vamos passar agora para os novos ganchos do React 18

1. useId
2. useSyncExternalStore
3. useDeferredValue
4. useInsertionEffect
5. useTransition Agora vamos mergulhar nesses novos hooks

useId:
Este hook é útil onde precisamos usar alguns ids exclusivos. Dessa forma, o React provou que nos ajudará a gerar IDs exclusivos. Esses IDs exclusivos podem ser usados ​​para conteúdo renderizado pelo servidor e pelo cliente. Isso evita até mesmo incompatibilidade na renderização do lado do servidor, o que pode causar problemas.
Outra maneira em que podemos pensar é quando criamos um formulário, podemos adicionar um sufixo/prefixo a esse id, por exemplo, id + firstName. Dessa forma, podemos ter vários ids exclusivos.

Código de exemplo:

useSyncExternalStore:
A partir do nome, este gancho esclarece que ajudará na sincronização com as fontes de dados externas. Podemos ler e assinar a partir de fontes de dados externas. Este é um gancho de biblioteca desenvolvido principalmente para os autores da biblioteca integrarem.

Como usar isso? Este método aceita três argumentos:

• subscribe: É para registrar um callback que é chamado sempre que a store muda.
• getSnapshot: Ele retorna o valor atual da store.
• getServerSnapshot: Este é um parâmetro opcional e retorna o instantâneo usado durante a renderização do servidor. Este método retorna o valor da store

getSnapshot é usado para verificar se o valor subscrito mudou desde a última vez que foi renderizado, então o resultado precisa ser referencialmente estável. Isso significa que ele precisa ser um valor imutável, como uma string ou número, ou precisa ser um objeto armazenado em cache/memoizado.

useDeferredValue:
O hook rastreia um valor. Se o valor mudar de um valor antigo para um novo, o gancho pode retornar qualquer um dos valores. O benefício de usar useDeferredValue é que o React irá trabalhar na atualização assim que outro trabalho terminar

const [searchInput, setSearchInput] = useState(“”);
const searchInputDeferred = useDeferredValue(searchInput);
Aqui é criada uma versão adiada da entrada de pesquisa.

Veja este exemplo:

useInsertionEffect:
Este hook deve ser usado por autores de bibliotecas css-in-js. Porém esse hook é limitado em escopo e não tem acesso a refs. O gancho é acionado antes de todas as atualizações do DOM. Para desenvolvedores, useEffect ou useLayoutEffect devem ser preferidos. Todos nós sabemos sobre o useLayoutEffect que é acionado antes de um useEffect que useInsertionEffect seja executado antes mesmo de useLayoutEffect.

useTransition
Como o nome indica, este hook ajuda nas atualizações de transição.

As atualizações de estado do React são basicamente de dois tipos. Uma delas são as atualizações de transição que são responsáveis ​​pela transformação da interface do usuário. A outra é a deflexão que vemos como clicar, arrastar etc. O hook **useTransition **nos permite especificar algumas atualizações de estado como não tão importantes. Com isso, podemos dizer ao React para priorizar algumas atualizações mais baixas para atualizações mais priorizadas, e o aplicativo parece muito mais fácil de usar.

const [isPending, startTransition] = useTransition();- isPending é um booleano. É o React nos dizendo se essa transição está em andamento no momento. – startTransition é uma função. Vamos usá-lo para dizer ao React switch atualização de estado que queremos adiar.

Exemplo de transição de uso

Então, finalmente, temos uma visão geral desses recém-introduzidos React Hooks, acredite, esses hooks vão nos ajudar muito a aumentar o desempenho, ajudar no cliente eficiente, bem como na renderização do lado do servidor e nos dar mais controle sobre o React como um todo

Vamos começar a usá-los e ver a mágica. 🧙‍♂️🧙‍♂️🧙‍♂️