Você já conhece os Hooks do React?
Os Hooks foram adicionados na versão 16.8 da biblioteca e vieram para melhorar o reaproveitamento de lógica (com estado) e a escrita dos componentes React, com eles é possível usar funções do React como o state sem o uso de classes (em componentes funcionais).
Neste Screencast você vai aprender porque esse recurso é realmente importante e como utiliza-lo para melhorar a escrita dos seus componentes React, então vem com a gente 😀
Exemplos apresentados no Screencast
No Screencast eu explico dois exemplos bem claros do uso dos Hooks que podem ser encontrados na documentação oficial do React.
1 – No primeiro, usando o Hook State nós convertemos esse componente de classe:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( <div> <p>You clicked {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div> ); } } |
Neste componente funcional mais simples:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } |
2 – No segundo, usando o Hook State e o Hook Effect convertemos esse componente de classe:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } componentDidMount() { document.title = `You clicked ${this.state.count} times`; } componentDidUpdate() { document.title = `You clicked ${this.state.count} times`; } render() { return ( <div> <p>You clicked {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div> ); } } |
Neste componente funcional:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } |
Para ver todos os exemplos e explicações detalhadas, vale a pena acessar a excelente documentação do React sobre os Hooks Clicando aqui.
Esse Screencast faz parte da série React em 8 minutos da Escola de Javascript, nesta série nós queremos trazer conteúdos de qualidade em poucos minutos para você.
Se você curtiu o tutorial deixa um comentário dizendo quais temas nós devemos abordar nos próximos episódios da série, também compartilha esse link com seus(uas) amigos(as), tenho certeza que eles(as) vão curtir se aprofundar mais no mundo React.
Também não se esqueça de visitar o nosso tutorial sobre React Native, nele falamos sobre como criar um APP que extrai textos de imagens usando OCR 😀💪
Grande abraço,
Leonardo Scorza
Quer se tornar um Programador Full Stack Javascript em 8 semanas? 😀
Nós desenvolvemos um treinamento completo onde você vai aprender desde a base da Web (HTML5, CSS, Bulma,
Javascript e Es6+) até React e ExpressJs totalmente do zero!
Nele você também vai desenvolver um projeto do inicio até o Deploy (clone do Evernote) e irá
aprender como conseguir as melhores vagas no módulo carreira de Programador.
Se você não quer mais perder oportunidades, clique aqui e saiba mais 💪
Legal. Tem algum vídeo sobre useReff e useContext?