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
220
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
98
TypeScript: Introdução ao superset para devs JavaScript
mechamobau
0
69
Introdução ao GraphQL
mechamobau
0
94
GraphQL Intro
mechamobau
0
120
TypeScript: Introdução ao superset para devs JavaScript
mechamobau
0
130
Web Servers, Load Balancers e Proxies Reversos.
mechamobau
0
77
tRPC: Tipando seus endpoints sem GraphQL
mechamobau
0
90
Mantendo pacotes em um mono-repositório JavaScript
mechamobau
0
140
Tipos Genéricos em TypeScript: Boas práticas para escrever tipos fortes em seu código
mechamobau
0
63
Other Decks in Programming
See All in Programming
Ruby Parser progress report 2025
yui_knk
1
440
Cache Me If You Can
ryunen344
2
720
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
510
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
430
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
1
220
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
Improving my own Ruby thereafter
sisshiki1969
1
160
AIでLINEスタンプを作ってみた
eycjur
1
230
速いWebフレームワークを作る
yusukebe
5
1.7k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Become a Pro
speakerdeck
PRO
29
5.5k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Facilitating Awesome Meetings
lara
55
6.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Context Engineering - Making Every Token Count
addyosmani
2
41
Embracing the Ebb and Flow
colly
87
4.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
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