React Hooks in React Js

React Hooks in React Js

So what is react hooks?

Hello Geeks, In this article we will learn React Hooks in React Js. React introduce this new features called “React hooks” in React Version 16.8.  React Hooks is JavaScript functions not components functions which can only be used inside of functional components or inside of other hooks. With React hooks you can can manage state in your functional components. Yes read this line correct. Not only state management, React hooks help us work with our components in a more efficient way you could say.
React hooks react js



Background behind React Hooks Introduction

As we know that, we even have functional or class based components and React JS. In class components we manage the state and lifecycle method or lifecycle hooks. (Don’t be confused here lifecycle hooks are totally different than React Hooks). And in functional components you have got props and you returns JSX code. They are great for presentation for presenting your content but as you learned you can’t change internal state there. So, each Functional Component typically is focused on one or only a few purposes and simply there to output something.

For example, if you would want to react to a button you would do that by getting a handler a function pointer as a prop. And then by executing that function through that prop, so that the parent component which is a class based component is able to change some internal state upon that button press.

Therefore your business logic typically lives in class based components because typically when something
changes you want to re-render and class based components are the only components that can have something
that changes and causes re-render.

Why we need React Hooks ?

Now with all been at the point where we had a functional component and all of a sudden we needed to
manage some state in there. For example you have inputs in functional component and you want to store the input in your state that the user entered and then send it back into the input. It is classic two way binding thing.

Other scenario could be that you have manage lifecycle method, which is not possible in functional components and only possible in class based components.

Now in such a case you would have to convert your functional component to a class based one but of course
this conversion is annoying it’s a lot of redundant work in the end.

These scenarios are the reasons for example to “get rid of the conversion” we have react hooks because react hooks essentially allow us to work with functional components only.



Key points about React Hooks.

  • When working with React hooks feature you don’t need to build any more class based components. You still
    can but you don’t have to.
  • You can now make everything work in functional components, that previously required a class based component.
  • You can write functional components everywhere and React hooks replace the class components functionalities like they replaced state management and they replace lifecycle hooks.
  • React hooks are JavaScript functions named as prefix with a lowercase”use” and then your function name something like useState(), useEffect() and so on.

Conclusion on React Hooks

So to sum it up, React hooks allow you to add state to functional components, manage lifecycle method thing in functional components and you can share logic across components with hooks and that logic can even be state full.

Some Predefined React Hooks are:

  • useState()
  • useEffect()
  • useContext()
  • useReducer()
  • useMemo()

Hope this article helps you.

Thanks for reading this article. Happy Coding 🙂

Comments

  1. By Vikrant Pundir

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.