Os hooks são uma característica importante do React que permitem que você adicione recursos de estado e ciclo de vida aos seus componentes funcionais. Alguns dos principais hooks utilizados no React incluem:
Permite que você adicione um estado em um componente funcional. É usado para armazenar e manipular valores de estado no componente, que podem ser atualizados e renderizados na interface do usuário.
// EXEMPLO
import React, { useState } from 'react';
function Contador() {
const [count, setCount] = useState(0);
return (
<div>
<p>Você clicou {count} vezes</p>
<button onClick={ () => setCount(count + 1) }>Aumentar</button>
<button onClick={ () => setCount(count - 1) }>Diminuir</button>
</div>
);
}Nesse exemplo, estamos criando um Contador que usa o hook useState para gerenciar um estado interno. O primeiro parâmetro count é o valor do estado atual e o segundo parâmetro setCount é a função que atualiza o nosso estado count.
Permite que você execute efeitos colaterais em um componente funcional. Esses efeitos simulam o ciclo de vida de um componente, sendo muito útil em vários cenários, por exemplo buscar dados de uma API ao carregar a página ou alterar o título da página a cada nova renderização.
OBS: Se você tem familiaridade com métodos de ciclo de vida de React, você pode entender o hook useEffect como uma junção do componentDidMount, componentDidUpdate e componentWillUnmount
// EXEMPLO
import { useEffect, useState } from "react";
function Filho() {
// WILL UNMOUNT
useEffect(() => {
return () => {
console.log("DESMONTOU O COMPONENTE FILHO");
};
}, []);
return (
<div>
<h1>FILHO</h1>
</div>
);
}
function Pai() {
const [state, setState] = useState(true);
// DID MOUNT
useEffect(() => {
console.log("MONTOU O COMPONENTE PAI");
}, []);
// DID UPDATE PERSONALIZADO
useEffect(() => {
console.log("ATUALIZOU O COMPONENTE PAI");
}, [state]);
return (
<div>
<h1>Ciclo de Vida do useEffect</h1>
{state && <Filho />}
<button onClick={() => setState(false)}>Atualiza o estado</button>
</div>
);
}Nesse exemplo, temos dois componentes chamados Pai e Filho, onde utilizamos as três formas de uso do hook useEffect. Quando o componente Pai é renderizado pela primeira vez, o hook useEffect é executado e imprime a mensagem "MONTANDO O COMPONENTE PAI" no console.
Quando clicamos no botão que atualiza o estado, o componente Pai é atualizado e o hook useEffect é executado novamente, desde que o seu estado esteja dentro do array de dependências ou que o useEffect seja genérico (sem array de dependências). Consequentemente imprimindo a mensagem "ATUALIZANDO O COMPONENTE PAI" no console.
Por fim, quando removemos o componente Filho da tela, o hook useEffect é executado com a função de limpeza e imprime a mensagem "DESMONTANDO O COMPONENTE FILHO" no console.
Permite que você acesse o contexto de um componente superior, que é uma maneira de compartilhar dados entre os componentes sem passá-los através de props.
// EXEMPLO
import React, { useContext, createContext } from 'react';
const myContext = createContext('claro');
function ComponentePai() {
return (
<myContext.Provider value="escuro">
<ComponenteFilho />
</myContext.Provider>
);
}
function ComponenteFilho() {
const tema = useContext(myContext);
return <div>O tema atual é: {tema}</div>;
}Nesse exemplo, estamos utilizando o hook useContext para consumir os valores que foram providos pelo componente Pai. O useContext irá retornar o valor passado como parâmetro para o Provider do contexto, que nesse caso é a string "escuro", e será exibido na tela através do componente Filho.
É um hook do React Router que permite navegar para outras rotas dentro da sua aplicação. Suponha que você tenha as seguintes rotas definidas em seu componente de roteamento:
// EXEMPLO
import { BrowserRouter, Switch, Route, useHistory } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</BrowserRouter>
);
}
function Home() {
const history = useHistory();
const handleButtonClick = () => {
history.push("/about");
};
return (
<div>
<h1>Bem-vindo à página inicial!</h1>
<button onClick={handleButtonClick}>Ir para a página Sobre</button>
</div>
);
}
function About() {
return (
<div>
<h1>Bem-vindo à página About!</h1>
</div>
);
}Nesse exemplo, estamos usando o useHistory para obter um objeto history, que contém várias funções úteis para navegar para outras rotas. Em seguida, estamos definindo uma função handleButtonClick que é executada quando o botão é clicado. Dentro dessa função, estamos usando a função push do objeto history para navegar para a rota "/about". Isso fará com que o componente About seja renderizado.
É um hook do React Router que permite acessar os parâmetros de uma URL definida em sua aplicação. Suponha que você tenha uma rota definida em seu componente de roteamento que contenha um parâmetro dinâmico:
// EXEMPLO
import { BrowserRouter, Switch, Route, useParams } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<Switch>
<Route path="/users/:id" component={User} />
</Switch>
</BrowserRouter>
);
}
function User() {
const { id } = useParams();
return (
<div>
<h1>Página do usuário {id}</h1>
</div>
);
}Nesse exemplo, estamos usando o useParams para obter um objeto que contém todos os parâmetros definidos na URL da rota atual. Em seguida, estamos desestruturando o valor do parâmetro id do objeto retornado.
É um hook do React Router que permite acessar a localização atual da página e seus dados de consulta.
// EXEMPLO
import React from 'react';
import { useLocation } from 'react-router-dom';
function PaginaAtual() {
const location = useLocation();
return (
<div>
<h2>Informações da Página Atual</h2>
<p>Localização: {location.pathname}</p>
<p>Dados de consulta: {location.search}</p>
</div>
);
}Nesse exemplo, exibimos algumas informações da localização atual da página, como o caminho (pathname) e os dados de consulta (search) na tela através do useLocation. Ao navegar para diferentes páginas, o hook useLocation será atualizado com a nova localização e os dados de consulta correspondentes.
Permite que você memoize valores calculados em um componente. Isso ajuda a evitar cálculos desnecessários e pode melhorar o desempenho do componente.
// EXEMPLO
import React, { useMemo, useState } from "react";
function App() {
const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
// Calcula a soma de value1 e value2, memoizando o resultado com useMemo
const sum = useMemo(() => {
console.log("Calculando a soma...");
return value1 + value2;
}, [value1, value2]);
return (
<div>
<p>Value 1: {value1}</p>
<p>Value 2: {value2}</p>
<p>Soma: {sum}</p>
<button onClick={() => setValue1(value1 + 1)}>Incrementar Value 1</button>
<button onClick={() => setValue2(value2 + 1)}>Incrementar Value 2</button>
</div>
);
}Nesse exemplo, estamos utilizando o hook useMemo para monitorar as alterações dos estados value1 e value2. Isso evita novos cálculos desnecessários da soma dos valores a cada atualização do estado e melhora a performance da aplicação.
Assim, o useMemo mantém o valor calculado anterior até que algum dos estados sejam atualizados, evitando a necessidade de recalculá-lo a cada renderização. Essa é uma técnica útil para otimizar o desempenho de componentes que realizam cálculos pesados.
Permite que você memoize funções em um componente. Isso ajuda a evitar a criação de funções desnecessárias e pode melhorar o desempenho do componente.
// EXEMPLO
import React, { useCallback, useState } from 'react';
function App() {
const [count, setCount] = useState(0);
// Define uma função incrementCount usando useCallback
const incrementCount = useCallback(() => {
setCount(count + 1);
}, [count]);
return (
<div>
<p>Count: {count}</p>
<button onClick={incrementCount}>Incrementar</button>
</div>
);
}O useCallback e o useMemo são dois hooks do React que podem ser usados para otimizar o desempenho de componentes. A principal diferença entre os dois hooks é o tipo de valor que eles retornam. O useMemo retorna um valor memorizado, enquanto o useCallback retorna uma função memorizada.
Nesse exemplo estamos memorizando a função incrementCount para evitar que uma nova função seja criada a cada renderização do componente.
Obrigada, mestre!