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. https://www.youtube.com/watch?v=dpw9EHDh2bM


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:


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. 

Natalia Kulas
Natalia
Frontend Engineer

Natalia is a fronted developer at Sunscrapers. She adores React primarily for its rebellious nature. A cat lover, she’s passionate about psychology and always willing to level up her mindset.

LOAD COMMENTS

arrow

Data science Web development

Single Responsibility Principle in React applications – Part 1

In my work as a front-end developer, I often encounter single methods, classes, and React components doing way too much. These blocks of code are typically long, use many [...]

Web development

The ultimate guide to DevOps (+ 15 DevOps best practices from our team)

DevOps is one of those buzzwords that mean many different things to a lot of people. That’s why understanding what DevOps is and how it can benefit your organization [...]

Join our newsletter.

Scroll to bottom

Hi there, we use cookies to provide you with an amazing experience on our site. If you continue without changing the settings, we'll assume that you're happy to receive all cookies on the Sunscrapers website. You can change your cookie settings at any time.

Learn more