use-mutative / Exports

use-mutative

Table of contents

Type Aliases

• DraftFunction
• Reducer
• Updater

Functions

• useMutative
• useMutativeReducer

Type Aliases

DraftFunction

Ƭ DraftFunction<S>: (draft: Draft<S>) => void

Type parameters

Name
S

Type declaration

▸ (draft): void

Parameters

Name	Type
draft	Draft<S>

Returns

void

Defined in

index.ts:31

---

Reducer

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

Type parameters

Name
S
A

Type declaration

▸ (draftState, action): void | S | undefined

Parameters

Name	Type
draftState	Draft<S>
action	A

Returns

void | S | undefined

Defined in

index.ts:152

---

Updater

Ƭ Updater<S>: (value: S | () => S | DraftFunction<S>) => void

Type parameters

Name
S

Type declaration

▸ (value): void

Parameters

Name	Type
value	S | () => S | DraftFunction<S>

Returns

void

Defined in

index.ts:32

Functions

useMutative

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

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

Type parameters

Name	Type
S	S
F	extends boolean = false
O	extends PatchesOptions = false

Parameters

Name	Type	Description
initialValue	S	The initial state. You may optionally provide an initializer function to calculate the initial state.
options?	ExternalOptions<O, F>	Options for the useMutative hook.

Returns

Result<InitialValue<S>, O, F>

Example

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

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

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

Defined in

index.ts:65

---

useMutativeReducer

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

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

Type parameters

Name	Type
S	S
A	A
I	I
F	extends boolean = false
O	extends PatchesOptions = false

Parameters

Name	Type
reducer	Reducer<S, A>
initializerArg	S & I
initializer	(arg: S & I) => S
options?	ExternalOptions<O, F>

Returns

ReducerResult<S, A, O, F>

Example

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 });

Defined in

index.ts:154

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

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

Type parameters

Name	Type
S	S
A	A
I	I
F	extends boolean = false
O	extends PatchesOptions = false

Parameters

Name	Type
reducer	Reducer<S, A>
initializerArg	I
initializer	(arg: I) => S
options?	ExternalOptions<O, F>

Returns

ReducerResult<S, A, O, F>

Example

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 });

Defined in

index.ts:167

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

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

Type parameters

Name	Type
S	S
A	A
F	extends boolean = false
O	extends PatchesOptions = false

Parameters

Name	Type
reducer	Reducer<S, A>
initialState	S
initializer?	undefined
options?	ExternalOptions<O, F>

Returns

ReducerResult<S, A, O, F>

Example

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 });

Defined in

index.ts:180