Extract reusable stateful logic into a function.
Section: Custom Hook Patterns
Basic custom hook
tsx
tsx
function useToggle(initial = false) {
const [value, setValue] = useState(initial);
const toggle = useCallback(() => setValue(v => !v), []);
return [value, toggle] as const;
}Explanation
Custom hooks let you share logic without changing component hierarchies.
Learn the surrounding workflow
Compare similar commands or jump into common fixes when this command is part of a bigger troubleshooting path.
Related commands
Same sheet · prioritizing Custom Hook Patterns