Journey from Class to React Hooks

Few months back I got an opportunity to start a project from scratch at my organisation. The decision that had to be made was if we are going to continue with the existing class components approach or get our hands dirty with the newly introduced React Hooks.

Thought process behind preferring hooks:

• react is evolving pretty fast and hooks are going to be the base of future React apis. So it made sense to train the members of the team to start leveraging hooks.
• React team at Facebook has already been testing hook implementations for past one year in their production. It clearly indicated the stability of hooks.
• Since Hooks are regular JavaScript functions, it is easy to create abstractions on top of it.
• React community embraced Hooks with a lot of positive feedback.

Getting started

Getting started with hooks was very straightforward for us as React team have put up great documentation with loads of examples but we quickly figured out it’s not the same old React. There was no fundamental difference in the behaviour but we had to change the mental model of components.

Each render created the new scope of the component unlike class components where the same instance was mutated

We had to re-model our thought process on the core functionalities as stated below:

• Preserve instance variables (not the state ones) between different renders.
• Leverage useEffect hook to implement lifecycle methods.
• NEVER wrap hooks inside conditionals. The sequence of hooks needs to be same between each render to preserve local state within the currently executing component.
• Include functions as component properties.
• Create custom hooks to write our own abstractions.
• When and what to memoize as everything comes with a cost.

It definitely took us some time to change the mental model but we were excited about what we could achieve with the new model.

• Allowed us to reuse stateful logic without changing component hierarchy.
• Allowed us to split components into smaller pieces which can be tested independently.
• Allowed us to use core react functionalities directly without creating classes.
• Pass data between multiple Hooks just like you normally do between functions. They can take arguments and return values because they are JavaScript functions.
• Components became cleaner and more readable.

Should you migrate to Hooks right away?

The new version is 100% backward compatible and the React team has acknowledged the fact that developers are more focused on shipping products and have less time to look into the newer apis. They don’t have any plans to remove classes from React.

However, you should definitely consider leveraging hooks in the new features/products in pipeline or start introducing your team to it in parallel.

Hooks can cover all use cases for classes while providing more flexibility in extracting, testing, and reusing code. This is why Hooks make more sense when you have to build and maintain large scale applications.

If you liked reading this, don’t forget to clap. 👏👏

You can also follow me on twitter @Akash940 for JavaScript or React updates.

Thank-you!