Create a scalable and maintainable architecture with react context.

What it does

Hi, the objective of this tutorial is to create a scalable and maintainable architecture with react context.

Basically, with context, we can create multiples states inside an application that can create a context for view o for a feature.

The reason for creating mini contexts is that each component only receives props with the information.

And to do it better, we create HOCs components. The responsibility for these components is to call to context and call only the necessary states from the context, HOCS call a function useContext like react-router-dom with useRouter. this function provides the state or functions. And decide what returning depending on the state of context or when we call to API.

This architecture does not use reducers, types, or actions because being such small states doesn’t need them. A component is more easy testing with a mini-state because is easy to mock as the HOC component and the view component aren’t coupled.

As seen in the image this architecture is 3 layers, each layer has unique responsibilities.

Built With

Share this project: