Why React Hooks?
React hooks are very popular among React developers because it allows us to “hook” functional components into React’s lifecycle and state. React Hooks were introduced in version 16.8.0. Before that, only class based components were able to use React’s lifecycle and state.
Class Components
React class components make use of ES6 class and extend the Component class in React. Following figure describes the React’s lifecycle methods of a class component also known as a stateful component as they implement state and logic.
After React creates a new instance of a component, constructor(props) calls the component. Then, call render() to render the component for the first time. as soon as rendered, it calls componentDidMount() where we can run API calls or setState(). Calling setState() cause React to call render() again. There are other ways which can re-render the component. After a such updated render, React will call componentDidUpdate(). Finally, when it’s time to remove the component, React will call componentWillUnmount(). Following figure shows detailed lifecycle of a React component
The thing is, when a Class component is instantiated once and the various lifecycle methods are then called on the same instance. This means we can save some sort of “state” locally in your class instance using class variables which has some interesting implications.
Functional Components
React functional components are basic JavaScript functions. To create one, typically we use arrow functions, also can use regular function keyword. These are also known as stateless components because they don’t have a state as well React’s lifecycle methods can not be used in functional components. These are simply accept data and render them.
Before introducing React Hooks, functional components were used if we don’t need React lifecyle or state. But when we use class components there were few issues such as calling super(props) in constructor, use of this key word, had to bind() methods, etc.
Now we need a new component API that solves all of those problems while remaining simple, composable, flexible, and extendable. If we could use functional components we can avoid above mentioned and many other issues of class components. But how can we use lifecycle methods and state with a functional component?
React Hooks
This is where React Hooks comes into the scene. Clever team of React developers introduced several hooks which we can use for lifecycle, state and sharing non-visual logic inside a functional component.
useState is the first hook, we use the most in our applications which allow us to use state in functional components. it takes in a single argument, the initial value for the state. What it returns is an array with the first item being the piece of state and the second item being a function to update that state.
useEffect is another hook we always use in our applications for synchronization as lifecycle events. We pass functions that we want React to run every time our component gets rendered or updated. This function can also return a function that’ll get called when our component needs to cleanup the old render.
And there are many other React Hooks as well as we can create our own hooks. So, this is my explanation, what I found about Hooks. Hope you got something 😊
“React simply calls your function components over and over again when it needs to render it. You’ll need to use React Hooks to store state and plug into the React render lifecycle. And thanks to JavaScript Closures, your variables are scoped to the specific function call.”
Happy Coding Folks 👽
