Um guia para iniciantes sobre React Hooks e como usá-los

O que são React Hooks e por que eles são úteis?

Os React Hooks são um novo recurso do React 16.8 que permite usar o estado e outros recursos do React sem escrever uma classe. Isso facilita o compartilhamento da lógica de estado entre os componentes e ajuda a tornar seu código mais reutilizável e fácil de entender. Os ganchos também são úteis porque permitem que você divida seu código em partes menores e reutilizáveis, o que pode facilitar o gerenciamento e o teste.

Diferenças entre React Hooks e componentes baseados em classe

Algumas diferenças importantes entre React Hooks e componentes baseados em classe incluem:

1. Os Hooks permitem que você use o estado e outros recursos do React em componentes de função: Antes da introdução dos Hooks, apenas os componentes baseados em classe podiam ter estado e usar outros recursos do React, como métodos de ciclo de vida. Com Hooks, você pode adicionar estado e outros recursos React a componentes funcionais, tornando-os mais versáteis e reutilizáveis.

   
   

2. Os ganchos tornam seu código mais conciso e legível: os componentes baseados em classe podem se tornar longos e complexos, especialmente se você tiver que gerenciar muitos métodos de estado ou ciclo de vida. Com Hooks, você pode usar funções simples e focadas para lidar com partes individuais de estado e lógica, o que pode tornar seu código mais legível e fácil de entender.

   
   

3. Os ganchos permitem que você reutilize a lógica de estado: com os ganchos, você pode extrair a lógica de estado de um componente e compartilhá-la em vários componentes, tornando seu código mais reutilizável e fácil de manter. Isso é especialmente útil se você tiver um componente complexo com muita lógica de estado e quiser extrair parte dessa lógica em funções reutilizáveis.

Ganchos de reação básicos

useState()

O gancho useState é uma função no React que permite adicionar um estado a componentes funcionais. Estado é uma coleção de valores que determinam o comportamento de um componente e fornecem informações ao usuário. O gancho useState recebe um único argumento, que é o estado inicial e retorna um array com dois elementos.

