What are HOOKS in React?

Subscribe to my newsletter and never miss my upcoming articles

In this tutorial, we will learn what are HOOKS and how we can use them to write better React. Recently in this series we have seen so much of hooks and hooks. So here is in detail about React Hooks.


What are Hooks?

Hooks are the functions which extends or "hook into" the React state and lifecycle features to function components.

Earlier these features were available only for class based components. With the introduction to hooks, we do not require to write class based components.

Motivation behind the introducing Hooks

Hookes were introduced in React 16.8 (Oct 2018). Lets see why Facebook created React Hooks and what are the problems it solves.

  • It was hard to use stateful logic between components: Earlier, only React class components were used for local state management and lifecycle methods. Function components could only be used if you didn't need any state or lifecycle methods. This came with the drawback of refactoring components fromReact function components to React class components every time state or lifecycle methods were needed(and vice versa). With hooks there is no need for this refactoring.
  • Harder to understand and reuse the complex components: Maintaining and managing components which contaonf side-effects(such as network requests etc) with lifecycle methods such as componentDidMount, componentDidUdate, componentWillUnmount was difficult. It was also hard to break the component into smaller parts because the stateful logic was scattered all over. To solve this, Hooks let you split one component into smaller functions based on what pieces are related.

  • Classes confuse both people and machines: Understanding classes in JavaScript was a major obstacle while learning React. It becomes even more difficult for people who are not from OOP background(including me). React hooks ensures a smoother learning curver and this faster development.


Who should learn Hooks and why?

Facebook has no plans to rmeove classes from React. Moreover, the hooks are completely backward compatible and do not replace you knowledge of react concepts.

If you are already using class components

If you are completely comfortable with class components, you may not want too change your class based components into function components and you don't need to. But however, even the React Docs suggest that you should start learning hooks and write you new components using Hooks. It may take a while to start "thinking in Hooks", but once you get comfortbale it will be incredibly easy.

If you have started learning React
If you have started with React recently. then it is just awesome. You do not need to wrory about all the overhead that comes witih JavaScript classes (inheritance, this, bindings, super etc). React hooks are not only the simplest way to write but also the simplest way to learn React.

So, whether you are a experienced developer or a beginner, you have to work your way through Hooks. Even the react documentation says that Hooks are the future of React.

I think you should have rough idea now about why we are learning Hooks and the problems it is solving. Even if it is not, don't worry, it is not that important. Important part is to learn and grasp the various Hooks. So lets dive a bit deeper.

Rules for writing Hooks

Hooks are regular JavaScript functions, however we need to consider these rules while using them:

  • Hooks can be called only at the Top Level: Hooks can't be called inside other loops, conditions or nested functions. They should be called at the top level just inside the function component.

  • Hooks can be used only in React function components: Hooks can't be called inside regular functions. They can be called only from Function Components and not anywhere else.

The basic Hooks

  • The State Hook - useState() : It let's you add stateful logic to Function Components
import React, { useState } from 'react'; 
function App() {
    const [state, setState] = useStaet(''); 
 /*All other code here*/
}
/////
// THIS IS JUST A SIMPLE EXAMPLE OF useState() hook
  • The Effect Hook - useEffect() : Let's you perform side effects (such as API calls, Network, requests etc) in Function Components

  • The Context Hook - useContext() : Allows passing data to children elements without using redux.

  • useReduce() : An alternative to useState. Used for complex state logic.

  • useCallback() : Optimize the rendering behavior of Function Components

  • useMemo : Allows memoization of expensive functions so that you can avoid calling them on every render

  • useRef() : Allows creating mutable variable. Useful for accessing DOM nodes/React elements, and to share mutable varibales without triggering a re-render.


😎 Thank Your For Reading | Happy Reacting πŸ’»
Happy New Year to allπŸŽ‰πŸ™ŒπŸ₯‚.
Make 2021 a productive year.

No Comments Yet