DevConf 2020 - Conhecendo React Hooks- Yanka Santos

Eu preparei essa palestra para compartilhar com o pessoal sobre as principais funcionalidades do React Hooks, entendendo um pouco o que diz a documentação do React.

Transcript

1. Conhecendo React Hooks Yanka Santos
2. Yanka Santos | Front-End Developer Recifense, de 23 anos. Atua na área de TI a desde 2015, já trabalhou em empresas como Avanade e Vectra Consultoria e serviços. Palestrou em eventos como TDC Recife e DevFest, organiza o meetup Geek Night Recife e é co-host no podcast DoPortoAoVale(hospedado no soundclound).
3. Já ouviram falar em React? ???
4. Já ouviram falar em React? React é uma biblioteca JavaScript para construção de interfaces de usuário.
5. O que é React Hooks? Hooks são funções que permitem a você “ligar-se” aos recursos de estado e ciclo de vida do React a partir de componentes funcionais. Hooks não funcionam dentro de classes — eles permitem que você use React sem classes.
7. React anteriormente manipulava o estado através de classes e agora é permitido fazer isso utilização de funções
8. Comparando a mesma funcionalidade utilizando Classes e Hooks com o useState
9. React anteriormente manipulava o estado através de classes e agora é permitido fazer isso utilização de funções Trecho retirado da documentação do React
10. UseState É um Hook que te permite adicionar o state do React a um componente de função.
11. Comparando a mesma funcionalidade utilizando Classes e Hooks com o useState
12. UseEffect O Hook de Efeito, useEffect, adiciona a funcionalidade de executar efeitos colaterais através de um componente funcional. Segue a mesma finalidade do componentDidMount, componentDidUpdate, e componentWillUnmount em classes React, mas unificado em uma mesma API.
13. Usando esse useEffect, você diz ao React que o componente precisa fazer algo apenas depois da renderização. O React irá se lembrar da função que você passou (nos referiremos a ele como nosso “efeito”), e chamá-la depois que realizar as atualizações do DOM. Nesse efeito, mudamos o título do documento, mas podemos também realizar busca de dados ou chamar alguma API imperativa.
14. UseReducer É geralmente preferível em relação ao useState quando se tem uma lógica de estado complexa que envolve múltiplos sub-valores, ou quando o próximo estado depende do estado anterior. useReducer também possibilita a otimização da performance de componentes que disparam atualizações profundas
15. Outros Hooks que é importante vocês conhecerem: • UseContext • UseHistory • UseCallback • UseRef • UseLayoutEffect • UseImperativeHandler
16. Fonte de Estudo • Documentação React • UseRef Video • UReact Hooks na prática video • UUseEffect Video • React Conf - React Today and Tomorrow and 90% Cleaner React With Hooks • Introdução ao React Hooks - Medium • React Use (vários exemplos de Hooks)
17. Obrigada! Email: yankasantos0107@gmail.com Github: www.github.com/yankasantos Linkedin:www.linkedin.com/in/yankasantos;