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
68
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
62
Other Decks in Programming
See All in Programming
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.7k
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
410
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
testingを眺める
matumoto
1
140
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
480
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
230
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
460
AWS発のAIエディタKiroを使ってみた
iriikeita
1
180
1から理解するWeb Push
dora1998
7
1.8k
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
0
170
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
300
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
430
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Producing Creativity
orderedlist
PRO
347
40k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Visualization
eitanlees
148
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Navigating Team Friction
lara
189
15k
Balancing Empowerment & Direction
lara
3
620
For a Future-Friendly Web
brad_frost
180
9.9k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
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