As the name suggests, it enables you to hook into React state and lifecycle features from function components😄.

Getting Started with React Hooks 🎣

Hooks allow functional components to access state and other react life cycle features. Hooks were introduced in February 2019 as part of React 16.8 version. Since then it has played a major role in react application development.

They will help you make your code clearer and better structured😀. The classic class-based syntax is still supported and will keep being supported for the foreseeable future.

So no rush to rewrite your current components😁.

You don’t have to install anything to use hooks. They come with React from the 16.8 version onward.

Functional components did not keep track of an internal state and did not know the component lifecycle. Thus, they were referred to as “dumb components.🥴”

On the other hand, class components track a component's internal state and enable you to perform operations during each phase using lifecycle methods. Consequently, class components were—and still are—referred to as “smart components.😎”

What are Hooks anyway?🧐

Hooks🪝 enable React functional components to use React features that were previously only available in React class components.

In a nutshell, they are functions that bring the power of React class components to Functional components, giving you a cleaner way to combine them😮.

When should developers use Hooks with React js?🤔

If you know React then you know that while writing a functional component, if developers want to add some state to it, it was been done by converting functional component to class component. This is why Hooks were introduced to solve this problem.

Now we can add the state by just using hooks in the existing functional component.

Rules of using hooks🥸

Hooks🪝 are just like JavaScript’s function but there are certain rules to be followed while using hooks.

• Call hooks only at the top level-

This means that we should never call hooks inside a loop, conditions, or even nested functions and should be only called in the React functions. This maintains the order of components whenever it is rendered. This rule ensures that Hooks are called in the same order each time a component renders.

• Call hooks only from a React js function-

Hooks cannot be called using regular JavaScript function instead, it can be called from React function components. React hooks can also be called `custom hooks.

Overview 💥

Hooks🪝 provide us with alternate ways to use different functionalities like lifeCycle methods without the need to write classes.

It is an extra feature that can be used by those who don’t like classes. There are different types of hooks that have different functionalities. Among them, useState and useEffect hooks are used most frequently.

We will see both of these hooks in the next blog until then stay tuned and keep reading.

Thank you!!!!!