React Hooks into existing Class Components

Post By

Mohaimen Chowdhury Mahi

Category

Date

03 Dec 2020

On February 16, 2019, React 16.8 introduced React Hooks



 

In the past, there were no other ways than creating React Components as class components. The previous version of React consists of Class components and along with component lifecycle methods and states. On February 16, 2019, React 16.8 was released to the public. The release introduced React Hooks. React hooks took the functional components much ahead on the development of SPA (Single Page Applications), though functional components were used in some cases as a child component of HOC (High Order Component) to manage data with the help of props provided by the HOC.

 

Why React Hooks?

 

React hooks made the reusability of components easier. Class components were relatively complex and the component life cycle methods on them were quite immutable. It’s true that most of the old but heavy applications are made of Class Components and React docs suggest that class-based components will not be deprecated with newer versions. But it also does not recommend writing class components anymore, since hooks are considered the future and a way to go. 

 

Why? Because everything possible with class-based components is now achievable by using hooks… and in a much simpler way.

 

Using React Hooks on existing Project

 

It is recommended that refactoring the class components to functional components will be the best practice to use hooks. But sometimes some core functionality of the system is much applicable to the class component more than functional components. In that case, try to use the complex class components less than possible. Other components that have less functionality and event handling and not as complex, can be refactored as functional components.

 

Another thing that can happen, creating custom components and that can be used as hooks. Here is an example:

 

There is a simple useScreenWidth Hook as an example. As you can see from the Hook name, its purpose is getting the actual screen width. ‘useState’ and ‘useEffect’ are some of the React built-in Hooks. useState works in a way that it returns two values: one is the state value, and the other one is its setter.

 

We can use that function in another component by just importing it. This component is a Higher Order Component (HOC). HOC is an advanced React technique for reusing component logic, and its concept gives us the ability to use Hook logic inside our existing class component. The idea is to get a component as an input and return that same component with some additional props. In our case, we will pass our Hook function as a prop.

 

The final step is to simply wrap our existing class component with that HOC. And then, we simply use width prop as any other prop passed to the component.

 

Hooks are a powerful change in the React world.
 

Hooks will definitely change our mindset about React development. It might not seem so straightforward right now, but in a couple of years, class usage will slowly decrease. It’s great that the React team doesn’t force us to rewrite all our projects, and also encourages us to use Hooks side by side with classes. They won’t deprecate classes in the near future, so we certainly have the time to experiment with Hooks.

 

Happy Coding! 

 

WORK WITH US

Got a project to discuss with us?

Explain your project