Cheat Sheet logoCheat Sheet Today
React Hooks Patterns/Custom hook with options object

Prefer options objects for extensible APIs.

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

Custom hook with options object

tsx
tsx
function useInterval({ callback, delay, enabled = true }: {
  callback: () => void;
  delay: number;
  enabled?: boolean;
}) {
  useEffect(() => {
    if (!enabled) return;
    const id = setInterval(callback, delay);
    return () => clearInterval(id);
  }, [callback, delay, enabled]);
}
Explanation

Options objects make hook signatures easier to extend without positional argument churn.

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
Return object from a custom hook
Use named returns for richer 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