Hooks allow you to use other React features without writing a class.

It provides function components to have access to state.

It also provides a way to write reusable and stateful logic.

Why Hooks are useful in React

In previously, when we need to use state in any components we have to create a class based component.

Now, functional based components are stateful with Hooks and no need to create class based component.

Some commonly used hooks in React.js are:

• useState: This hook allows you to add state to your functional components. It returns an array with two elements: the current state value and a function to update the state. We can use String, Number, Array or Object in useState.

import React, { useState } from 'react';

function Counter() {
  // Declare a state variable called "count" and its setter function "setCount"
  const [count, setCount] = useState(0);

  // Event handler for incrementing the count
  const increment = () => {
    setCount(count + 1);
  };

  // Event handler for decrementing the count
  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

• useEffect: This hook is used to perform side effects in your components, such as fetching data, subscribing to events, or manipulating the DOM. It runs after every render and can be used to handle component lifecycle events. It will run on mount and update.

import React, { useState, useEffect } from 'react';

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

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

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

export default UseEffectComponent;

• useContext: This hook allows you to access the value of a React context within a functional component. It takes a context object created by React.createContext and returns the current context value.

import { useState, createContext, useContext } from "react";
const UserContext = createContext();

function Func1() {
  const [user, setUser] = useState("Jesse Hall");

  return (
    <UserContext.Provider value={user}>
      <h1>{`Hello ${user}!`}</h1>
      <Func2 />
      </UserContext.Provider>
    );
}

function Func2() {
  return (
    <>
      <h1>Component 2</h1>
      <Func3 />
    </>
  );
}

function Func3() {
    const user = useContext(UserContext);
    return (
        <>
          <h1>Component 3</h1>
          <h2>{`Hello ${user} again!`}</h2>
        </>
      );
}

export default Func1;

• useReducer: This hook is an alternative to useState and is used for managing more complex state logic. It returns the current state and a dispatch function to update the state, similar to how a reducer works in Redux.

import React, { useReducer } from 'react';

// Reducer function
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

// Component using useReducer
function Counter() {
  const initialState = { count: 0 };
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => {
    dispatch({ type: 'INCREMENT' });
  };

  const decrement = () => {
    dispatch({ type: 'DECREMENT' });
  };

  return (
    <div>
      <h2>Count: {state.count}</h2>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

• useCallback and useMemo: These hooks are used for performance optimization. useCallback memoizes a function, preventing unnecessary re-renders, while useMemo memoizes a value, preventing unnecessary re-computations.

import React, { useState, useCallback } from 'react';

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

  // Define a callback function using useCallback
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default ExampleComponent;

• useRef: The useRef hook in React allows you to create a mutable reference that persists across re-renders of a component. It can be used to access and modify DOM elements, store mutable values, or preserve values between renders without triggering a re-render.

import { useRef } from "react";

const RefComponent = () => {
  const inputRef = useRef(null);

  const handleClick = () => {
    // Modifying the input element using the ref
    inputRef.current.value = "New value";

    // Focusing on the input element using the ref
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Click</button>
    </div>
  );
};

export default RefComponent;

Most operating systems are multi-threaded and hence can handle multiple operations executing in the background. When one of these operations is completed, the kernel tells Node.js, and the respective callback assigned to that operation is added to the event queue which will eventually be executed.

Features of Event Loop

1. An event loop is an endless loop, which waits for tasks, executes them, and then sleeps until it receives more tasks.

2. The event loop executes tasks from the event queue only when the call stack is empty i.e. there is no ongoing task.

3. The event loop allows us to use callbacks and promises.

4. The event loop executes the tasks starting from the oldest first.

Example:

console.log("This is the first statement");

setTimeout(function(){
    console.log("This is the second statement");
}, 1000);

console.log("This is the third statement");

Output:

This is the first statement

This is the third statement

This is the second statement

Explanation:

In the above example, the first console log statement is pushed to the call stack, and “This is the first statement” is logged on the console, and the task is popped from the stack. Next, the setTimeout is pushed to the queue and the task is sent to the Operating system and the timer is set for the task. This task is then popped from the stack. Next, the third console log statement is pushed to the call stack, and “This is the third statement” is logged on the console and the task is popped from the stack.

When the timer set by the setTimeout function (in this case 1000 ms) runs out, the callback is sent to the event queue. The event loop on finding the call stack empty takes the task at the top of the event queue and sends it to the call stack. The callback function for the setTimeout function runs the instruction and “This is the second statement” is logged on the console and the task is popped from the stack.