What is Inversion of Control (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.