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
The How and Why of Flexible React Components
Search
Jenn Creighton
October 05, 2018
Technology
0
170
The How and Why of Flexible React Components
Jenn Creighton
October 05, 2018
Tweet
Share
More Decks by Jenn Creighton
See All by Jenn Creighton
Understanding Iterators & Iterables in JavaScript
jenncreighton
0
120
Everything I Know About React I Learned From Twitter
jenncreighton
0
1.1k
React 16, the future & you (December 4, 2018)
jenncreighton
1
170
The how and why of flexible React components
jenncreighton
7
4.2k
React 16, the future & you
jenncreighton
0
190
Other Decks in Technology
See All in Technology
От ручной разметки к LLM: как мы создавали облако тегов в Lamoda. Анастасия Ангелова, Data Scientist, Lamoda Tech
lamodatech
0
840
OpenLane-V2ベンチマークと代表的な手法
kzykmyzw
0
120
SREからゼロイチプロダクト開発へ ー越境する打席の立ち方と期待への応え方ー / Product Engineering Night #8
itkq
2
1.1k
Making a MIDI controller device with PicoRuby/R2P2 (RubyKaigi 2025 LT)
risgk
1
350
SnowflakeとDatabricks両方でRAGを構築してみた
kameitomohiro
1
520
watsonx.data上のベクトル・データベース Milvusを見てみよう/20250418-milvus-dojo
mayumihirano
0
170
今日からはじめるプラットフォームエンジニアリング
jacopen
8
1.8k
Goの組織でバックエンドTypeScriptを採用してどうだったか / How was adopting backend TypeScript in a Golang company
kaminashi
12
8.9k
AIでめっちゃ便利になったけど、結局みんなで学ぶよねっていう話
kakehashi
PRO
1
460
2025-04-14 Data & Analytics 井戸端会議 Multi tenant log platform with Iceberg
kamijin_fanta
0
140
ガバクラのAWS長期継続割引 ~次の4/1に慌てないために~
hamijay_cloud
1
530
【Λ(らむだ)】最近のアプデ情報 / RPALT20250422
lambda
0
130
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Scaling GitHub
holman
459
140k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
We Have a Design System, Now What?
morganepeng
52
7.5k
Gamification - CAS2011
davidbonilla
81
5.2k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
119
51k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
Transcript
The how and why of flexible React components THE HOW
AND WHY OF FLEXIBLE REACT COMPONENTS
Hi! I’m Jenn. Senior Frontend Engineer, ClassPass @gurlcode
@gurlcode
flexible @gurlcode
@gurlcode
@gurlcode
with Tooltip withTooltip @gurlcode
with Tooltip with Dot withTooltip withDot @gurlcode
with Tooltip with Dot with Modal withDot withModal withTooltip @gurlcode
<BlockComponent className=“block block-md block—orange” message={message} withTooltip={false} withModal modalProps={modalProps} userId={userId} userName={userName}
withDot={false} experimentRunning experimentId={experimentId} colorChange={false} showMessageOnLoad onModalClose={() => {}} hasRoundedCorners withAnalytics analyticsProps={analyticsProps} /> BEWARE THE APROPSCALYPSE <BlockComponent className=“block block—md block—orange” withTooltip={false} withDot={false} withModal modalProps={modalProps} onModalClose={onModalClose} onMouseOver={onMouseOver} withExperiment experimentId={experimentId} userName={userName} userId={userId} analyticsProps={analyticsProps} roundedCorners /> @gurlcode
@gurlcode
@gurlcode
You have another reservation at this time. @gurlcode
Is the user logged in? State of subscription? Join State
of class? Reactivate Reserve Cancel Disabled Join yes no cancelled subscribed unsubscribed available unavailable reserved @gurlcode
None
@gurlcode
reusable !== flexible @gurlcode
Flexibility is about more than reusability. It’s about the ability
understand and augment. @gurlcode
@gurlcode
@gurlcode
<ScheduleCta type={?} /> @gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
Keep business logic out of your components. @gurlcode
@gurlcode
Centralized logic is easier to reason about @gurlcode
Test the component separate from the logic @gurlcode
@gurlcode
<ScheduleCta type={?} /> @gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
None
None
None
@gurlcode
@gurlcode
None
@gurlcode
@gurlcode
@gurlcode
@gurlcode
<ScheduleCta type={?} /> @gurlcode
components[type] @gurlcode
components = { reserve: ReserveCta, join: JoinCta, cancel: CancelCta, disable:
DisableCta, reactivate: ReactivateCta } @gurlcode
const Component = components[type]; @gurlcode
const Component =`${left || right}Sidebar`; @gurlcode
const Component = props.isCard ? ( <Card> <Content /> </Card>
) : (<Content />); @gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
<ScheduleCta type={?} className=“” />
@gurlcode
Decreased prop complexity Use whatever logic we want Use individual
CTAs alone Add & remove CTAs with ease Use whatever logic we want Use individual CTAs alone Add & remove CTAs with ease @gurlcode
CTAs added and removed for A/B tests Removing Disable CTA
on some pages Classnames changed Messaging changed for ReserveCta Ask for specific CTA on specific page @gurlcode
Hmm… @gurlcode
Render Props* *children as a function @gurlcode
… so what if children were a function? @gurlcode
@gurlcode
? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ?? ?? ?? ? ? ?? ? ? ? ? ?? @gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
Render Props === state delegate children function === UI handler
@gurlcode
https://reactjs.org/docs/render-props.html https://github.com/paypal/downshift @gurlcode
@gurlcode
you === flexible @gurlcode
@gurlcode
Know your traps. @gurlcode
Kill your darlings. @gurlcode
Start with the ideal API Let the API inform the
component design Decide what level of magic you want Business logic does not belong in components Render Props is awesome (use it!) Be flexible as an engineer (know your traps, kill your darlings) @gurlcode
Thank you! Content by Jenn Creighton Illustrations by Janny Ji
(jannyji.com) @gurlcode