Back to Cheatsheets
React

React Patterns

Common design patterns in React

Component Organization

3 items
CommandDescription
Container / Presentational
Logic vs UI separation
Composition
Combine small components
Custom Hooks
Extract reusable logic

HOCs & Render Props

2 items
CommandDescription
withAuth(Component)
Higher-Order Component
<List renderItem={item => <Item />} />
Render Prop

Compound Components

2 items
CommandDescription
<Menu><Menu.Item /></Menu>
Implicit state sharing
React.Children.map
Manipulate children