SlideShare uma empresa Scribd logo
1 de 35
Baixar para ler offline
REACT HOOKS
Definição
●
Hooks (Gancho) é uma função especial que
permite ligar-se aos recursos React
●
A partir da versão 16.8
Diferença
Motivação
●
Evita componentes enormes que são dificeis de refatorar e
testar
●
Evita lógica duplicada entre diferentes componentes e método
de ciclo de vida
●
Evitar uso de padrões complexos:
– Render Props
– Callback hell
– HOC – High Order Component
Não há planos para remover class do react
RenderProps
Callback Hell
HOC
●
Evitar repetir logicas em mais componentes
●
https://api.github.com/users/{user}/repos
Vantagens
●
Não será mais necessário a utilização de classes
●
Evitará a utilização de this e bind(), conceitos que geram muita
confusão principalmente para iniciantes
●
Poderemos dividir e separar componentes funcionais e torná-los
reutilizáveis
●
Os testes serão muito mais fáceis, justamente por causa da
separação de componentes
●
Menos linha de código
Regras de uso
●
Não chame Ganchos dentro de loops,
condições ou funções aninhadas
●
Não chame ganchos de funções regulares do
JavaScript (apenas funções React ou Hooks
personalizados)
Regras de uso (cont)
●
Para garantir que as regras não sejam quebradas,
podemos usar um plugin criado pelo facebook com esta
finalidade. Abaixo segue nome e configuração
INSTALAÇÃO
https://www.npmjs.com/package/eslint-plugin-react-hooks
CONFIGURAÇÃO
Via npm
Via yarn
ESLINT-PLUGIN-REACT-HOOKS
Lista de hooks
●
Basicos
– useState
– useEffect
– useContext
●
Adicionais
– useReducer
– useCallback
– useMemo
– useRef
– useImperativeHandle
– useLayoutEffect
– useDebugValue
Podemos criar hooks personalizados
UseState
●
Cria estados para seus components sem uso
de classe
Assinatura
Variável que representa o estado
Função para alterar a variável
Parâmetro que inicializa a variavel
de estado (opcional)
UseState
●
Criar um contador
●
Criar um botão
●
Fazer um componente com recursos de hooks
state
UseEffect
●
UseEffect permite realizar efeitos colaterais
(side effects) em componentes de função:
– Obtenção de dados data-fetching;
– Mudanças manuais no DOM
– Inclusão de um novo item em uma lista já
renderizada
UseEffect (cont)
●
O useEffect permite fazer as mesmas
operações realizadas pelos lifecycle de class
Assinatura
UseEffect (cont)
Demonstrar na prática o uso do hooks
useEffect para cada lifecycle existente nos
componentes de classe do react.
●
ComponentDidUpdate
●
ComponentDidMount
●
ComponentWillReceiveProps
●
ComponentWillUnMount
USEFFECT
Podemos entregar uma função de retorno ao useEffect
para que ele executar quando terminar seu tempo de vida.
UseContext
https://medium.com/simply/state-management-with-react-hooks-and-context-api-at-10-lines-of-code-baf6be8302c
Gerenciamento de estado
Permite compartilhar dados para filhos
diretamente sem a necessidade de criar props
Assinatura
UseContext (cont)
https://medium.com/simply/state-management-with-react-hooks-and-context-api-at-10-lines-of-code-baf6be8302c
Gerenciamento de estado
UseReducer
Alternativa para useState. Aceita um redutor (state, action) => newState e retorna o
estado atual emparelhado com um metodo dispatch.
●
Usando quando você tem lógica de estado complexo.
Assinatura
Memoization
UseCallback
●
Impede a renderização desnecessária, tornando o codigo mais eficiente.
●
Armazena em cache a instância da função fornecida.
Assinatura
UseCallback (cont)
Vamos para pratica.
Faremos a manipulação do contador para analisar se a
função é criada novamente ou não
UseMemo
●
Armazena o resultado em cache e não a função
●
Útil quando o resultado requer recurso
significativos da máquina. Cada renderização
este calculo se repete
Assinatura
UseMemo
Vamos para prática
Faremos a manipulação de uma conta que demonstra uma simples complexidade
a fim de analisar a vantagem de memoização.
Quando a conta solicitada já está em cache a função não é realizada novamente.
Isto evita processamento desnecessário da máquina
UseRef
●
UseRef retorna um objeto ref mutável cuja
propriedade .current é inicializada para o
argumento passado ( initialValue). O objeto
retornado persistirá durante todo o tempo de vida
do componente.
Assinatura
UseRef (cont)
Vamos para prática
Faremos um exercicio cuja
ideia é pegar o valor de uma
caixa de texto no momento
do evento click de um botão
é imprimir na tela.
forwardRef
●
Transfere o ref para algum filho de um
componente
Assinatura
useImperativeHandle
●
useImperativeHandle personaliza o valor da
instância que está exposta aos componentes
pai ao usar ref
●
Usado com o ForwardRef
useImperativeHandle
UseImperativeHandle
Vamos para prática
●
Criar um componente que tenha um forwardRef
para um componente interno referenciando um
text. Neste componente deve-se usar o hooks
useImperativeHandle para alterar as
propriedade da chave .current do refs.
UseLayoutEffect
●
Mesma assinatura do useEffect, porém é
síncrono.
●
Usado para ler layout do DOM e renderizar
novamente de forma síncrona.
●
As alterações acontecem antes do navegador
“pintar” na tela
Prefira o hooks useEffect quando possível. Isto evita
bloqueios de atualizações visuais
UseLayoutEffect
●
Vamos para pratica
Alterar a propriedade de um elemento do DOM para ver o efeito que causa
usando o Hooks UseEffect e o Hooks UseLayoutEffect
UseDebugValue
●
Usado para exibir um rótulo para ganchos
personalizados no React to DevTools
Assinatura
●
O parâmetro format só é chamado se o gancho for inspecionado no
ReactDevTools e é opcional.
●
Usado para não deixar esta operação cara no lado do hooks personalizado
Testes Unitários no JEST
●
Por simplicidade tanto do que será testado quanto de
configuração da lib, a comunidade está apontando seus
olhos ultimamente para a lib REACT-TESTING-LIBRARY
Não farei um paralelo, mas optarei por mostrar esta já
que também sei que o enzyme já pe de domínio de
vocês.
Testes Unitários no JEST
●
Para testar o render do componente
●
Não precisa de usar lib de apoio

