The How and Why of Flexible React Components

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

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

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

@gurlcode

reusable !== flexible @gurlcode

Flexibility is about more than reusability. It’s about the ability
understand and augment. @gurlcode

@gurlcode

<ScheduleCta type={?} /> @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

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

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 speciﬁc CTA on speciﬁc page @gurlcode

Hmm… @gurlcode

Render Props* *children as a function @gurlcode

… so what if children were a function? @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 === ﬂexible @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 ﬂexible as an engineer (know your traps, kill your darlings) @gurlcode

Thank you! Content by Jenn Creighton Illustrations by Janny Ji
(jannyji.com) @gurlcode

The How and Why of Flexible React Components

The How and Why of Flexible React Components

More Decks by Jenn Creighton

Other Decks in Technology

Featured

Transcript