What are React hooks?

React is a JavaScript library to design a web application's user interface. It uses a component-like structure where a web page is split into multiple components.

Hooks were a feature that was introduced in React version 16.8. With the help of these hooks, we can reuse stateful logic and manage the lifecycle of a component.

How do hooks provide state?

Stateless components do not have the ability to manage state. Previously when working with stateless components, if we had to provide them with state. We did so by extending React.Component class and utilizing the state property.

Below is a code example that provides state to a component using React.Component class.

Below we can see a brief code explanation:

• Lines 4–10: We use the constructor(props){..} method to give state to the component. The initial state is set to count: 0.

• Lines 12–16: We define the increment() method that updates the state by a count value of 1.

• Lines 18–26: A web page is rendered with a button when pressed, calls the increment() function to update the component's state.

Instead of using a class as we did above, we can similarly use hooks to manage the component. Using a hook, we can provide a state to the component using a plain JavaScript function.

Below is an example of the same component, but instead of using a class, we use a useState hook.

Below is the explanation of the above code:

• Line 4: We define the useState hook and set its initial value of 0. It returns an array of two elements count and setCount. count contains the current state value. The setCount is used to update the state value.

• Line 6: A increment() function that updates the state value by 1 using the setCount function.

• Lines 10–16: The JSX that is to be rendered by the component, which includes a <p> tag that displays the state variable and a button that updates its value.

Types of hooks in React

Below we can see the various types of hooks that the React library provides.

Besides the hooks mentioned in the table above, we can create custom hooks using JavaScript functions according to the requirements of our application.

Advantages of using React hooks

There are many advantages of using hooks in our React application, some of which are listed below.

• Simple code structure: With hooks, we avoid using classes that reduce the amount of boilerplate code we include in our application.

• Easier state management: By using hooks, we can easily manipulate the state variable by using JavaScript functions.

• Improved performance: Hooks like userMemo and userCallback prevent unnecessary re-rendering of components and hence improves the overall application performance.

• Better application testing: As hooks are individual logic units, we can use them independently while testing components without worrying about other components being affected.