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:
<ComponentOne/> should cause the input value in <ComponentTwo/> to be updated from the new store valueMy 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} />;
});