Explore 24 Custom Hooks For React!

What are Custom Hooks?

Custom Hooks in React allow you to extract and reuse logic from components, making your code more modular and maintainable. They are functionsthat can encapsulate complex behavior and be shared across differentcomponents.

Navigating the Hooks

Navigating the Hooks Here, we present 24 custom hooks designed to enhance your React development experience. Each hook addresses specific use cases, providing solutions to common challenges in building robust and efficient React applications.

1- usePreviousState Hook

The usePreviousState hook is a custom React hook designed to track the previous state of a component. This can be particularly useful in scenarios where you need to compare the current state with the previous state to determine changes or trigger certain actions.

Explore an interactive demo of usePreviousState hook

Inputs:

1- state (Any): The current state that needs to be tracked.

Outputs:

1- oldState (Any): The previous state of the component.

1import { useEffect, useRef } from "react";
2
3const usePreviousState = (state) => {
4  const oldState = useRef(state);
5
6  useEffect(() => {
7    oldState.current = state;
8  }, [state]);
9
10  return oldState.current;
11};
12
13export default usePreviousState;

2- useUpdateEffect Hook

The useUpdateEffect hook is designed to be similar to the useEffect hook in React but with a key difference: it skips its initial execution and runs the effect only on subsequent re-renders, excluding the initial render. This can be useful when you want to perform certain actions or side effects only after the initial render has occurred and avoid unnecessary execution during component mounting.

Explore an interactive demo of useUpdateEffect hook

Inputs:

1- callback (Function): The function to run when the effect is triggered on update.
2- dependencies (Array): An array of dependencies to watch for changes and trigger the effect accordingly.

1const useUpdateEffect = (callback, dependencies) => {
2  const mount = useRef(false);
3
4  useEffect(() => {
5    if (!mount.current) {
6      mount.current = true;
7      return;
8    }
9
10    return callback;
11  }, dependencies);
12};
13
14export default useUpdateEffect;

3- useDocumentTitle Hook

The useDocumentTitle hook allows you to dynamically update the title of the document in a React component. It sets the document title to a specified value when the component mounts and restores the original title when the component unmounts. This functionality is useful for providing meaningful titles to pages or components within a single-page application.

Explore an interactive demo of useDocumentTitle hook

Inputs:

1- title (String): The new title to be set for the document.

1import { useEffect } from "react";
2
3const useDocumentTitle = (title) => {
4  useEffect(() => {
5    const originalTitle = document.title;
6    document.title = title;
7
8    return () => (document.title = originalTitle);
9  }, [title]);
10};
11
12export default useDocumentTitle;

4- useToggle Hook

The useToggle hook is a custom React hook designed to manage a boolean state, providing a function to toggle between true and false. This hook simplifies the management of boolean states in React components by encapsulating state logic and providing a convenient toggle function.

Explore an interactive demo of useToggle hook

Inputs:

1- initialValue (Boolean): The initial state for the toggle. Default is false.

Outputs:

1- value (Boolean): Represents the current state of the toggle.
2- toggleValue (Function): Toggles the state between true and false or sets it to a specific boolean value.

1
2const useToggle = (initialValue = false) => {
3  const [value, setValue] = useState(initialValue);
4
5  function toggleValue(value) {
6    setValue((currentValue) =>
7      typeof value === "boolean" ? value : !currentValue
8    );
9  }
10
11  return [value, toggleValue];
12};
13
14export default useToggle;

5- useCopyText Hook

The useCopyText hook facilitates copying text to the clipboard. It utilizes the Clipboard API to write the provided text to the clipboard and keeps track of the last copied text.

Explore an interactive demo of useCopyText hook

Outputs:

1- copiedText (String): Represents the last text that was copied to the clipboard.
2- setCopy (Function): Function to copy text to the clipboard. Usage: setCopy(text).

1import { useEffect, useRef, useState } from "react";
2
3const useCopyText = () => {
4  const [copiedText, setCopiedText] = useState("");
5
6  function setCopy(text) {
7    navigator.clipboard.writeText(text);
8    setCopiedText(text);
9  }
10
11  return [copiedText, setCopy];
12};
13
14export default useCopyText;