---
title: React Hooks explained
description: >-
  Hooks are functions that allow developers to "hook into" React state and lifecycle features from
  functional components. They are called inside a function...
url: https://expiredqueues.com/react-hooks-explained/
date: '2022-02-22T21:23:00.000Z'
image: https://expiredqueues.com/images/og/react-hooks-explained-8b407cd5.jpg
---

JavaScript posts js

# React Hooks explained

22 February 2022 By Adrian 4 min read

## 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](https://reactjs.org/docs/hooks-intro.html) 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 :

```jsx
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:

```jsx
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:

```js
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:

```jsx
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.

### You might be interested in:

- [Top ReactJS Tools of Feb 2019](https://expiredqueues.com/top-reactjs-tools-feb-2019/)
- [Flutter vs. React Native: What You Need to Know](https://expiredqueues.com/flutter-vs-react-native-what-you-need-to-know/)

[Previously Awesome Free SVG Icons](https://expiredqueues.com/awesome-best-free-svg-icons/) [Next Flutter vs. React Native: What You Need to Know Before Choosing Your Mobile App Framework](https://expiredqueues.com/flutter-vs-react-native-what-you-need-to-know/)

## Structured data

```json
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "React Hooks explained",
  "datePublished": "2022-02-22T21:23:00.000Z",
  "dateModified": "2022-02-22T21:23:00.000Z",
  "author": {
    "@type": "Person",
    "name": "Adrian",
    "url": "https://expiredqueues.com/about/"
  },
  "publisher": {
    "@type": "Person",
    "name": "Adrian"
  },
  "mainEntityOfPage": "https://expiredqueues.com/react-hooks-explained/",
  "keywords": "posts, js, reactjs, web-development",
  "articleSection": "JavaScript"
}
```