함수: usePacedMutations()

function usePacedMutations<TVariables, T>(config): (variables) => Transaction<T>;

정의 위치: usePacedMutations.ts:93

타이밍 전략을 사용하여 페이스가 조정된 뮤테이션을 관리하는 React 훅입니다.

디바운싱, 큐잉 또는 스로틀링과 같은 플러그형 전략을 사용하여 낙관적 뮤테이션을 제공합니다. 낙관적 업데이트는 onMutate을 통해 즉시 적용되며, 실제 영속성은 전략에 의해 제어됩니다.

타입 매개변수

TVariables

TVariables = unknown

T

T 확장 object = Record<string, unknown>

매개변수

config

PacedMutationsConfig<TVariables, T>

onMutate, mutationFn 및 strategy를 포함하는 구성입니다

반환값

변수를 허용하고 Transaction 객체를 반환하는 mutate 함수입니다

(variables): Transaction<T>;

매개변수

variables

TVariables

반환값

Transaction<T>

예제

// Debounced auto-save
function AutoSaveForm({ formId }: { formId: string }) {
  const mutate = usePacedMutations<string>({
    onMutate: (value) => {
      // Apply optimistic update immediately
      formCollection.update(formId, draft => {
        draft.content = value
      })
    },
    mutationFn: async ({ transaction }) => {
      await api.save(transaction.mutations)
    },
    strategy: debounceStrategy({ wait: 500 })
  })

  const handleChange = async (value: string) => {
    const tx = mutate(value)

    // Optional: await persistence or handle errors
    try {
      await tx.isPersisted.promise
      console.log('Saved!')
    } catch (error) {
      console.error('Save failed:', error)
    }
  }

  return <textarea onChange={e => handleChange(e.target.value)} />
}

// Throttled slider updates
function VolumeSlider() {
  const mutate = usePacedMutations<number>({
    onMutate: (volume) => {
      settingsCollection.update('volume', draft => {
        draft.value = volume
      })
    },
    mutationFn: async ({ transaction }) => {
      await api.updateVolume(transaction.mutations)
    },
    strategy: throttleStrategy({ wait: 200 })
  })

  return <input type="range" onChange={e => mutate(+e.target.value)} />
}

// Debounce with leading/trailing for color picker (persist first + final only)
function ColorPicker() {
  const mutate = usePacedMutations<string>({
    onMutate: (color) => {
      themeCollection.update('primary', draft => {
        draft.color = color
      })
    },
    mutationFn: async ({ transaction }) => {
      await api.updateTheme(transaction.mutations)
    },
    strategy: debounceStrategy({ wait: 0, leading: true, trailing: true })
  })

  return (
    <input
      type="color"
      onChange={e => mutate(e.target.value)}
    />
  )
}