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
99
TypeScript: Introdução ao superset para devs JavaScript
mechamobau
0
70
Introdução ao GraphQL
mechamobau
0
95
GraphQL Intro
mechamobau
0
130
TypeScript: Introdução ao superset para devs JavaScript
mechamobau
0
130
Web Servers, Load Balancers e Proxies Reversos.
mechamobau
0
78
tRPC: Tipando seus endpoints sem GraphQL
mechamobau
0
93
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
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
110
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
160
品質ワークショップをやってみた
nealle
0
210
開発生産性を上げるための生成AI活用術
starfish719
3
980
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
510
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
220
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2.5k
CSC509 Lecture 05
javiergs
PRO
0
300
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
390
Six and a half ridiculous things to do with Quarkus
hollycummins
0
170
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
1k
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
120
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Embracing the Ebb and Flow
colly
88
4.8k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
For a Future-Friendly Web
brad_frost
180
9.9k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Visualization
eitanlees
149
16k
Producing Creativity
orderedlist
PRO
347
40k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Testing 201, or: Great Expectations
jmmastey
45
7.7k
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