DEV Community

Ajinkya Chanshetty
Ajinkya Chanshetty

Posted on

Why hooks are introduced in React

Image description
React has functional and class-based components. There can be different use cases for them depending upon the user requirements. In earlier versions of react, i.e. prior to 16.8, class-based components were used for the high data-intensive scenarios.

React introduced hooks in version 16.8 onwards that provide the user to use all the features of a class component without even writing a class component.

  • Hooks provide the user a provision to define the state in functional components
  • Life cycle methods that were limited to class components can be used in functional ones.
  • The ‘this’ keyword works differently in javascript and functional components.
  • Classes don't minify well and cause the hot reloading very unreliable.
  • Every time we have to add the bindings for the event handlers.

Code Reusability:

  • There’s no specific and easy way to share the logic between components.
  • HOC and RenderProps do that but then wrapping layers increase.
  • Code becomes complicated

Excessive life cycle methods:

  • For Data fetching from API - componentDidMount and ComponentDidUpdate can be used.
  • For subscribing and unsubscribing from some event, two lifecycle methods can be used such as componentDidMount and componentWillUnmount
  • All of these features can be achieved using the minimum hooks such as useEffect and useCallback.

So, these are some of the reasons that can be considered while using hooks in React.

Top comments (0)