React hook to keep track of a "dirty" flag and manage an interval which clears it.

example.tsx

export default function ArmSliderControl() {
  const [joints, setJoints] = React.useState(JOINTS.map(() => 0));

  const publish = useRosPublisher(topics.arm.positions);

  const setDirty = useDirtyInterval(() => {
    publish({
      header: {
        seq: 0,
        stamp: {
          secs: Math.round(new Date().getTime() / 1000),
          nsecs: new Date().getMilliseconds() * 1000000,
        },
        frame_id: '',
      },
      name: JOINTS.map((joint) => joint.label),
      position: joints,
      velocity: JOINTS.map(() => 0),
      effort: JOINTS.map(() => 0),
    });
  }, 100);

  const handleChange = (index: number) => (value: number) => {
    setJoints(joints.map((joint, i) => (i === index ? value : joint)));
    setDirty();
  };

  const sliders = JOINTS.map(({ label, min, max }, index) => (
    <Slider
      key={label}
      label={label}
      min={min}
      max={max}
      value={joints[index]}
      onChange={handleChange(index)}
    />
  ));

  return (
    <MonitorFrame label="Arm Sliders" height={2} width={1}>
      <div className="flex flex-col gap-4">{sliders}</div>
    </MonitorFrame>
  );
}

useDirtyInterval.ts

export default function useDirtyInterval(handler: () => void, time: number) {
  const dirtyRef = React.useRef(false);
  const handlerRef = React.useRef<() => void>();

  React.useEffect(() => {
    handlerRef.current = handler;
  }, [handler]);

  React.useEffect(() => {
    const interval = setInterval(() => {
      if (dirtyRef.current) {
        dirtyRef.current = false;
        handlerRef.current?.();
      }
    }, time);

    return () => clearInterval(interval);
  }, [time]);

  return () => (dirtyRef.current = true);
}