Mais conteúdo relacionado

Mais procurados

Mais procurados (11)

Git flow na prática
Git flow na práticaGit flow na prática
Git flow na prática
 
Coroutines tech summit
Coroutines  tech summitCoroutines  tech summit
Coroutines tech summit
 
Android carregando dados com loaders
Android   carregando dados com loadersAndroid   carregando dados com loaders
Android carregando dados com loaders
 
Gwt
GwtGwt
Gwt
 
Aplicando patches de correção no Magento 2 com composer
Aplicando patches de correção no Magento 2 com composerAplicando patches de correção no Magento 2 com composer
Aplicando patches de correção no Magento 2 com composer
 
Testes Distribuídos com TestComplete v7
Testes Distribuídos com TestComplete v7Testes Distribuídos com TestComplete v7
Testes Distribuídos com TestComplete v7
 
Apresentação Semáforos, monitores, troca de mensagens, Deadlock
Apresentação Semáforos, monitores, troca de mensagens, DeadlockApresentação Semáforos, monitores, troca de mensagens, Deadlock
Apresentação Semáforos, monitores, troca de mensagens, Deadlock
 
Fragmentos
FragmentosFragmentos
Fragmentos
 
Sistemas Operacionais 10 comunicação entre processos
Sistemas Operacionais 10   comunicação entre processosSistemas Operacionais 10   comunicação entre processos
Sistemas Operacionais 10 comunicação entre processos
 
Implementação de Sockets em JAVA
Implementação de Sockets em JAVAImplementação de Sockets em JAVA
Implementação de Sockets em JAVA
 
Git
GitGit
Git
 

Semelhante a Workshop React Hooks

Spring MVC Framework
Spring MVC FrameworkSpring MVC Framework
Spring MVC Framework
elliando dias
 

Semelhante a Workshop React Hooks (20)

Hooks em React: o novo jeito de fazer componentes funcionais
Hooks em React: o novo jeito de fazer componentes funcionaisHooks em React: o novo jeito de fazer componentes funcionais
Hooks em React: o novo jeito de fazer componentes funcionais
 
React Hooks e como adotar
React Hooks e como adotarReact Hooks e como adotar
React Hooks e como adotar
 
Spring & Struts
Spring & StrutsSpring & Struts
Spring & Struts
 
React Hooks
React HooksReact Hooks
React Hooks
 
Rapid Application Development com Tapestry 5
Rapid Application Development com Tapestry 5Rapid Application Development com Tapestry 5
Rapid Application Development com Tapestry 5
 
Curso de ReactJS
Curso de ReactJSCurso de ReactJS
Curso de ReactJS
 
Hello ReactJs
Hello ReactJsHello ReactJs
Hello ReactJs
 
Projetos reativos com Angular, RxJS e Redux (ngRx)
Projetos reativos com Angular, RxJS e Redux (ngRx)Projetos reativos com Angular, RxJS e Redux (ngRx)
Projetos reativos com Angular, RxJS e Redux (ngRx)
 
Spring MVC Framework
Spring MVC FrameworkSpring MVC Framework
Spring MVC Framework
 
Aop Aspect J 1.5.4
Aop Aspect J 1.5.4Aop Aspect J 1.5.4
Aop Aspect J 1.5.4
 
React js
React js React js
React js
 
Introdução ao vraptor
Introdução ao vraptorIntrodução ao vraptor
Introdução ao vraptor
 
