React Hooks in React Js
So what is react hooks?
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.
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:
Hope this article helps you.
Thanks for reading this article. Happy Coding 🙂