Introdução a

React Hooks

Por Gabriel Medina

Gabriel Medina

Frontend Engineer

Grupo Boticário

Egresso TADS 2016

gabrielmedina.dev

linkedin.com/in/gmedinasantos

github.com/gabrielmedina

Why learn React Hooks?

1. São fáceis e convenientes de trabalhar

2. São relativamente simples de se entender

3. Tornam o código mais reutilizável

Prerequisites

1. Compreensão básica de JavaScript

2. Compreensão básica de React

What are React Hooks?

https://pt-br.reactjs.org/docs/hooks-intro.html

Os Hooks foram introduzidos na versão 16.8 do React.

São funções especiais usadas em functional components que permitem a manipulação do state e outros recursos do React sem a necessidade de escrever class components.

Rules

https://pt-br.reactjs.org/docs/hooks-rules.html

1. Use Hooks apenas no nível superior

Não use Hooks dentro de loops, regras condicionais ou funções aninhadas (funções dentro de funções).

2. Use Hooks apenas dentro de funções React

Não use Hooks dentro de funções JavaScript comuns.

Good practice: eslint-plugin-react-hooks

Let's coding!

bit.ly/reac-ifms-2024

Sandboxs

useRef

useState

useEffect

custom hook

Obrigado!