Demon Tech Roadmap

React

React Custom Hooks

Custom Hooks bundle complex logic into reusable functions.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

If you find yourself writing the exact same `useState` and `useEffect` logic in three different components, you can combine them into a Custom Hook. This cleans up your code and makes your logic completely reusable.

Example

1/* this creates a custom hook */
2import { useState } from "react";
3
4function useToggle(initial) {
5  const [value, setValue] = useState(initial);
6  const toggle = () => setValue(!value);
7  return [value, toggle];
8}

Key Points

Custom Hooks must always start with the word "use".
They can call other React Hooks inside them.
They are just regular JavaScript functions.
They help keep components clean and strictly focused on UI.

Up Next

Continue your journey with the next topic.

Go to React Event Handling ❯