How hooks changed the game in React

In React version 16.7 and below, if you wanted a component to have state or access to lifecycle methods, you needed to build it as a Class component. Functional components didn't include instances.

But with React 16.8, developers can take advantage of hooks. To quote the React Docs: “hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.” https://reactjs.org/docs/hooks-overview.html

Hooks allow developers to separate code on the basis of what the code is actually doing, not the lifecycle method name.

In this article, I take a closer look at hooks to show you their main advantages and disadvantages. 

Key advantages of hooks

They’re a perfect fit for the React ecosystem

Hooks gave a breath of fresh air to the React ecosystem. They perfectly capture the idea behind React and set the direction for its development. Check out this talk by Dan Abramov from React Conf 2018 where he shows how hooks match the React ecosystem and his atom-electron metaphor. [

Code reusability

Hooks allow developers to avoid the problems that crop up when using classes and separate smaller responsibilities easily. Moreover, ee can easily extract code from a component and use it somewhere else. 

HOC and render props optimization

The official documentation from the React team states the motivation behind hooks was solving problems in writing and maintaining React components. In particular, they mentioned challenges such as:

• reusing stateful logic between components, 
• difficulty in understanding complex components, 
• and the fact that classes can become confusing for developers and machines.

Hooks can partially replace higher-order component (HOC) patterns and render props. They limit the overuse of these elements, but also create new opportunities for their implementation. By allowing React developers to write smaller components with repeatable logic, hooks introduce tangible value to the development process.

Clean and understandable code

The hook approach helps developers to create concise code that is easy to follow and understand. By using hooks, we can achieve the same results with less code. And less code means fewer errors.

Cons of using hooks

• Hooks are yet another new thing and developers will have to dedicate some time to learning how to use them.

• In the beginning, hooks may appear a little strange to those who use React on daily basis. But using them is actually quite intuitive - as long as we follow the rules described in the documentation.

• Some design patterns used by React developers fell out of practice because of hooks. Even Dan Abramov who wrote extensively about solutions for avoiding component chaos now admits that this is no longer an issue. However, developers might need time to catch up on that and bad practices may still continue for some time.

The takeaway

I hope this article helped you understand what hooks are about and the value they can bring to the work of a React developer.

Stay tuned for more! In my next article, I’ll be talking about how advanced React patterns changed with hooks.

Need some more React insights?

Check out this tutorial:

• How to avoid prop-drilling in React without using Redux (Part 1)

• How to avoid prop-drilling in React without using Redux (Part 2)

And download our React ebook:

https://sunscrapers.com/ebook/single-responsibility-principle-react-ebook/

Learn how following the Single Responsibility Principle helps to build a React codebase that is easy to understand and ready for changes.