Hooks are the new feature introduced in the React 16.8 version.

It allows you to use state and other React features without writing a class. Hooks are the functions which "hook into" React state and lifecycle features from function components. It does not work inside classes.

When to use a Hooks

If you write a function component, and then you want to add some state to it, previously you do this by converting it to a class. But, now you can do it by using a Hook inside the existing function component.

Rules of Hooks

1. Only call Hooks at the top level

2. Only call Hooks from React functions

Types of react Hook:-

The built-in Hooks can be divided into two parts, which are given below.

Basic Hooks

• useState

• useEffect

• useContext

Additional Hooks

• useReducer

• useCallback

• useMemo

• useRef

  useState

• The React useState Hook allows us to track state in a functional component.

• useState is a React Hook that lets you add a state variable to your component.

• To use the useState Hook, we first need to import it into our component.

•   //Syntax
    const [state, setState] = useState(initialState);
  

usage of useState

• Adding state to a component

• Updating state based on the previous state

• Updating objects and arrays in state

• Avoiding recreating the initial state

• Resetting state with a key

• Storing information from previous renders

useEffect

The useEffect Hook allows you to perform side effects in your components.

Some examples of side effects are: fetching data, directly updating the DOM, and timers.

To use the useEffect Hook, we first need to import it into our component.

useEffect accepts two arguments. The second argument is optional.

useEffect(<function>, <dependency>)

//Syntax    
useEffect(setup, dependencies?)

• NOTE:- if we don't pass any dependency useEffect runs on every render. and it goes on an infinite loop. This is not what we want. There are several ways to control when side effects run. We should always include the second parameter which accepts an array. We can optionally pass dependencies to useEffect in this array.

useContext

React Context is a way to manage state globally.

useContext is a React Hook that lets you read and subscribe to context from your component.

To use the useContext Hook, we first need to import it into our component.

It can be used together with the useState Hook to share state between deeply nested components more easily than with useState alone.

//Syntax
const value = useContext(someContext);

Usage

• Passing data deeply into the tree

• Updating data passed via context

• Specifying a fallback default value

• Overriding context for a part of the tree

• Optimizing re-renders when passing objects and functions

useRef

The useRef Hook allows you to persist values between renders.

It can be used to store a mutable value that does not cause a re-render when updated.

To use the useRef Hook, we first need to import it into our component.

It can be used to access a DOM element directly.

//Syntax
const ref = useRef(initialValue)

Usage

• Referencing a value with a ref

• Manipulating the DOM with a ref

• Avoiding recreating the ref contents

useReducer

The useReducer Hook is similar to the useState Hook.

useReducer is a React Hook that lets you add a reducer to your component.

To use the useReducer Hook, we first need to import it into our component.

//syntax
const [ state, dispatch] = useReducer(reducer, initialArg, init?)

Usage

• Adding a reducer to a component

• Writing the reducer function

• Avoiding recreating the initial state

useCallback

useCallback is a React Hook that lets you cache a function definition between re-renders.

The React useCallback Hook returns a memoized callback function.

To use the useCallback Hook, we first need to import it into our component.

note:- The useCallback and useMemo Hooks are similar. The main difference is that useMemo returns a memoized value and useCallback returns a memoized function.

//syntax
const cachedFn = useCallback(fun ,dependencies);

Usage

• Skipping re-rendering of components

• Updating state from a memoized callback

• Preventing an Effect from firing too often

• Optimizing a custom Hook

  useMemo

  The React useMemo Hook returns a memoized value.

  useMemo is a React Hook that lets you cache the result of a calculation between re-renders.

• To use the useMemo Hook, we first need to import it into our component.

    //Syntax
    const cachedValue = useMemo(calculateValue, dependencies);
  

  Usage

  • Skipping expensive recalculations

  • Skipping re-rendering of components

  • Memoizing a dependency of another Hook

  • Memoizing a function