useResetState

State with a reset function for the initial value.

Import

import { useResetState } from '@kamod-ch/hooks'

Live demo

Basic demo

State with a reset function for the initial value.

Message

Preview: Hello hooks

import { useResetState } from '@kamod-ch/hooks'

export default function UseResetStateDemo() {
  const [message, setMessage, reset] = useResetState('Hello hooks')

  return (
    <div>
      <label>
        Message
        <input value={message} onInput={(event) => setMessage(event.currentTarget.value)} />
      </label>
      <p><strong>Preview:</strong> {message}</p>
      <button type="button" onClick={reset}>Reset</button>
    </div>
  )
}

API

TypeScript signature

import type { Dispatch, SetStateAction } from '../utils/types-compat.js';
type ResetState = () => void;
declare const useResetState: <S>(initialState: S | (() => S)) => [S, Dispatch<SetStateAction<S>>, ResetState];
export default useResetState;
/

SSR considerations

This hook is safe to import during SSR. If your effect body touches the DOM, keep that work inside the effect callback.

Browser compatibility

Works in any modern browser supported by Preact.