hook

Create Custom Hook

Create a custom React hook following Darkroom conventions. The hook itself is stack-agnostic — what differs between satus and novus is the path alias.

Step 1 — Check existing abstractions

Apply the Laziness Ladder before scaffolding, even when the request proposes a hook name. Search project hooks, utilities, and callers by behavior and related terms; read matching implementations to check their contract and import path. Prefer a matching project hook, including wrappers around hamo, over direct dependency calls or a new wrapper. If one fits, use it and stop here.

For example, in Satus, search for useDeviceDetection, isDesktop, and media-query usage before adding useIsDesktop or repeating a breakpoint string. When the local contract matches the requirement, use const { isDesktop } = useDeviceDetection() with the verified local import. Check breakpoint semantics and server/initial render behavior; do not assume every media query means the same thing.

If no project abstraction fits, check runtime/platform APIs and installed dependencies. For common hook behavior, check installed hamo hooks using the documentation procedure below. Before creating a hook, name the implementations checked and the behavior they lack; then continue only for that gap.

Step 2 — Detect stack

Read package.json:

• dependencies.next → satus / Next.js (path alias @/, hooks require a 'use client' boundary)
• dependencies["react-router"] → novus / React Router (path alias ~/, components isomorphic)

Step 3 — Choose location

Stack	Hook path
satus	lib/hooks/<name>.ts
novus	hooks/<name>.ts (novus puts hooks/ at the project root)

Confirm by checking the existing lib/hooks/ or hooks/ directory structure if either pattern is unclear from package.json alone.

Step 4 — Emit template

// lib/hooks/<name>.ts (novus: hooks/<name>.ts)
'use client' // satus only, hooks live in the client boundary; novus is isomorphic, omit it
// Client Components can prerender on the server. Read browser APIs in effects
// or event handlers, with the same initial state on the server and browser.

import { useState, useEffect } from 'react'

interface Use<Name>Options {
  // Hook configuration options
}

interface Use<Name>Return {
  // Return type definition
}

export function use<Name>(options?: Use<Name>Options): Use<Name>Return {
  // Implementation
  return {
    // Return values
  }
}