reactpatterns
reactpatterns copied to clipboard
React patterns & techniques to use in development for React Developer ⚛ .
⭐️ If you like reactpatterns, give it a star! ⭐️
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
- 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. (✿◠‿◠)