Antes de entrar no Hooks ...

Antes de entrar no básico dos Ganchos, é importante entender como chegamos a eles. Como você deve saber, o React permite que você use duas estruturas Javascript para definir os componentes: Funções ou Classes .

1️⃣ Classe:

• Componente de classe: uma classe JavaScript que inclui um método de renderização que retorna a interface do usuário. Ele também pode configurar o estado em sua função de construtor e gerenciar o estado e executar efeitos colaterais em seus métodos de ciclo de vida.
• Pure Component: difere de um componente de classe, pois tem um método shouldComponentUpdate implementado, com uma prop superficial e comparação de estado. Para valores simples, evita renderizações desnecessárias, mas para objetos complexos e profundos, pode produzir falsos negativos.
• Componente sem estado : uma classe JavaScript sem nenhum gerenciamento de estado.

2️⃣ Função:

• Componente sem estado: função JavaScript simples que passa as propriedades e retorna a IU.
• Componente de função: uma função JavaScript que recebe propriedades, que usa ganchos para gerenciar o estado, executar efeitos colaterais e retornar a IU.

Antes do React Hooks, não havia como ter um estado de gerenciamento de componente de função.

Os componentes de função surgiram com a necessidade de ter componentes sem estado com a capacidade de rastrear valores no componente e ao mesmo tempo manter o estado e a IU sincronizados.

E agora ... vamos entrar em ganchos!

Em primeiro lugar, um gancho é uma função simples. Na postagem a seguir, passaremos pelos seguintes ganchos: useState , useEffect , useSelector , useDispatch e useRef ✌️.

useState (React)

• Dá ao React a responsabilidade de gerenciar um valor de estado.
• R eturns uma matriz de dois elementos: valor atual e uma função atualizadora.const [value, setValue] = useState(initialValue)
• Para definir um valor inicial para a variável, passe o valor inicial como um argumento para a função useState .
• Para definir um novo valor, use a função atualizador. O novo valor substitui o antigo ↝ Quando o valor do estado muda, o React sabe que precisará de uma nova versão da interface do usuário ↝ render.setValue(newValue)
• É diferente do componente de classe setState que mescla o estado com o novo, em vez de receber apenas um único valor.
• Para atualizar um valor de estado com base em seu valor anterior, em vez de passar à função de atualização um valor a ser definido, você pode passar uma função. O React passará para essa função o valor do estado atual e usará o valor de retorno dessa função como o novo valor do estado. Exemplo
• Tenha cuidado ao lidar com objects. Certifique-se de copiar as propriedades inalteradas do estado anterior quando sua função de atualização estiver atualizando apenas um subconjunto das propriedades.setValue(state => { return {...state, property: newValue} })

• Usado para realizar efeitos colaterais, como por exemplo, fazer chamadas de API ou trabalhar com tempos limite.
• O primeiro argumento da função useEffect é o próprio efeito e o segundo é a lista de dependências.useEffect(() => { Effect goes here }, dependencyList);
• O React determina se um efeito deve ser executado verificando se os valores na lista de dependências foram alterados desde a última vez que o componente chamou o efeito.
• Quando useEffect é chamado sem um segundo argumento, o React executa o efeito após cada renderização.
• Quando useEffect é usado com um array vazio passado como o segundo argumento, o React executa o efeito apenas uma vez, quando o componente é montado. Ao definir a lista de dependências para um array vazio, a lista nunca mudará, então o efeito é executado apenas uma vez (primeiras montagens).
• Para limpar efeitos, retorne uma função do efeito. O React será executado antes de executar novamente a função de efeito e quando o componente for desmontado. Por que precisamos fazer isso? Para evitar vazamentos de memória ao assinar ouvintes de eventos várias vezes.

😉 Recapping Refs… Refs fornecem uma maneira de acessar nós DOM ou elementos React criados no método de renderização. Pode ser útil para gerenciar o foco ou animações.

• Responsável por criar um objeto ref mutável, cuja currentpropriedade corresponde ao valor de referência do nó e pode ser inicializada com um valor inicial.const refContainer = useRef(initialValue);
• O objeto retornado persistirá por toda a vida útil do componente.
• Se você passar um objeto ref para o elemento React, por exemplo <div ref={myRef} />, o React configurará sua .currentpropriedade para o nó DOM correspondente sempre que esse nó mudar.
• useRef fornecerá o mesmo objeto ref em cada renderização e não acionará nenhuma nova renderização.

Somente se você estiver familiarizado com o React-Redux ⚠️

• Responsável por obter os dados da loja Redux em um componente React.
• É equivalente a MapStateToProps no componente de classe.
• Aceita dois argumentos: uma função que retorna o estado ou parte do estado, chamada seletor , e uma função que verifica se o estado anterior e o atual são iguais para verificar se uma atualização é necessária (opcional).const result = useSelector(selector, equalityFunction?)
• O seletor será chamado com todo o estado de armazenamento Redux como seu único argumento.
• O seletor será executado sempre que o componente de função for renderizado.
• O seletor será executado sempre que uma ação for despachada.
• A função de comparação de igualdade força apenas uma nova renderização se o resultado do seletor parecer diferente do último resultado. Você pode usar a função shallowEqual da biblioteca React-Redux, por exemplo.

Somente se você estiver familiarizado com o React-Redux ⚠️

• Retorna uma referência à função de despacho da loja Redux. const dispatch = useDispatch()
• Você pode usá-lo para despachar ações conforme necessário. dispatch({type: ACTION_TYPE_EXAMPLE, payload: dummy})
• É o equivalente a MapDispatchToProps no componente de classe.

• Menos código e melhor organização de código
• Componentes mais facilmente testáveis
• Extração de recursos para funções externas que podem ser reutilizadas e compartilhadas
• Modelo de ciclo de vida mais simples, enquanto o código de efeitos colaterais de componentes de classe é dividido em vários métodos de ciclo de vida (componentDidMount, componentWillUnmount, componentWillUpdate)
• Não há necessidade de chamar super () em um construtor de classe
• Não há necessidade de trabalhar com isso e vincular manipuladores e começar a tirar proveito do fechamento de javascript.

Referências:

React Hooks em ação

por John Larsen

Dev Blog

https://dev.to/vitaliemaldur/resize-event-listener-using-react-hooks-1k0c