O primeiro elemento é o valor atual do estado e o segundo elemento é uma função que você pode usar para atualizar o estado. Aqui está um exemplo de como você pode usar o hook useState em um componente funcional:

 import React, { useState } from 'react'; const myComponent = () => { // Declare a new state variable, which we'll call "count" // The initial value of count is 0 const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times.</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }

Neste exemplo, o hook useState é usado para adicionar um pedaço de estado chamado count ao componente funcional MyComponent. O valor inicial de count é 0, e a função setCount é usada para atualizar o valor de count quando o botão é clicado. Cada vez que o botão for clicado, o valor de count será incrementado em 1 e o componente será renderizado novamente com o valor atualizado.

useEffect()

useEffect é um gancho no React que permite executar efeitos colaterais em componentes de função. Isso pode incluir coisas como configurar assinaturas, modificar o DOM e interagir com APIs externas.

Ele é chamado dentro do componente e será executado toda vez que o componente for renderizado.

Aqui está um exemplo de como usá-lo:

 import React, { useEffect } from 'react'; const MyComponent = () => { useEffect(() => { // Perform some side effect, like subscribing to a data source const subscription = someDataSource.subscribe(data => { // Update state with the data from the subscription setState({ data }); }); // Clean up the subscription when the component unmounts return () => subscription.unsubscribe(); }); // Render the component return ( <div> {/* Use the data from the state in the render method */} Data: {state.data} </div> ); }

Neste exemplo, o gancho useEffect é usado para configurar uma assinatura para uma fonte de dados e atualizar o estado do componente com os dados da assinatura. Ele também inclui uma função de limpeza que será chamada quando o componente for desmontado, para garantir que a assinatura seja devidamente limpa e não cause vazamentos de memória.

useContext()

useContext é um gancho no React que permite acessar o valor de um contexto de dentro de um componente de função. O contexto fornece uma maneira de passar dados pela árvore de componentes sem ter que passar props manualmente em todos os níveis.

Aqui está um exemplo de como usar useContext:

 import React, { useContext } from 'react'; // Create a context with a default value const MyContext = React.createContext('defaultValue'); function MyComponent() { // Use the useContext hook to access the value of the context const value = useContext(MyContext); return ( <div> {/* Use the value from the context in the render method */} Value from context: {value} </div> ); }

Neste exemplo, o gancho useContext é usado para acessar o valor do contexto MyContext dentro do componente de função MyComponent. O valor do contexto pode então ser usado no método render.

É importante observar que o valor do contexto só será atualizado nos componentes onde o contexto é usado se o provedor que fornece o valor do contexto for atualizado. Isso significa que qualquer alteração no valor do contexto só será refletida nos componentes que usam o contexto se o provedor for renderizado novamente com o valor atualizado.

Ganchos de reação avançados

useReducer()

useReducer é um gancho no React usado para gerenciar o estado em um aplicativo React. É semelhante ao gancho useState, mas permite gerenciar objetos de estado mais complexos e fornece uma maneira de manipular ações em uma função redutora.

Aqui está um exemplo de como useReducer pode ser usado em um componente React:

 import React, { useReducer } from 'react'; const initialState = { count: 0 }; function reducer(state, action) { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrement': return { count: state.count - 1 }; default: throw new Error(); } } function Counter() { const [state, dispatch] = useReducer(reducer, initialState); return ( <> Count: {state.count} <button onClick={() => dispatch({ type: 'decrement' })}>-</button> <button onClick={() => dispatch({ type: 'increment' })}>+</button> </> ); }

Neste exemplo, o gancho useReducer é usado para gerenciar o estado de um componente de contador simples. O gancho é chamado com a função de redutor e o estado inicial, e retorna o estado atual e uma função de despacho que pode ser usada para despachar ações para o redutor. Nesse caso, o componente possui dois botões que despacham as ações 'incrementar' e 'diminuir' para o redutor, que atualiza a contagem no estado de acordo.

useMemo()

useMemo é um gancho no React que permite otimizar o desempenho de um componente memorizando seu resultado. Ele recebe uma função e uma matriz de dependências como argumentos e retorna o resultado memorizado da função.

A memorização é simplesmente uma técnica de otimização usada para aumentar a velocidade e a eficiência de um aplicativo. ele faz isso armazenando os resultados da computação e retornando o resultado armazenado em cache quando as mesmas entradas ocorrerem novamente.

A matriz de dependências informa ao React quando executar novamente a função memorizada. Sempre que uma das dependências no array mudar, a função memorizada será executada novamente. Isso pode ser útil para otimizar o desempenho em componentes grandes ou complexos, onde recalcular o resultado de uma função toda vez que o componente renderiza pode ser caro.

useRef()

No React, o gancho useRef é usado para criar uma referência a um elemento DOM ou uma instância do componente React. Essa referência pode ser usada para acessar as propriedades do elemento, como seu valor ou estado verificado, ou para chamar funções no elemento, como foco ou clique.

Aqui está um exemplo de como useRef pode ser usado para focar um elemento de entrada quando um botão é clicado:

 import { useRef } from 'react'; function MyInput() { const inputRef = useRef(null); function handleClick() { // Use the `current` property of the ref to access the DOM element inputRef.current.focus(); } return ( <div> <input type="text" ref={inputRef} /> <button onClick={handleClick}>Focus the input</button> </div> ); }

Neste exemplo, a variável inputRef é criada chamando useRef e passando null como valor inicial para a referência. Essa referência é então anexada ao elemento de entrada definindo o atributo ref como inputRef.

Quando a função handleClick é chamada, ela usa a propriedade atual inputRef para acessar o elemento de entrada e chama seu método de foco, que move o foco para o elemento de entrada.

Observe que useRef não deve ser usado para armazenar o estado em seu componente. Em vez disso, use o gancho useState para essa finalidade. useRef destina-se a armazenar referências a valores não React, como elementos DOM.

Casos de uso comuns para React Hooks

• Gerenciando o estado em componentes simples e complexos
• Executar efeitos colaterais, como chamadas e assinaturas de API
• Otimizando o desempenho com memoização
• Criação de referências a elementos para uso em animações e interações

Conclusão

Em conclusão, os ganchos de reação oferecem vários benefícios em relação aos componentes tradicionais baseados em classe. Como simplicidade, capacidade de reutilização, capacidade de composição (ou seja, a capacidade de combinar várias peças de lógica em uma única função) e desempenho aprimorado.

Aconselho você a se familiarizar com os fundamentos do React Hooks e tentar aplicá-los em seu próximo projeto.