Até então, a forma mais tradicional de compartilharmos funcionamento entre componentes era pelos patterns já conhecidos, os HOC's (Higher-order components) e as render props.
O grande problema desses padrões é que você precisa modificar boa parte do código do componente para que o mesmo se adapte ao funcionamento compartilhado, aumentando sua verbosidade e perdendo boa parte do isolamento de responsabilidade, ou seja, você acaba perdendo qual parte do código faz o que.
Para entendermos na prática como os hooks funcionam vamos analisar alguns conceitos simples de utilização desse novo pattern:
O hook mais comum utilizado para controlarmos alguma variável de estado dentro de um functional component no React. Para utilizar definimos:
const [count, setCount] = useState(0);
O primeiro valor count representa o valor do estado que será manipulado pela função setCount recebida através da desestruturação realizada no useState. O valor 0 repassado ao hook é o valor inicial do estado.
Então, para manipularmos o valor de count podemos simplesmente executar:
<button onClick={() => setCount(count + 1)}>+</button>
Uma das grandes deficiência dos funcional components sempre foi lidar com side-effects como chamadas à API, tarefas assíncronas, modificações na DOM, etc. Com o hook useEffect podemos operar efeitos colaterais durante a renderização do nosso componente.
Imagine que no exemplo acima do count gostaríamos de atualizar o título de página toda vez que a informação de count atualizar. Dentro do nosso funcional component (antes do return) definimos:
useEffect(() => { document.title = `Você clicou ${count} vezes.` }, [count])
Veja que o hook recebe como primeiro parâmetro uma função (assíncrona ou não) que é executada após inicialização e atualização do componente, mais ou menos o que temos com o componentDidMount e componentDidUpdate no stateful component.
O segundo parâmetro [count] indica em quais situações esse effect deve executar, nesse caso ele só executará caso o valor de count alterar. Podemos também não repassar esse parâmetro e indicaremos ao hook que deve executar na inicialização e em todas atualizações do componente, independente de seus valores alterarem.
Outra dica é que você pode passar um array vazio [] ao hook como segundo parâmetro garantindo que o mesmo irá executar apenas uma vez na inicialização do componente (tipo um componentDidMount):
const Repositories = () => { const [repositories, setRepositories] = useState([]); useEffect(() => { async function loadRepositories() { const response = await axios.get('https://api.github.com/orgs/rocketseat/repos'); setRepositories(response.data); } loadRepositories(); }, []); return (...); };
Veja que criamos uma nova função loadRepositories dentro do useEffect, isso se deve basicamente porque não é uma boa prática adicionarmos um async à função que o useEffect recebe como parâmetro.
Para utilizarmos a Context API do React até então precisávamos utilizar o pattern de render props criando um código como o seguinte:
<ThemeContext.Consumer> { theme => ( // Aqui temos o tema ) } </ThemeContext.Consumer>
Mas agora com os hooks podemos simplesmente fazer o seguinte:
const theme = useContext(ThemeContext)