A lightweight React hook for smooth and deferred state updates using React’s `useTransition` and `useDeferredValue`.
npm install react-signal-hookuseTransition and useDeferredValue.
bash
npm install react-signal-hook
or
yarn add your-package-name
`
Import
`tsx
import useSignal from "your-package-name";
`
API
`ts
useSignal(
initialState: S | (() => S),
options?: {
smoothState?: boolean; // default: false
noTransition?: boolean; // default: false
}
): [
currentState: S,
setState: Dispatch>
]
`
- 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
$3
`tsx
function Counter() {
const [count, setCount] = useSignal(0);
return (
);
}
`
$3
`tsx
function FastCounter() {
// Returns state immediately, without deferring
const [count, setCount] = useSignal(0, { smoothState: true });
return (
);
}
`
$3
`tsx
function NoTransitionCounter() {
// Updates happen immediately, bypassing transitions
const [count, setCount] = useSignal(0, { noTransition: true });
return (
);
}
``