In this blog, we will explore the construction of the Timer component, as discussed in the previous blog, but this time, we will leverage one of React's essential concepts: Higher Order Component (HOC).
By employing a Higher-Order Component, we can achieve the same functionality as in the previous implementation, which utilized the useRef() hook.
Higher Order Component?
A Higher-order component (HOC) is an advanced technique in React for reusing component logic.
This is not an in-built Hooks / React API
HOC is a concept/design pattern that can be implemented in such a way as to achieve logic separation, code reusability and enhance the behavior of existing components without modifying their source code.
The HOC rule,
The HOC component (WrapperComponent) is a normal function that accepts a Component as its input (InputComponent).
This Function (component) returns an EnhancedComponent by injecting some props or functionality to the InputComponent.
let's understand this better by implementing the Timer component!.....
Here we are not going to discuss the timer logic as we have already discussed it in our previous blog our main focus here is how we achieved the same by using HOC.
Let's compare our HOC rule with the above code
WrapperComponent is a normal js function that accepts the InputComponent as a parameter.
Rule 1 ✅
An anonymous function which actualy holds the Timer logic and its states and returns the InputComponent
but if we observe closely here, the state and the functionalities which is used to update the state of the component is injected into the InputComponent along with the props that being send to the actual component (will be more clear with the next code snippet).
Now, we simply store this anonymous function that returns the enhanced form of the accepted InputComponent in a variable called EnhancedComponent which is being returned by the WrapperComponent, by doing so our WrapperComponent official becomes a Higher Order Component.
Rule 2 ✅
Let's create two distinct components using the power of our WrapperComponent HOC.
With this HOC, we'll build two separate components, each benefiting from the shared logic provided by the WrapperComponent.
Timer1
Now, our Timer1(I) want the required properties! to perform the timer functionality.
Though we could maintain the state within this component, we have opted not to do so. Instead, we recognize that the Timer functionality might be beneficial for multiple components in the project's future. Thus, to ensure better code organization and reusability, we have skillfully separated the logic from this component. We accomplished this separation by employing one of the advanced concepts of React, known as Higher Order Component (HOC) - the WrapperComponent.
Ha . . ha . . we now wrapped our Timer component by,
WrapperComponent(Timer1)
As the WrapperComponent injects the required state and properties of the Timer logic into our Timer1, we now have all the required properties to design our Timer1 component by extracting the props like,
const { timer, start, stop, reset, name } = props;
timer - which holds the current state as an object and start, stop, reset as the handlers to update the state respectively
but what is the name? how did this come from? as our HOC (WrapperComponent) does not have injected anything like that to the InputComponent
if you observe it closely, it did inject the name to the InputComponent through props which is actually a parameter that is accepted by the EnhancedComponent to match the default props send to the InputComponent(Timer1).
same way another Timer component that requires timer functionality can be created using our Higher Order Component (WrapperComponent)
Please refer below code and screenshot of the output for Timer2 and the updated App.js
so if you see by using the WrapperComponent we achieved the same functionality for two different independent component
Now our app is having two different component, sharing the same logic using the HOC-WrapperComponent
the output of the above code is ⬇
Conclusion
Incorporating HOCs in our development toolkit empowers us to build flexible, modular, and powerful React applications, ensuring a smooth and productive development experience. As we continue our journey in React development, we can confidently leverage the versatility of HOCs to create sophisticated and feature-rich applications.