use-mutative

DraftFunction<S> = (draft) => void

Defined in: index.ts:20

S

Draft<S>

void

InitialValue<I> = I extends (...args) => infer R ? R : I

Defined in: index.ts:23

I extends any

Reducer<S, A> = (draftState, action) => void | S | undefined

Defined in: index.ts:149

S

A

Draft<S>

A

void | S | undefined

ReducerResult<S, A, O, F> = O extends true | object ? [F extends true ? Immutable<S> : S, Dispatch<A>, Patches<O>, Patches<O>] : F extends true ? [Immutable<S>, Dispatch<A>] : [S, Dispatch<A>]

Defined in: index.ts:138

S

A

O extends PatchesOptions

F extends boolean

Result<S, O, F> = O extends true | object ? [F extends true ? Immutable<S> : S, Updater<S>, Patches<O>, Patches<O>] : F extends true ? [Immutable<S>, Updater<S>] : [S, Updater<S>]

Defined in: index.ts:25

S

O extends PatchesOptions

F extends boolean

Updater<S> = (value) => void

Defined in: index.ts:21

S

S | (() => S) | DraftFunction<S>

void

useMutative<S, F, O>(initialValue, options?): Result<InitialValue<S>, O, F>

Defined in: index.ts:54

useMutative is a hook that is similar to useState but it uses mutative to handle the state updates.

S

F extends boolean = false

O extends PatchesOptions = false

S

The initial state. You may optionally provide an initializer function to calculate the initial state.

ExternalOptions<O, F>

Options for the useMutative hook.

Result<InitialValue<S>, O, F>

import { act, renderHook } from '@testing-library/react';

import { useMutative } from '../src/index';

const { result } = renderHook(() => useMutative({ items: [1] }));
const [state, updateState] = result.current;
act(() =>
  updateState((draft) => {
    draft.items.push(2);
  })
);
const [nextState] = result.current;
expect(nextState).toEqual({ items: [1, 2] });

useMutativeReducer is a hook that is similar to useReducer but it uses mutative to handle the state updates.

import { act, renderHook } from '@testing-library/react';
import { type Draft } from 'mutative';

import { useMutativeReducer } from '../src/index';

const { result } = renderHook(() =>
  useMutativeReducer(
    (
      draft: Draft<Readonly<{ count: number }>>,
      action: {
        type: 'increment';
      }
    ) => {
      switch (action.type) {
        case 'increment':
          draft.count += 1;
      }
    },
    { count: 0 }
  )
);
const [, dispatch] = result.current;
act(() => dispatch({ type: 'increment' }));
expect(result.current[0]).toEqual({ count: 1 });

useMutativeReducer<S, A, I, F, O>(reducer, initializerArg, initializer, options?): ReducerResult<S, A, O, F>

Defined in: index.ts:151

S

A

I

F extends boolean = false

O extends PatchesOptions = false

Reducer<S, A>

S & I

(arg) => S

ExternalOptions<O, F>

ReducerResult<S, A, O, F>

useMutativeReducer<S, A, I, F, O>(reducer, initializerArg, initializer, options?): ReducerResult<S, A, O, F>

Defined in: index.ts:164

S

A

I

F extends boolean = false

O extends PatchesOptions = false

Reducer<S, A>

I

(arg) => S

ExternalOptions<O, F>

ReducerResult<S, A, O, F>

useMutativeReducer<S, A, F, O>(reducer, initialState, initializer?, options?): ReducerResult<S, A, O, F>

Defined in: index.ts:177

S

A

F extends boolean = false

O extends PatchesOptions = false

Reducer<S, A>

S

undefined

ExternalOptions<O, F>

ReducerResult<S, A, O, F>