Cheat Sheet logoCheat Sheet Today
React Hooks Patterns/Return object from a custom hook

Use named returns for richer APIs.

Back to sheetBrowse commands
Sign in to save
Section: Custom Hook Patterns

Return object from a custom hook

tsx
tsx
function useDisclosure(initial = false) {
  const [isOpen, setIsOpen] = useState(initial);
  return {
    isOpen,
    open: () => setIsOpen(true),
    close: () => setIsOpen(false),
    toggle: () => setIsOpen(v => !v),
  };
}
Explanation

Objects are easier to read at call sites when hooks return several values or actions.

View in sheet →

Learn the surrounding workflow

Compare similar commands or jump into common fixes when this command is part of a bigger troubleshooting path.

Compare commandsView fixes

Related commands

Same sheet · prioritizing Custom Hook Patterns
Custom hook with options object
Prefer options objects for extensible APIs.
OpenIn sheettsxsame section
Basic custom hook
Extract reusable stateful logic into a function.
OpenIn sheettsxsame section
Track previous value
Store the previous render’s value.
OpenIn sheettsx3 tag match
Persist state to localStorage
Sync component state with localStorage.
OpenIn sheettsx3 tag match
Respond to media queries
Expose a boolean that tracks a CSS media query.
OpenIn sheettsx3 tag match
Expose derived async status
Return a status object from custom data hooks.
OpenIn sheettsx3 tag match