What are react hooks?

Hooks are functions that allow developers to “hook into” React state and lifecycle features from functional components. They are called inside a function component to add React features to it.

React Hooks are a feature introduced in React 16.8 that allow developers to use state and other React features in functional components. Prior to the introduction of Hooks, it was necessary to use class-based components to use state and other React features in a React application.

Hooks are functions that allow developers to “hook into” React state and lifecycle features from functional components. They are called inside a function component to add React features to it. By using Hooks, developers can use state and other React features without writing a class component.

There are several built-in Hooks that are provided by React, such as useState and useEffect.

useState is a Hook that allows a functional component to have state. It takes an initial state as an argument and returns an array with two elements: the current state and a setter function that can be used to update the state. An example :

import React, { useState } from 'react';

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

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

useEffect is a Hook that allows a functional component to perform side effects. It takes a function as an argument and is called after the component renders. The function passed to useEffect will be called whenever the component is updated, similar to the componentDidUpdate lifecycle method in a class-based component. Here’s an example of how useEffect can be used to fetch data and update the state of a functional component:

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

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

  useEffect(() => {
    fetch('https://www.expiredqueues.com/api/endpoint')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? <p>{data.message}</p> : <p>Loading...</p>}
    </div>
  );
}

Hooks provide a way to add state and other React features to functional components and can help make code easier to understand and maintain by reducing the need to use class-based components.

So what are custom hooks?

Custom React Hooks are functions that allow developers to extract reusable logic from components and share it across multiple components. They are a way to share behavior that can be defined using React Hooks, such as useState and useEffect, between multiple components.

Custom React Hooks are created by defining a function that starts with the word “use” and performs some logic using one or more of the built-in Hooks provided by React. Let’s write an example of a simple custom hook that fetches data from an API and returns the data and a loading status:

import { useState, useEffect } from 'react'

function useFetchData(url) {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(url)
      const data = await response.json()
      setData(data)
      setLoading(false)
    }
    fetchData()
  }, [url])

  return { data, loading }
}

This custom hook can be used in a component like this:

import { useFetchData } from './useFetchData'

function Example() {
  const { data, loading } = useFetchData('https://www.expiredqueues.com/api/data')

  if (loading) {
    return <p>Loading...</p>
  }

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  )
}

In this example, the useFetchData custom hook is called inside the Example component to fetch data from an API and store the data and loading status in state. The hook returns an object with two properties: data and loading, which are destructured and used in the component to display the data or a loader component while the data is being fetched.

Custom React Hooks can make it easier to reuse logic across multiple components and can help to make code more modular and maintainable. They can also make it easier to test and debug code, as the logic can be separated into individual functions that can be tested in isolation.