Update input value from mobx store with debounce

Question

I have a MobX store and 2 Components, connected to the same value:

import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react-lite';

const store = makeAutoObservable({
  value: 0,
  setValue: (v) => {
    this.value = v;
  },
});

const ComponentOne = observer(() => {
  function handleOnChange(e) {
    store.setValue(e.target.value);
  }

  return <input value={store.value} onChange={handleOnChange} />;
});

const ComponentTwo = observer(() => {
  function handleOnChange(e) {
    store.setValue(e.target.value);
  }

  return <input value={store.value} onChange={handleOnChange} />;
});

I need:

1. Changing the input value of <ComponentOne/> should cause the input value in <ComponentTwo/> to be updated from the new store value
2. Storing data into MobX storage from Components should be done with debounce.

Answer 1

My Solution:

import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react-lite';
import { useDebouncedCallback } from 'use-debounce';

const store = makeAutoObservable({
  value: 0,
  setValue: (v) => {
    this.value = v;
  },
});

export function useStoreValue() {
  const storeValue = store.value;
  const setStoreValue = store.setValue;
  const [value, setValue] = useState(storeValue);

  // eslint-disable-next-line object-curly-newline
  const debouncedSetStoreValue = useDebouncedCallback(setStoreValue, 350, { maxWait: 1000 });

  useEffect(
    () => {
      if (storeValue !== value) {
        debouncedSetStoreValue(value);
      }
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [value]
  );

  useEffect(() => {
    setValue(storeValue);
  }, [storeValue]);

  return [value, setValue];
}

const ComponentOne = observer(() => {
  const [value, setValue] = useStoreValue();

  function handleOnChange(e) {
    setValue(e.target.value);
  }

  return <input value={value} onChange={handleOnChange} />;
});

const ComponentTwo = observer(() => {
  const [value, setValue] = useStoreValue();

  function handleOnChange(e) {
    setValue(e.target.value);
  }

  return <input value={value} onChange={handleOnChange} />;
});