React Hooks – Uma Introdução

React Mar 04, 2020

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!

Josias Pereira

Sou Bacharel em Sistemas de Informação. No meu tempo livre, gosto de escrever sobre tecnologias, linguagens de programação, ferramentas e minhas experiências sobre o desenvolvimento web.

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.