DEV Community

Viral Patel
Viral Patel

Posted on

1

Why use React Hooks? Explained

Start with why?

If you want to use Hooks in React in your application. Make sure you update your react version to >=16.8 since it was introduced in React v16.8.

Before React Hooks was a feature in React the only way to use state in your component was to write your component as ES6 Class. Now, with React hooks you can use state and other React features without writing a class.

Click here to watch a youtube video from React Conf 2018

Completely opt-in

You can try Hooks in a few components without rewriting any existing code. But you don't have to learn or usee Hooks right now if you don't want to. It is 100% backwards-compatible.

Hooks don't replace your knowledge of React concepts

Hooks only is an alternative way to use React concepts you already know: props, state, context, refs, and lifecycle but without classes. Hooks allow you to reuse stateful logic without changing your component hierarchy

How do lifecycle methods correspond to Hooks?
  • Function components don't need a constructor. You can initialize the state in the useState call. If a computing the initial state is expensive, you can pass a function to useState.

  • Instead of using shouldComponentUpdate lifecycle, use React.memo

  • Hook called useEffect can express all combinations of all the standard lifecycles like componentDidMount, componentDidUpdate and componentWillUnmount

  • There are no hooks yet for handling exceptions in your component.

Next steps

Hope this article helps you understanding a motivation behind why Hooks were introduced but many details will be probably unclear. Click this link to deep dive into Hooks

This blog was originally published on my personal blog Viral Patel.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay