# react-bits

**Repository Path**: mirrors_clauderic/react-bits

## Basic Information

- **Project Name**: react-bits
- **Description**: ✨ React patterns, techniques, tips and tricks ✨
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-24
- **Last Updated**: 2026-08-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React Bits

A compilation of React Patterns, techniques, tips and tricks.

> Your contributions are heartily ♡ welcome. (✿◠‿◠)

---

## Table of Contents

- [Design Patterns and Techniques](#design-patterns-and-techniques)

- [Anti-Patterns](#anti-patterns)

- [Handling UX Variations](#handling-ux-variations)

- [Conventions](#conventions)

- [Perf Tips](#perf-tips)

- [Styling](#styling)

- [Gotchas](#gotchas)

## [Design Patterns and Techniques](#design-patterns-and-techniques)

- [Stateless Functions](./01.stateless-functions.jsx)

- [JSX Spread Attributes](./02.jsx-spread-attributes.jsx)

- [Destructuring Arguments](./03.destructuring-arguments.jsx)

- [Conditional Rendering](./04.conditional-rendering.jsx)

- [Children Types](./05.children-types.jsx)

- [Array As Children](./06.array-as-children.jsx)

- [Function As Children](./07.function-as-children.jsx)

- [Render Callback](./08.render-callback.jsx)

- [Children Pass Through](./09.children-pass-through.jsx)

- [Proxy Component](./10.proxy-component.jsx)

- [Style Component](./11.style-component.jsx)

- [Event Switch](./12.event-switch.jsx)

- [Layout Component](./13.layout-container.jsx)

- [Container Component](./14.container-component.jsx)

- [Higher Order Component](./15.higher-order-component.jsx)

- [State Hoisting](./16.state-hoisting.jsx)

- [Controlled-Uncontrolled Input](./17.controlled-uncontrolled-input.jsx)

- [Conditionals In JSX](./18.conditionals-in-jsx.jsx)

- [Async Nature Of setState()](./19.async-nature-of-setState.jsx)

- [Dependency Injection](./20.dependency-injection.js)

- [Context Wrapper](./21.context-wrapper.jsx)

- [Event Handlers](./22.event-handlers.jsx)

- [Flux Pattern](./23.flux-pattern.jsx)

- [One Way Data Flow](./24.one-way-data-flow.jsx)

- [Presentational vs Container](./25.presentational-vs-container.jsx)

- [Third Party Integration](./26.third-party-integration.jsx)

- [Passing Function To setState()](./27.passing-function-to-setState.jsx)

- [Decorators](./28.decorators.jsx)

- [Feature Flags](./29.feature-flags-using-redux.jsx	)

- [Component Switch](./30.component-switch.jsx)

- [Reaching Into A Component](./31.reaching-into-a-component.jsx)

- [List Components](./32.list-components.jsx)

- [Format Text via Component](./33.format-text-via-component.jsx	)

- [Share Tracking Logic](./34.share-tracking-logic.jsx)

## [Anti-Patterns](anti-patterns)

- [Props In Initial State](anti-patterns/01.props-in-initial-state.jsx)

- [Refs over findDOMNode()](anti-patterns/02.refs-over-findDOMNode.jsx)

- [HOC over Mixins](anti-patterns/03.HOC-over-mixins.jsx)

- [setState() in componentWillMount()](anti-patterns/04.setState-in-componentWillMount.jsx)

- [Mutating State](anti-patterns/05.mutating-state.jsx)

- [Using Indexes as Key](anti-patterns/06.using-indexes-as-key.jsx)

- [Spreading Props on DOM elements](anti-patterns/07.spreading-props-dom.jsx)

## [Handling UX Variations](ux-variations)

- [Composing UX Variations](ux-variations/01.composing-variations.jsx)

- [Toggle UI Elements](ux-variations/02.toggle-ui-elements.jsx)

- [HOC for Feature Toggles](ux-variations/03.HOC-feature-toggles.jsx)

- [HOC for Props Proxy](ux-variations/04.HOC-props-proxy.jsx)

- [Wrapper Components](ux-variations/05.wrapper-components.jsx)

- [Display Order Variations](ux-variations/06.display-order-variations.jsx)

## [Conventions](conventions)

- [Class Organization](conventions/01.class-organization.jsx)

- [Adding Class Names](conventions/02.adding-class-names.jsx)

- [Computed Props and State](conventions/03.computed-props-state.jsx)

- [Cached variables in render()](conventions/04.cached-vars-in-render.jsx)

- [Using HTML Entities](conventions/05.use-html-entities.jsx)

- [Tables](conventions/06.tables.jsx)

- [Inline List Iteration](conventions/07.inline-list-iteration.jsx)

- [Closures in render()](conventions/08.closures-in-render.jsx)

- [Functional Components](conventions/09.functional-components.jsx)

- [Formatting Props](conventions/10.formatting-props.jsx)

- [ES6 class constructor super()](conventions/11.super-in-constructor.jsx)

## [Perf Tips](perf-tips)

- [shouldComponentUpdate() check](perf-tips/01.shouldComponentUpdate-check.jsx)

- [Using recompose](perf-tips/02.recompose.jsx)

- [Using reselect](perf-tips/03.reselect.jsx)

## [Styling](styling)

- [Stateless UI Components](styling/01.stateless-ui-components.jsx)

- [Styles Module](styling/02.styles-module.jsx)

- [Style Functions](styling/03.style-functions.jsx)

- [NPM Modules](styling/04.using-npm-modules.jsx)

- [Base Component](styling/05.base-component.jsx)

- [Layout Component](styling/06.layout-component.jsx)

- [Typography Component](styling/07.typography-component.jsx)

- [HOC for Styling](styling/08.HOC-for-styling.jsx)

## [Gotchas](gotchas)

- [Pure render checks](gotchas/01.pure-render-checks.jsx)

- [Synthetic Events](gotchas/02.synthetic-events.jsx)

## References

Here are a few great resources:

[React in Patterns by krasimir](https://github.com/krasimir/react-in-patterns)

[React Patterns by planningcenter](https://github.com/planningcenter/react-patterns)

[reactpatterns.com](https://github.com/chantastic/reactpatterns.com)

[10 React Mini-patterns](https://hackernoon.com/10-react-mini-patterns-c1da92f068c5)

## License

MIT