Abinav Seelan
UI Engineer @Flipkart • Ex @hashnode & @SaltsideTech • Javascript Junkie & Pokemon League Champion from India. https://abinavseelan.com 🙃
Design Patterns
@abinavseelan
Some stuff to note
Most of these patterns work best for uncontrolled components
Will mostly be from a component library (Sleek) stand-point
Repository Link: http://bit.ly/fk-ks-react-design-patterns
Kent C Dodd's React Patterns workshop
Higher Order Components
When to use
Common functionality / repeated code
Augmentation purposes
Provider Pattern
When to use
Prop-drilling
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! 🚀
React Design Patterns
By Abinav Seelan
React Design Patterns
Slides for the session on React Design Patterns held on 5th November, 2018 at Flipkart.
