Introducing Custom Hooks
Before starting to build custom Hooks, it’s very important to understand what exactly custom Hooks are.
In React apps, custom Hooks are regular JavaScript functions that satisfy the following conditions:
- The function name starts with
use(just as all built-in Hooks start withuse:useState(),useReducer(), etc.). - The function calls another React Hook (a built-in one or a custom one—doesn’t matter).
- The function does not just return JSX code (otherwise, it would essentially be a React component), though it could return some JSX code—as long as that’s not the only value returned.
If a function meets these three conditions, it can (and should) be called a custom (React) Hook. So, custom Hooks are really just normal functions with special names (starting with use) that call other (custom or built-in) Hooks and that do not (just) return JSX code. If you try to call a (custom or built-in) Hook...
