useSetState

Shallow merge state updates like class component setState.

Import


import { useSetState } from '@tidbcloud/uikit'

Usage

useSetState works similar to how this.setState works in class components – it shallow merges state partial into current state.


import { useSetState } from '@tidbcloud/uikit'
 
function Demo() {
  const [state, setState] = useSetState({
    name: 'John',
    age: 35,
    job: 'Engineer'
  })
 
  // state -> { name: 'John', age: 35, job: 'Engineer' }
 
  setState({ name: 'Jane' })
  // state -> { name: 'Jane', age: 35, job: 'Engineer' }
 
  setState({ age: 25, job: 'Manager' })
  // state -> { name: 'Jane', age: 25, job: 'Manager' }
 
  setState((current) => ({ age: current.age + 7 }))
  // state -> { name: 'Jane', age: 32, job: 'Manager' }
}

Limitations

Only works with objects. Primitive values and arrays are not supported:


import { useSetState } from '@tidbcloud/uikit'
 
useSetState([1, 2, 3]) // ❌ will not work
useSetState(1) // ❌ will not work
useSetState({ skills: ['JavaScript', 'TypeScript'] }) // ✅ works fine

Definition


type UseSetStateCallback<T> = (state: Partial<T> | ((currentState: T) => Partial<T>)) => void
 
type UseSetStateReturnValue<T> = [T, UseSetStateCallback<T>]
 
function useSetState<T extends Record<string, any>>(initialState: T): UseSetStateReturnValue<T>