Simpler alternative to mobx-react-lite
the problem of state management still exists. while using mobx i was working with overrated package mobx-react-lite
i don't understand why mobx-react-lite
has such feature as useObserver
.
in my mind useObserver
seems to be useless thing. all react bindings for mobx should be replaced with the following function:
function useObservable<T>(value: T): T {
if (!isObservable(value)) {
throw new TypeError(`Expected observable, but got: ${typeof value}`)
}
const [flag, forceUpdate] = useState(false)
useEffect(() => {
const dispose = deepObserve(value, () => forceUpdate(!flag))
return () => dispose()
}, [flag])
return value
}
- it works with both global state/local states
- no need to use strange thing
useObserver
- works both inside/outside of react code
go here and copy source file (12 lines) to your project (because package managers sucks)
import { observable } from 'mobx'
import { useObservable } from './useObservable'
const myState = observable({
count: 1,
foo: { bar: { baz: 123 } },
increment() {
this.count += 1
},
decrementBaz() {
this.foo.bar.baz -= 1
}
});
setTimeout(() => {
// this will update your component
// because its subscribed to myState by using `useObservable`
myState.count += 42
}, 1000)
const App: React.FC = () => {
const state = useObservable(myState)
return (
<div>
<p>count: {state.count}</p>
<p>baz: {state.foo.bar.baz}</p>
<button onClick={() => state.increment() }>increment counter</button>
<button onClick={() => myState.decrementBaz() }>decrement baz</button>
</div>
);
}