ASP.NET 5 - Novidades do Desenvolvimento Web em .NET
ASP.NET 5 - Novidades do Desenvolvimento Web em .NETASP.NET 5 - Novidades do Desenvolvimento Web em .NET
ASP.NET 5 - Novidades do Desenvolvimento Web em .NET
 
Java memory model primary ref. - faq
Java memory model   primary ref. - faqJava memory model   primary ref. - faq
Java memory model primary ref. - faq
 
Sap
SapSap
Sap
 
Padrões de Projeto para Jogos
Padrões de Projeto para JogosPadrões de Projeto para Jogos
Padrões de Projeto para Jogos
 
Dicas para migrar sua aplicação ASP.NET para ASP.NET Core 2.x
Dicas para migrar sua aplicação ASP.NET para ASP.NET Core 2.xDicas para migrar sua aplicação ASP.NET para ASP.NET Core 2.x
Dicas para migrar sua aplicação ASP.NET para ASP.NET Core 2.x
 
Testando Rails apps com RSpec
Testando Rails apps com RSpecTestando Rails apps com RSpec
Testando Rails apps com RSpec
 
Começando com React.js
Começando com React.jsComeçando com React.js
Começando com React.js
 
Introducao a refatoracao
Introducao a refatoracaoIntroducao a refatoracao
Introducao a refatoracao
 

Mais de Dan Vitoriano

Mais de Dan Vitoriano (20)

Node.js e Express
Node.js e ExpressNode.js e Express
Node.js e Express
 
AMP Roadshow SP 2019 - Web Apps Modernas
AMP Roadshow SP 2019 - Web Apps ModernasAMP Roadshow SP 2019 - Web Apps Modernas
AMP Roadshow SP 2019 - Web Apps Modernas
 
JavaScript das Ruas
JavaScript das RuasJavaScript das Ruas
JavaScript das Ruas
 
CSS in JS - Escrevendo CSS no JavaScript - Dan Vitoriano
CSS in JS - Escrevendo CSS no JavaScript - Dan VitorianoCSS in JS - Escrevendo CSS no JavaScript - Dan Vitoriano
CSS in JS - Escrevendo CSS no JavaScript - Dan Vitoriano
 
Times digitais de alta performance - Tera e Endeavor
Times digitais de alta performance - Tera e EndeavorTimes digitais de alta performance - Tera e Endeavor
Times digitais de alta performance - Tera e Endeavor
 
GraphQL - A Graph Query Language to your API
GraphQL - A Graph Query Language to your APIGraphQL - A Graph Query Language to your API
GraphQL - A Graph Query Language to your API
 
Mobile First e Offline First
Mobile First e Offline FirstMobile First e Offline First
Mobile First e Offline First
 
React Native
React NativeReact Native
React Native
 
Pdsp #3
Pdsp #3Pdsp #3
Pdsp #3
 
Pdsp #2
Pdsp #2Pdsp #2
Pdsp #2
 
Meetup Processos de Desenvolvimento São Paulo - Gamestorming
Meetup Processos de Desenvolvimento São Paulo - GamestormingMeetup Processos de Desenvolvimento São Paulo - Gamestorming
Meetup Processos de Desenvolvimento São Paulo - Gamestorming
 
Unit Test JavaScript
Unit Test JavaScriptUnit Test JavaScript
Unit Test JavaScript
 
Untraceable electronic mail, return addresses and digital pseudonyms - David ...
Untraceable electronic mail, return addresses and digital pseudonyms - David ...Untraceable electronic mail, return addresses and digital pseudonyms - David ...
Untraceable electronic mail, return addresses and digital pseudonyms - David ...
 
The computer for the 21st century - Mark Weiser, 1991
The computer for the 21st century - Mark Weiser, 1991The computer for the 21st century - Mark Weiser, 1991
The computer for the 21st century - Mark Weiser, 1991
 
Especificações UX/UI CMA Tablet
Especificações UX/UI CMA TabletEspecificações UX/UI CMA Tablet
Especificações UX/UI CMA Tablet
 
User experience guidelines for Universal Windows Platform (UWP) appsUwp app d...
User experience guidelines for Universal Windows Platform (UWP) appsUwp app d...User experience guidelines for Universal Windows Platform (UWP) appsUwp app d...
User experience guidelines for Universal Windows Platform (UWP) appsUwp app d...
 
Fullcircle papers - Sobre Blogs
Fullcircle papers - Sobre BlogsFullcircle papers - Sobre Blogs
Fullcircle papers - Sobre Blogs
 
Apresentação FEMUG-ABC
Apresentação FEMUG-ABCApresentação FEMUG-ABC
Apresentação FEMUG-ABC
 
Planejamento estratégico de comunicação digital - Dados sobre internet e mobi...
Planejamento estratégico de comunicação digital - Dados sobre internet e mobi...Planejamento estratégico de comunicação digital - Dados sobre internet e mobi...
Planejamento estratégico de comunicação digital - Dados sobre internet e mobi...
 
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web componentsGoogle Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
 

Workshop React Hooks