Hooks no React permitem usar estado e outros recursos de ciclo de vida em componentes funcionais. Os principais hooks são useState para gerenciar estado local e useEffect para executar efeitos colaterais. Hooks permitem compartilhar lógica entre componentes de forma mais fácil do que render props ou higher-order components.

1. Hooks no React: O novo jeito
de fazer componentes
funcionais
Alberto Berroteran Sanchez

2. Sobre mim
● Full Stack Developer há 12 anos
● Apaixonado por viajar
● Contribuidor software livre.
● Engenheiro Industrial pela Universidad de Carabobo
(VE)
○ Gerência
○ Investigação operacional
○ Engenharia de métodos
● CTO e pai adotivo da Vivetix.com

3. Conceitos Chaves
● Componente
● Estado
● Ciclo de vida (Lifecycle)

4. Componentes
● Dividem a UI em partes independentes
● Reutilizáveis
● Isolados.
● Funções JavaScript.
● Aceitam entradas arbitrárias (“props”)
● Retornam elementos

5. Componentes
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}

6. Componentes feito com função

7. Componente feito com clases

8. Porque usar componentes funcionais
1. É muito mais fácil de ler e testar
a. São funções simples e puras
b. Não tem estado ou de ciclo de vida
(montagem, atualização, renderização e
desmontagem)
2. Menos Código
3. Ajuda separa componentes de contêiner e de
apresentação
4. Aumento no desempenho

9. Props e Estados
● Props são Somente Leitura
● Componentes têm que agir como funções
puras em relação ao seus props.
● Dados internos são estados
● O estados são dados mutáveis
● Até React 16.8 não havia jeito de gerenciar
estados em componentes funcionais

10. Função pura e impura
function sum(a, b) {
return a + b;
}
function sum(a, b) {
a += b;
}

11. Ciclo de vida

12. Hooks
● São funções para “ligar-se” aos recursos de
estados e ciclo de vida em componentes.
● Não funcionam dentro de classes
● React fornece alguns Hooks internos como
useState
● Tu também podes criar os teus próprios
Hooks

13. Motivação
1. É Difícil Reutilizar Lógica com Estado entre
Componentes
a. Render Props e higher-order components
b. Wrapper hells no DevTools
2. Componentes Complexos se tornam difíceis de
Entender
a. Pegar dados em componentDidMount e
componentDidUpdate
b. Lógica espalhada
3. Classes Confundem tanto Pessoas quanto Máquinas
a. Uso de this e bind
b. Não minificam nem optimizam bem

14. O Grito
Render props is real

15. Exemplos de Usos
1. useState
2. useEffect

16. useState
● Hook para gerenciar alguns estados locais
● React preservar este estados entre
re-renderizações
● retorna: o valor do estado atual e uma função que
permite atualizá-lo.
● É parecido com this.setState em uma classe
● O único argumento é o estado inicial.
● O estado inicial é utilizado apenas na primeira
renderização

17. useEffect
● Permite fazer operações de “efeitos colaterais” (side
effects ou apenas effects) que podem afetar outros
componentes e não podem ser feitos durante a
renderização.
● Recebe como parâmetro uma função, e
opcionalmente um array
○ obtenção de dados (data fetching),
○ subscrições (subscriptions)
○ mudanças manuais no DOM.
● Segue a mesma finalidade do
componentDidMount, componentDidUpdate, e
componentWillUnmount

18. Outros Hooks
○ useContext
○ useReducer
○ useCallback
○ useMemo
○ useRef
○ useImperativeHandle
○ useLayoutEffect
○ useDebugValue

19. Regras
● Apenas chame Hooks no nível mais alto. Não
chame Hooks dentro de loops, condições ou
funções aninhadas.
● Apenas chame Hooks de componentes
funcionais.
a. Funções JavaScript comuns. Não
b. Componentes de clases. Não
c. Hooks customizados. Sim
● eslint-plugin-react-hooks

20. Então preciso de mudar o
meus componentes de
clases para funçoes?

22. Migração
● Sem breaking changes Hooks são 100%
retrocompatíveis
● Não tem planos de remover classes
● Completamente opcionais
● Disponível desde o release v16.8.0.
● Não substituem conceitos.

23. Obrigado
@EBethus

24. Referências
● https://pt-br.reactjs.org/docs/hooks-intro.html
● https://www.slideshare.net/JhonMikeSoares/react-
hooks-232246130
● http://projects.wojtekmaj.pl/react-lifecycle-method
s-diagram/
● https://dev.to/basal/react-hooks-making-it-easier-t
o-compose-reuse-and-share-react-code-5he9