useSignal

A lightweight React hook for smooth and deferred state updates using React’s useTransition and useDeferredValue.

Installation

1npm install react-signal-hook
2# or
3yarn add your-package-name

Import

1import useSignal from "your-package-name";

API

1useSignal<S>(
2  initialState: S | (() => S),
3  options?: {
4    smoothState?: boolean;   // default: false
5    noTransition?: boolean;  // default: false
6  }
7): [
8  currentState: S,
9  setState: Dispatch<SetStateAction<S>>
10]

• initialState: A value or function for the initial state.
• options.smoothState: If true, returns immediate state instead of deferred state.
• options.noTransition: If true, skips React's transition mechanism on updates.

Features

• Deferred updates: Smooth UI responsiveness using useDeferredValue.
• Transition control: Batch updates inside React transitions with useTransition.
• Flexible behavior: Toggle smooth or immediate updates via options.

Examples

Basic usage

1function Counter() {
2  const [count, setCount] = useSignal(0);
3
4  return (
5    <button onClick={() => setCount(c => c + 1)}>
6      Count: {count}
7    </button>
8  );
9}

Immediate state (no defer)

1function FastCounter() {
2  // Returns `state` immediately, without deferring
3  const [count, setCount] = useSignal(0, { smoothState: true });
4
5  return (
6    <button onClick={() => setCount(100)}>
7      Jump to 100: {count}
8    </button>
9  );
10}

Disable transition

1function NoTransitionCounter() {
2  // Updates happen immediately, bypassing transitions
3  const [count, setCount] = useSignal(0, { noTransition: true });
4
5  return (
6    <button onClick={() => setCount(c => c + 1)}>
7      Instant Count: {count}
8    </button>
9  );
10}

License

MIT © RYN BSD