Have you heard about this new feature called React hooks? A lot of people in React community are talking about them. Some people even call this feature a game changer. This brings a few questions. What are React Hooks? Why are they so hot? And, finally, how can we use them? This article will give you answers to all these questions!

What are React hooks?

You probably know that when you work with React class components you can use features such as state. In the end, that is why these components are also called stateful. You also probably know that every class component have lifecycle methods you can use. For example, componentWillUnmount(), componentDidMount(), componentWillUnmount(), etc.

None of this applies to functional or stateless components. Stateless components can’t use their own state and don’t have lifecycle methods. This is also why we can’t use functional components in every situation. Sometimes, we just have to use class component, or PureComponent, because functional component is not equipped to do the job.

This is no longer the truth with the introduction of React hooks. Put simply, React hooks allows us to take a React functional component and add state and lifecycle methods to it. Well, we are actually not adding a state to it. More precise will be saying that we are “hooking” the component into state and lifecycle methods.

Functional components on steroids and more freedom

Yes, that’s correct. Hooks allows functional components to use lifecycle methods, the features that were available only for class-based components. This means that we are no longer limited by the functionality of components. So, if you prefer to use functional components, the need to work with a state or lifecycle methods will prevent you from doing so.

Let’s say that we decide to use a functional component. A few days later we find out that it has to handle state or use some lifecycle methods. This is not a problem. We don’t have to rewrite our component into a class. All we need is to use a React hook. React hooks will give us access to both no matter if the component we are currently working with.

Yes, we can work with stateful or stateless components and use state and lifecycle methods as we wish. When you think about it, React hooks will help us transform what was previously a stateless component into stateful. All we need is to choose, import and use specific hook.

#react hooks #reactjs #javascript #design development