Get hooked: O estado do React em 2019

Esta é uma apresentação das atualizações do React para 2019, com novidades e como aplicá-las atualmente, tendo como foco React Hooks.

Transcript

1. Get hooked: O estado do React em 2019 Hillary Sousa
2. Uma visão geral do React
3. 3 Uma visão geral do React Baseado em componentes Open Source Retrocompatível Escalável É a biblioteca mais popular da atualidade, com mais de 22 milhões de downloads no último mês no NPM. É Utilizado em diversos sites de alto tráfego, como The New York Times, Twitter, Netflix, MDN e nos sites da B2W Digital.
4. 4 Uma visão geral do React
5. Updates 2018/2019
6. Permite fazer uma espécie de lazy loading de componentes, reduzindo o tamanho do bundle e melhorando a performance. const OutroComponente = React.lazy(() => import('../OutroComponente')); function MeuComponente() { return ( <React.Suspense fallback={<Spinner />}> <div> <OutroComponente /> </div> </React.Suspense> ) } Code Splitting com Suspense e Lazy Updates 2018/2019
7. Concurrent mode (ou concurrent rendering) permite ao React ser mais autônomo no carregamento de componentes em um app, renderizando componentes sem bloquear a main thread de acordo com a sua prioridade. <React.unstable_ConcurrentMode> <Componente /> </React.unstable_ConcurrentMode> // ----- // ReactDOM.unstable_createRoot(domNode).render(<App />); Concurrent mode Updates 2018/2019
8. React Hooks
9. Hooks são uma nova funcionalidade do React que permitem o uso de recursos como o estado (state) fora de classes (class), sendo assim possível o seu uso em componentes funcionais (functions). É possível também criar seus próprios hooks, aumentando a escalabilidade e reutilização de código. Está disponível para uso a partir da versão 16.8, e estará também disponível no React Native a partir da versão 0.59. 9 React Hooks
10. O hook useState permite o uso do estado em componentes funcionais. Somente o estado inicial é necessário. Este hook pode ser chamado mais de uma vez na função, entretanto só pode ser usado no início do arquivo. import React, { useState } from "react"; function Exemplo() { const [contador, contar] = useState(0); return ( <div> <h1>Com Hook</h1> <p>Você clicou {contador} vezes</p> <button onClick={() => contar(contador + 1)}>Clique-me</button> </div> ); } useState React Hooks
11. 11 State com class component
12. 12 State com hooks
13. O hook useEffect funciona como os métodos componentDidMount, componentDidUpdate e componentWillUnmount. É executado logo após o render, incluindo o primeiro. Também possui uma maneira de “limpar” as mudanças após a execução, utilizando return. function Exemplo() { const [contador, contar] = useState(0); useEffect(() => { document.title = `Você clicou ${contador} vezes`; }); return ( <div> <p>Você clicou {contador} vezes</p> <button onClick={() => contar(contador + 1)}>Clique-me</button> </div> ); } useEffect React Hooks
14. 14 Effect com class component
15. 15 Effect com hooks
16. O hook useReducer é uma alternativa ao useState. Ele aceita como parâmetros um reducer do tipo (estado, ação) => novoEstado e um método de dispatch. Seu uso é mais indicado quando se tem uma lógica de estado mais complexa. function Exemplo() { const [estado, dispatch] = useReducer(reducer, estadoInicio); return ( <div> Contador: {estado.contador} <div> <button onClick={() => dispatch({ tipo: "incremento" })}>+</button> <button onClick={() => dispatch({ tipo: "decremento" })}>-</button> </div> </div> ); } useReducer React Hooks
17. 17 useReducer
18. Outros hooks interessantes
19. 1 Outros hooks interessantes
20. Este hook sincroniza o LocalStorage com o estado, para que este persista em um refresh da página. Seu uso é similar ao useState, porém o primeiro argumento é a chave do valor no localStorage. function Exemplo() { const [nome, setarNome] = useLocalStorage("nome", "Bob"); return ( <div> <label>Nome:</label> <input type="text" placeholder="Digite seu nome" value={nome} onChange={e => setarNome(e.target.value)} /> </div> ); } useLocalStorage Outros hooks interessantes
21. 21 useLocalStorage
22. Este hook facilita a detecção de uma tecla específica pressionada pelo usuário. function Exemplo() { const feliz = useKeyPress("f"); return ( <div className="label"> <Label valor="f" negrito={feliz} /> <div className="emoji"> {feliz && ""} </div> </div> ); } useKeyPress Outros hooks interessantes
23. 23 useKeyPress
24. Perguntas?
25. 25 Fica, temos vagas! • Desenvolvedor Front-End • Desenvolvedor Back-End • Analista de BI • Cientista de Dados • DevOps E muito mais! Vagas na B2W b2w.gupy.io Vagas no meu time ;) b2w.gupy.io/jobs/34968
26. 26 Obrigada! Me encontre nas redes: github.com/hillarysousa linkedin.com/in/hillarysousa hillarysousa.com speakerdeck.com/hillarysousa