React Component Patterns

Click for: original source

This documentation will help identify the trade-offs of the different React patterns and when each pattern would be most appropriate. The following patterns will allow for more useful and reusable code by adhering to design principles like separation of concern, DRY, and code reuse. By Alexi Taylor.

Some of these patterns will help with problems that arise in large React applications such as prop drilling or managing state

By utilizing React’s Context API we can create a data provider component that deals with fetching data and providing the shared state to the entire component tree. This way, multiple child components, regardless of how deeply nested, can access the same data. Fetching data and showing data are two separate concerns.

The content is split into:

  • Compound components
  • Flexible compound components
  • Provider pattern

You will get many examples with thorough explanation. Each major pattern includes an example hosted on CodeSandBox. Very good!

[Read More]

Tags react web-development app-development javascript