Build Decoupled React Components with Inversion of Control
Imagine you’re implementing an e-commerce checkout, and the product manager has temporally chosen PayPal as payment provider. But it’s planned to change the provider for another one, e.g.: Stripe. Looking for small changes in the future, how would you implement this?
Inversion of Control (IoC) probably will help you in this case.
What is IoC?
IoC is a programming principle where you invert the control flow of a program, it’s used to decouple your code. You can read more about here, let’s go code.
You have the checkout.component.tsx that is responsible for creating the checkout flow. It renders the product list, total of payment and the payment form that is provided by PayPal.
The problem here is that your checkout flow knows about PayPal, and that can generate a huge refactor in the future.
To prevent this, you can use ElementType and interfaces.
ProviderProps ensure that any provider will implement the correct methods. ComponentProps forces the checkout flow to receive a provider and mount it, passing the given props.
Now we can create a “dumb” component that knows how to control the screen state, like loading and feedback.
And the responsible for managing the payment with PayPal can be isolated, totally decoupling the code.
Now, you can create a simple container that mount the checkout component and pass the correct props.
You can even create a factory method that returns the correct provider in a scenario you have more than one.
I hope that this article helped you to understand how to use inversion of control with react and how to decouple your code to be more maintainable.
Build composable frontend and backend
Don’t build web monoliths. Use Bit to create and compose decoupled software components — in your favorite frameworks like React or Node. Build scalable and modular applications with a powerful and enjoyable dev experience.
Bring your team to Bit Cloud to host and collaborate on components together, and greatly speed up, scale, and standardize development as a team. Start with composable frontends like a Design System or Micro Frontends, or explore the composable backend. Give it a try →
