React Bits A compilation of React Patterns, techniques, tips and tricks. Your contributions are heartily ♡ welcome. (✿◠‿◠) Table of Contents Design Patterns and Techniques Anti-Patterns Handling UX Variations Conventions Perf Tips Styling Gotchas Design Patterns and Techniques Stateless Functions JSX Spread Attributes Destructuring Arguments Conditional Rendering Children Types Array As Children Function As Children Render Callback Children Pass Through Proxy Component Style Component Event Switch Layout Component Container Component Higher Order Component State Hoisting Controlled-Uncontrolled Input Conditionals In JSX Async Nature Of setState() Dependency Injection Context Wrapper Event Handlers Flux Pattern One Way Data Flow Presentational vs Container Third Party Integration Passing Function To setState() Decorators Feature Flags Component Switch Reaching Into A Component List Components Format Text via Component Share Tracking Logic Anti-Patterns Props In Initial State Refs over findDOMNode() HOC over Mixins setState() in componentWillMount() Mutating State Using Indexes as Key Spreading Props on DOM elements Handling UX Variations Composing UX Variations Toggle UI Elements HOC for Feature Toggles HOC for Props Proxy Wrapper Components Display Order Variations Conventions Class Organization Adding Class Names Computed Props and State Cached variables in render() Using HTML Entities Tables Inline List Iteration Closures in render() Functional Components Formatting Props ES6 class constructor super() Perf Tips shouldComponentUpdate() check Using recompose Using reselect Styling Stateless UI Components Styles Module Style Functions NPM Modules Base Component Layout Component Typography Component HOC for Styling Gotchas Pure render checks Synthetic Events References Here are a few great resources: React in Patterns by krasimir React Patterns by planningcenter reactpatterns.com 10 React Mini-patterns License MIT