React 19 Ready

The hook suite that upgrades your state story.

gReact Hooks keeps everything you love about hooks and layers in modern state ergonomics: immutable snapshots, effortless partial updates, and production-grade utilities.

Explore Hooks Why gReact
Install with your favourite package manager: pnpm add greact-hooks
useState2 in action
const [presence, setPresence] = useState2({
                        status: "offline",
                        lastSeen: 0,
                        });

                        useInterval(() => {
                        fetchPresence().then(setPresence);
                        }, 3000);

                        setPresence({ status: "online" });

Highlights built for teams shipping tomorrow.

Drop in `useState2` and unlock a cleaner state flow immediately. Every hook in the suite is engineered for concurrency-safe React 19 apps.

Drop-in upgrade

Swap your imports and keep coding. `useState2` returns the same `[state, setState]` tuple you already know, but plugs in smarter semantics.

No mutation surprises

Immutable snapshots make accidental mutations a thing of the past. Inspect state confidently in devtools and concurrent renders.

Partial patches included

Update only what changed. Pass a patch object or a functional updater — we merge the rest so you can stay focused on the UI.

Tree-shakeable footprint

ES module builds ship with types and zero runtime baggage. Pick the hooks you need and your bundle stays lean.

State ergonomics without the refactor hangover.

`useState2` introduces partial merging and read-only snapshots while staying fully backwards compatible. It is the evolution of state management you always wanted — designed to thrive in the age of concurrent rendering.

Why teams switch

  • Safer functional updates with deep context.
  • Painless migration from existing `useState` usage.
  • Battle-tested alongside utilities like `useInterval`.

Hook documentation

Everything you need to integrate gReact Hooks today.

Core

useState2<T>(initialState)

Smart state with immutable reads and ergonomic writes. Works as a drop-in replacement for React's `useState`.

Signature

const [state, setState] = useState2(initialState);
                            setState(nextValue | patch | updater);

Key behaviours

  • Read-only snapshots guard against accidental mutation.
  • Patch objects merge like class component `setState`.
  • Functional updates receive a fresh snapshot each render.

Example

const [todo, setTodo] = useState2({ title: "", done: false });
                            setTodo({ done: true });
                            setTodo((prev) => ({ ...prev, title: prev.title.trim() }));
Utility

useInterval(callback, delay)

Run logic on a stable cadence without manual cleanup. Pause by passing `null` for the delay.

Signature

useInterval(callback: () => void, delay: number | null);

Patterns

  • Polling APIs and refreshing dashboards.
  • Scheduling background updates alongside `useState2`.
  • Pausing work by toggling the delay to `null`.

Example

const [tick, setTick] = useState2(0);
                            useInterval(() => setTick((n) => n + 1), 1000);
Utility

useConsole()

Safely access the global console while providing a no-op fallback when it is unavailable (such as during SSR or in locked-down environments).

Signature

const consoleApi = useConsole();
                             consoleApi.log("ready");

Key behaviours

  • Returns the existing console object when present.
  • Supplies stubbed log, warn, and error methods otherwise.
  • Prevents runtime crashes when third-party code expects console.
Meta

useHook({ hook, name })

Validates that an injected hook is well-formed and runs it through a stable callback so you can expose hook extension points without compromising React's naming rules.

Signature

const runHook = useHook({ hook: providedHook, name: "useProvided" });
                             runHook();

Key behaviours

  • Throws early when the supplied hook is not a function.
  • Enforces the use prefix on the name so React tooling stays accurate.
  • Memoises the returned callback until either hook or name changes.
Navigation

useNavigate(href)

Perform imperative navigation by assigning to window.location.href. Handy for redirects outside router contexts.

Signature

useNavigate("/dashboard");

Patterns

  • Route after completing an async workflow.
  • Fallback navigation when a router is not present.
  • Integrate with external auth providers that expect window redirects.
State

useToggleToggle(initialState?)

Manage boolean state with a stable toggler backed by useState2. Perfect for modals, dropdowns, and other show/hide UI behaviours.

Signature

const [isOpen, toggle] = useToggleToggle(false);

Key behaviours

  • Defaults to false when no initial state is provided.
  • toggle flips the state each time it is invoked.
  • Maintains a stable toggle reference across renders.