4 Typical Scenarios for Custom React Hooks

Tips that are not mentioned in the official documentation.

Shuai Li
5 min readJan 18, 2022


Why do we need to build our own hooks?

  • Custom Hooks can help us write more reusable code.
  • Custom Hooks can help us split complex logic and simplify components.

What does this article for?

The official documentation is too brief in the chapter introducing custom hooks, and many important scenarios are not mentioned. So I would want to supplement the official documentation and summarize 4 typical scenarios for using custom Hooks.


If you don’t know anything about React Hooks, please read the official documentation first to know why we should use hooks, and understand some build-in hooks such as useState, useEffect .

How to custom hooks?

First of all, we need to clarify a basic principle: React Hook is also a function. From the perspective of JavaScript syntax, React Hook is no different from a normal function.

Also, if a function has the following characteristics, we will take it as a hook:

  • Its name starts with use
  • Use other hooks inside its function body

For example, this is a hook:

If a function’s name doesn’t start with use but use other hooks inside its body, then an error will be thrown during the compile phase.

Source Code



Shuai Li

An enthusiastic game player of Earth Online. My Newsletter: https://shuaili.substack.com/