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
120
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
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
CSC509 Lecture 02
javiergs
PRO
0
410
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
970
Flutterで分数(Fraction)を表示する方法
koukimiura
0
120
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
0
130
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
110
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
160
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
630
CSC509 Lecture 01
javiergs
PRO
1
440
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
250
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
130
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
10
6.4k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Speed Design
sergeychernyshev
32
1.1k
We Have a Design System, Now What?
morganepeng
53
7.8k
Why Our Code Smells
bkeepers
PRO
339
57k
Documentation Writing (for coders)
carmenintech
75
5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
Bash Introduction
62gerente
615
210k
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