Logo
v0.6.2
DEMO
Count - 0

useStateCompare

useState hook with custom compare function to avoid re-rendering when state is the same, compares with previous state.

💡

create a custom compare function, outside of the hook to keep a stable reference, otherwise it will be recreated on every render

⚠️

compare is only used when in setState(value), value is not a function, in that case the default react behavior is used.

Usage

import { useStateCompare } from '@react-hooks-library/core'

type State = {
  count: number
}

const compare = (oldState: State, newState: State) =>
  oldState.count === newState.count ? oldState : newState

export function Demo() {
  const [state, setState] = useStateCompare<State>({
    initialValue: () => ({ count: 0 }),
    compare
  })

  return (
    <div>
      <div>Count - {state.count}</div>
      <button onClick={() => setState({ count: state.count + 1 })}>
        Increment
      </button>
    </div>
  )
}

Type Declarations

declare type UseStateCompare<T> = {
  initialValue: T | (() => T)
  compare: (oldValue: T, newValue: T) => T
}
/**
 * useState hook with custom compare function to avoid re-rendering
 * when state is the same, compares with previous state
 *
 *
 * Note: create a custom compare function, outside of the hook to a keep
 * stable reference, otherwise it will be recreated on every render
 *
 * @see https://react-hooks-library.vercel.app/core/useStateCompare
 */
declare function useStateCompare<T>({
  initialValue,
  compare
}: UseStateCompare<T>): [T, Dispatch<SetStateAction<T>>]

Source

Source | Demo | Docs