The How and Why of Flexible React Components

THE HOW AND WHY The how and why of flexible OF FLEXIBLE REACT React components COMPONENTS

Hi! I’m Jenn. Senior Frontend Engineer, ClassPass @gurlcode

@gurlcode

flexible @gurlcode

@gurlcode

with Tooltip withTooltip @gurlcode

withDot with Dot with Tooltip withTooltip @gurlcode

with Modal withModal withDot with Dot with Tooltip withTooltip @gurlcode

<BlockComponent <BlockComponent className=“block block—md block—orange” className=“block block-md block—orange” withTooltip={false} message={message} withDot={false} withTooltip={false} withModal withModal modalProps={modalProps} modalProps={modalProps} userId={userId} onModalClose={onModalClose} userName={userName} withDot={false} onMouseOver={onMouseOver} experimentRunning experimentId={experimentId} withExperiment colorChange={false} experimentId={experimentId} showMessageOnLoad onModalClose={() => {}} userName={userName} hasRoundedCorners userId={userId} withAnalytics analyticsProps={analyticsProps} analyticsProps={analyticsProps} /> roundedCorners /> BEWARE THE APROPSCALYPSE @gurlcode

@gurlcode

You have another reservation at this time. @gurlcode

Is the user logged in? yes no State of subscription? unsubscribed Join cancelled Reactivate subscribed Join State of class? available unavailable reserved Reserve Disabled Cancel @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

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

Decreased prop complexity Use whatever logic we want Use whatever logic we want Use individual CTAs alone Use&individual CTAswith alone Add remove CTAs ease 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

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