React Hooks – Uma Introdução

Hooks

Os Hooks foram introduzidos no React na sua versão 16.8 e são muito úteis. Para utilizá-los você precisa atualizar todos seus pacotes do React para versão 16.8 ou superior.

Mas afinal, oque são Hooks

Hooks são funções JavaScript que nos permitem utilizar estado e outros recursos do React sem necessidade de um componente de classe, eles são usados em componentes funcionais. Hooks não funcionam dentro de classes — eles permitem utilizarmos React sem classes. Isso significa que podemos escrever componentes funcionais (que são menos verbosos) e ainda utilizar variáveis de estado. 😍

O React já traz alguns hooks que podemos utilizar, mas também é possível construirmos nossos próprios hooks. Vamos valar de dois hooks bem legais e com certeza você vai usar.

• State Hook
• Efect Hook

State Hook

O Hook de estado introduz a função useState que nos permite criar variáveis de estado nos nossos componentes funcionais. Vejamos este exemplo:

import React, { useState } from 'react';

export default function Count() {
  const [count, setCount] = useState(0);

  return (
    <div>
        <p>Você clicou {count} vezes</p>
        <button onClick={() => setCount(count + 1)}>
            Clique aqui
        </button>
    </div>
  )
}

Neste trecho de código eu chamei o hook de estado (useState). useState recebe um único parâmetro, que é o valor inicial da variável. Neste exemplo a variável count vai inicializar com valor zero (0).

O retorno de useState são dois argumentos, o primeiro é o valor inicial que foi informado por parâmetro. Já o segundo argumento retornado é uma função que serve para atualizar o nossa variável de estado. Neste exemplo ele foi chamada de setCount. A função setCount é parecida com setState dos classes.

Podemos chamar useSate quantas vezes forem necessárias:

import React, { useState } from 'react';

export default function SignUp() {
  
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  //...
}

Hook de efeito

O Hook de Efeito, useEffect, adiciona a funcionalidade de executar efeitos colaterais através de um componente funcional. Segue a mesma finalidade do componentDidMount, componentDidUpdate, e componentWillUnmount em classes React, mas unificado em uma mesma API.

const { useEffect, useState } = React

const CounterWithNameAndSideEffect = () => {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('Josias')

  useEffect(() => {
    console.log(`Hi ${name} you clicked ${count} times`)
  })

  return (
    <div>
      <p>
        Hi {name} you clicked {count} times
      </p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
      <button onClick={() => setName(name === 'Josias' ? 'João' : 'Josias')}>
        Change name
      </button>
    </div>
  )
}

O mesmo resultado de componentWillUnmount pode ser alcançado retornando opcionalmente uma função do nosso useEffect()parâmetro:

useEffect(() => {
  console.log(`Hi ${name} you clicked ${count} times`)
  return () => {
    console.log(`Unmounted`)
  }
})

Como as  funções useEffect()são executadas em cada re-renderização / atualização subsequente, podemos dizer ao React para pular uma execução, para fins de desempenho, adicionando um segundo parâmetro que é uma matriz que contém uma lista de variáveis ​​de estado a serem observadas. React só executará novamente este hook se um dos itens nesta matriz for alterado.

useEffect(
  () => {
    console.log(`Hi ${name} you clicked ${count} times`)
  },
  [name, count]
)

Da mesma forma, você pode dizer ao React para executar apenas o efeito colateral uma vez (no tempo de montagem), passando uma matriz vazia:

useEffect(() => {
  console.log(`Component mounted`)
}, [])

Concluindo

Bom, o objetivo deste post foi trazer os principais Hooks do React em uma explicação simples e fácil de entender. Espero que tenha gostado. 😉

Ficou com dúvida? deixa nos comentários..
Grande abraço, até o próximo post!