useSetState

Object state merging like class setState.

Import

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

Live demo

Basic demo

Object state merging like class setState.

NameRole

{
  "name": "Ada",
  "role": "Maintainer"
}

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

export default function UseSetStateDemo() {
  const [state, setState] = useSetState({ name: 'Ada', role: 'Maintainer' })

  return (
    <div>
      <label>
        Name
        <input value={state.name} onInput={(event) => setState({ name: event.currentTarget.value })} />
      </label>
      <label>
        Role
        <input value={state.role} onInput={(event) => setState({ role: event.currentTarget.value })} />
      </label>
      <pre>{JSON.stringify(state, null, 2)}</pre>
    </div>
  )
}

API

TypeScript signature

export type SetState<S extends Record<string, any>> = <K extends keyof S>(state: Pick<S, K> | null | ((prevState: Readonly<S>) => Pick<S, K> | S | null)) => void;
declare const useSetState: <S extends Record<string, any>>(initialState: S | (() => S)) => [S, SetState<S>];
export default useSetState;
/

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.