Custom Hooks
Last updated: 2026-11-02
Custom Hooks Custom Hooks
A custom hook is an ordinary function whose name starts with use, which may call other hooks inside and turns stateful logic such as requests, debouncing, persistence or toggling into a reusable unit. Every call owns its own state — what gets reused is the logic, not the state itself. It is the standard way to share behaviour between components without sharing data, and it keeps each component's state local and easy to reason about.
| Group | Component Patterns |
|---|---|
| Kind | Hook |
| Since | React 16.8 |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
// the name must start with use so that ESLint can check the rules of hooks
function useToggle(initial = false) {
const [on, setOn] = useState(initial)
const toggle = () => setOn(v => !v)
return [on, toggle] // the return shape is up to you: an array or an object
}Returns：No fixed signature — you define it. By convention it returns a [value, action] tuple, or an object holding a set of actions.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
The two buttons toggle independently — Lamp and Fan each hold their own on state that never interferes with the other, yet both share the same useToggle logic.💡 Key Points
🏷️ More Component Patterns
💡 Related Cases
📚 Related Tutorials
❓ FAQ
