createThrottledDataContext

Creates a React context holding a state whose updates are throttled: however often the state is set, components using the context re-render at most every 300 milliseconds.

This is useful for data that changes very often, e.g. when every item of a repeater reports its latest metric value to the widget.

function createThrottledDataContext<T>(
  defaultValue: T
): [Context<[T, Dispatch<SetStateAction<T>>]>, FunctionComponent<PropsWithChildren>]

Arguments

Argument	Type	Description
defaultValue	T	The initial state.

Returns

A tuple of:

1. The context. Its value is a tuple of the state and its setter, like the return value of useState.
2. The provider component. Every rendered provider holds its own state.

Example

Each item of a repeater reports its metric value, and the widget displays the highest value:

src/widgets/example/Example.tsx

import React, {useContext, useEffect} from 'react'
import {createThrottledDataContext, Repeater, useMetricField} from '@modbros/dashboard-sdk'

const [HighestValueContext, HighestValueProvider] = createThrottledDataContext<number>(0)

const Item = () => {
  const channelValue = useMetricField({field: 'metric'})
  const [, setHighest] = useContext(HighestValueContext)

  useEffect(() => {
    const value = Number(channelValue?.value.value)

    if (Number.isFinite(value)) {
      setHighest((highest) => Math.max(highest, value))
    }
  }, [channelValue, setHighest])

  return null
}

const Highest = () => {
  const [highest] = useContext(HighestValueContext)

  return <strong>{highest}</strong>
}

export default function Example() {
  return (
    <HighestValueProvider>
      <Repeater field="metrics">{(item, index) => <Item key={index}/>}</Repeater>
      <Highest/>
    </HighestValueProvider>
  )
}