All you need to know about React Hooks.

What are React Hooks ?

React hooks are nothing but JavaScript functions that let you hook into React state and lifecycle features from function components.

(Note: Hooks can only be used inside function components.)

Hooks allow you to add state to add state to functional components and to share logic across components.

Benefits of using React hooks.

There are three key advantages to using React Hooks: reusability, readability, and testability.

Hooks made the React lifecycle easier

When using lifecycle in class components, the componentDidMount(), componentDidUpdate(), componentWillUnmount() methods are handled individually, but when using React hooks, you can just do everything through the useEffect hook.

Rules of Hooks.

We can use React Hooks inside function components only.

Only call hooks at top level. You cannot call hooks inside loops, conditions, or nested functions, they should always be called at the top of function component.

You cannot call hooks from regular JavaScript functions.

Built-in and Custom hooks.

React have few built-in hooks like useEffect, useState. You can also create your own custom hooks in React.

Some common built-in hooks

useState

useState hook allows you to add state variables in functional components. In useState you pass the initial state to the function and it returns a variable with a value and one function to update the value.

Let's look at the example below

import { useState } from 'react';

function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

The above example increments the counter on the handler function parameter itself.
Here, the initial value of the counter is 0, then setCount function is used to update the value of counter.

useEffect

To understand the useEffect hook you first need to understand lifecycle of the component. The lifecycle of the component contains three main parts i.e. mounting, updating and unmounting.

mounting: when the page loads
updating: when the state updates
unmounting: when user leaves the page

Example:

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  }, []);

  return <h1>I've rendered {count} times!</h1>;
}