Hello welcome to blog, today in this blog we're going to look at some ReactJs hooks and use the most commonly used ones.

First and foremost, it's important to know what a “Hook” is, and why hooks are so important.

What are Hooks

Hooks allow function components to access state and other React functionality. As a result, class components are generally no longer needed. This makes the code cleaner, shorter and easier to understand.

Note that hooks always start with “use”.

Different types of hoocks

hooks are subdivided into several types:

• State Hooks

• Effect Hooks

• Context Hooks

• Ref Hooks

• Callback Hooks

• Layout Hooks

• Form Hooks

• Animation Hooks

• Custom Hooks

1 - State Hooks

This type of Hook allows us to manage states, in our app,

State hooks, such as useState, allow functional components to manage local state, in line with React's philosophy of simplicity and composability:

Example

• useState: the most popular and widely used hook. It allows functional components to have state variables. It takes an initial state value as argument and returns an array with two elements - the current state value (getter) and a function to update that state (setter).

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

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

2- Effect Hooks

permettent à un composant de se connecter à des systèmes externes et de se synchroniser avec eux. Tels que la gestion de réseau, le DOM du navigateur, les animations, les widgets écrits à l'aide d'une bibliothèque d'interface utilisateur différente et d'autres codes non React.

Example:

• useEffect: It allows you to perform secondary effects, such as data retrieval, subscriptions or DOM manipulation after the component has been rendered.

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

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // This effect runs after the component has rendered

    // Perform some asynchronous data fetching
    fetchData()
      .then((result) => {
        setData(result);
      })
      .catch((error) => {
        console.error('Error fetching data:', error);
      });

    // Clean up the effect
    return () => {
      // Perform any necessary cleanup here
      // This is optional but important to prevent memory leaks
    };
  }, []); // Empty dependency array, so the effect runs only once on component mount

  return <div>{data ? <p>Data: {data}</p> : <p>Loading data...</p>}</div>;
}

export default Example;

3- Context Hooks

A Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme or preferred language.

• useContext: is used to consume values from a React context. Context allows data to be passed through the component tree without having to manually pass props at each level.

4- Ref Hooks

5- Callback Hooks