Design Patterns


Some stuff to note

Most of these patterns work best for uncontrolled components

Will mostly be from a component library (Sleek) stand-point

Kent C Dodd's React Patterns workshop

Higher Order Components

When to use

Common functionality / repeated code

Augmentation purposes

Provider Pattern

When to use


Based on React's new context API

Provider  + HOC = ❤️

Compound Components

When to use

Associated components that should / can not exist independently 

Semantically link components

Provide users with a simple API, while wiring in all implementation details under the hood.

Flexible Compound Components

When to use

Provide users with rendering control.

Circumvents the React.cloneElement issue with compound components

Render Props

When to use

Complete render control to the user

Sharing (cross-cutting) state between components

Simplified API with internal wiring

Prop Collections

(with Render Props)

When to use

Abstract away props that are crucial for internal logic

Make the user do less. 🤓

Prop Getters

(with Render Props)

When to use

Fixes the prop override issue with Prop Collections

Coupling logic and massaging is now controlled by the developer of the component

State Initializers

(with Render Props)

When to use

Maintain internal state (when component is uncontrolled.)

Provide users with helper functions to handle internal state

State Reducers

When to use

Logic / state updation control

Prevents overloaded functionality.

Prevents the need for exhaustive props.

That's all folks! 🚀

Made with