<p align="center"> ⭐️ If you like reactpatterns, give it a star! ⭐️ </p> <img src="https://github.com/codefacebook/react-patterns/blob/master/static/images/reactpatterns.png" align="right" />

React Patterns

A curated list of React Patterns

React patterns & techniques to use in development for React Developer.

Patterns

• Proxy Component

• Make the API Call in componentDidMount()

• Stateless Function (Presentational Component)

• Functional setState (Pass a function to setState)

• Higher-Order Function

• Higher-Order Component

• Accessing a Child Component

• JSX Spread Attributes

• Render Callback

• Function as Child Component

• Function as Prop Component

• Component Injection

<!-- * [Conditional rendering](pages/conditional-rendering.md "Conditional rendering") -->

• Conditional Rendering

  • If Else
  • Ternary Operation
  • Logical && Operator
  • Switch Case Operator
  • Conditional Rendering with Enum
  • Multi Level Conditional Rendering
  • With Higher Order Component
  • External Templating Component

• Destructuring

  • Basic Destructuring
  • Destructuring Function Argument
  • Nested Destructuring
  • Destructuring Rest/Spread Operator

• Promises Over Callbacks

• Stateful Component (Container Component)

• State Hoisting

• shouldComponentUpdate Avoid Heavy re-renders

• Controlled and Uncontrolled Input

• PureComponent Avoid Heavy re-renders

Anti Patterns

• Initializing the State Using Props

• Using Indexes as a Key

• Spreading Props on DOM Elements

• Mutating the state

Experimental

• Suspense for Data Fetching

• Concurrent UI

Contributing

We'd love to have your helping hand on contributions to reactpatterns by forking and sending a pull request!

Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)

License

The MIT License

<!-- =============== --> <!-- callback-ref => https://reactjs.org/docs/refs-and-the-dom.html#callback-refs functional-setstate --> <!-- =============== -->