Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introdução a programação funcional em React ⚛️
Search
Lucas Viana
February 15, 2020
Programming
1
160
Introdução a programação funcional em React ⚛️
Apresentação sobre conceitos de programação funcional e utilização com a biblioteca React
Lucas Viana
February 15, 2020
Tweet
Share
More Decks by Lucas Viana
See All by Lucas Viana
Introdução a Microfrontends
mechamobau
0
64
TypeScript: Introdução ao superset para devs JavaScript
mechamobau
0
42
Introdução ao GraphQL
mechamobau
0
55
GraphQL Intro
mechamobau
0
95
TypeScript: Introdução ao superset para devs JavaScript
mechamobau
0
88
Web Servers, Load Balancers e Proxies Reversos.
mechamobau
0
57
tRPC: Tipando seus endpoints sem GraphQL
mechamobau
0
69
Mantendo pacotes em um mono-repositório JavaScript
mechamobau
0
98
Tipos Genéricos em TypeScript: Boas práticas para escrever tipos fortes em seu código
mechamobau
0
46
Other Decks in Programming
See All in Programming
ECS向けのドリフト検知機構を実装してみた
tkikuc
0
250
Modernisation Progressive d’Applications PHP
hhamon
0
160
全方位強化 Python 服務可觀測性:以 FastAPI 和 Grafana Stack 為例
blueswen
1
360
NANIMACHI
naokiito
0
920
Removing Corepack
yosuke_furukawa
PRO
9
960
CSC509 Lecture 02
javiergs
PRO
0
140
RemixとCloudflare Stack におけるFile Upload
ossamoon
1
120
コードレビューと私の過去と未来
jxmtst
0
110
タイミーにおけるデータの利用シーンと データ基盤の挑戦
marufeuille
4
3k
C#および.NETに対する誤解をひも解く
ymd65536
0
180
So you want to write a User-Defined Function for Flink? @ Current 2024 - Austin, TX
hpgrahsl
0
110
App Router 悲喜交々
quramy
7
360
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
65
9.9k
Being A Developer After 40
akosma
84
590k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
40
9.2k
Speed Design
sergeychernyshev
22
460
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
3
77
The Straight Up "How To Draw Better" Workshop
denniskardys
231
130k
RailsConf 2023
tenderlove
28
830
GraphQLとの向き合い方2022年版
quramy
43
13k
Learning to Love Humans: Emotional Interface Design
aarron
271
40k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Transcript
Introdução a funcional em react Utilizando os conceitos de programação
funcional no dia a dia
Quem sou eu? Engenheiro Front-end na Linte Sistemas para Internet
Caiçara blog.lucasviana.dev/ @mechamobau
Agradecimento especial Essa talk foi inspirada em: Por que dar
uma chance a programação funcional com TypeScript? Vitor Luiz Cavalcanti @VitorLuizC Apoio e revisão técnica
Pra quê funcional?
Fp é hipster
fp é da modinha
fp é hype
agora sério...
+ Declarativa - Imperativa
+ declarativa - imperativa
+ declarativa - imperativa
+ declarativa - imperativa - Clareza na lógica - Facilidade
de escrita - Menos possibilidade de falha
funções puras
"Uma função pura, é aquela dada um mesmo valor de
entrada, vai sempre retornar o mesmo valor de saída, sem efeitos colaterais."
Fonte: Mostly adequate guide to FP - professor Frisby
funções puras - Não possuem dependência de dados - Não
fazem I/O - Não produzem efeitos colaterais - Reusabilidade
Cidadãos de primeira classe
Cidadãos de primeira classe - Podem ser armazenados dentro de
variáveis - Podem ser recebidos como parâmetros - Podem ser retornados por outras funções
currying
Dada uma função f do tipo f: (X x Y)
→ Z, a técnica de currying pode transformar a expressão em curry (f): → (Y → Z)
currying - Reaproveitamento de código - Currying implícito - Código
legível, elegante e conciso
certo… mas e o react?
react não é funcional
fp react imutabilidade mutabilidade
Pra quê funcional?
FP em JS: bibliotecas - FP/TS - Ramda.js
HOCs + FP = ❤
HOCs + FP = ❤
HOCs + FP = ❤
hooks ⚛
mas antes...
Componentes react Existem duas formas de se criar um componente
em React Class Components Functional Components
Fonte: https://www.codevoila.com/post/57/reactjs-tutorial-react-component-lifecycle class components
- Na versão 16.3, não é obrigado usar o alias
- Na versão 16.4, warnings foram adicionados - A partir da versão 17 os métodos serão removidos class components
- Confusos (uso excessivo de binds com "this") - A
lógica do componente se divide muito nos métodos de ciclo de vida - > Tamanho de bundle class components
functional components - Antes usados apenas para exibição de dados
- A partir da versão 16.8 ganharam bastante tração
Hooks hooks ⚛
- Adicionam uma nova camada nos componentes funcionais - Muito
interessantes para abrigar regras de negócio - Possibilidade no uso de conceitos funcionais hooks ⚛
hooks ⚛
Recap Funções puras - Fáceis de escrever - Fáceis de
ler - Fáceis de testar - Muito reutilizáveis Fácil manutenção Componentes Funcionais - Remoção do uso de contexto - Alguns conceitos funcionais - Hooks ❤ Hooks - Escrita de lógica sem JSX - Mais poder ao componente funcional