Questions tagged [mobx-react]

MobX is a battle-tested library that makes state management simple and scalable

React and MobX together are a powerful combination. React renders the application state by providing mechanisms to translate it into a tree of renderable components. MobX provides the mechanism to store and update the application state that React then uses.

Both React and MobX provide optimal and unique solutions to common problems in application development. React provides mechanisms to optimally render UI by using a virtual DOM that reduces the number of costly DOM mutations. MobX provides mechanisms to optimally synchronize application state with your React components by using a reactive virtual dependency state graph that is only updated when strictly needed and is never stale.

850 questions
8
votes
3 answers

Detect when mobx observable has changed

Is it possible to detect when an observable changes in any way? For instance, say you have this: @observable myObject = [{id: 1, name: 'apples'}, {id: 2, name: 'banana' }] And later on, with some user input, the values change. How can I detect this…
capvidel
  • 359
  • 3
  • 14
7
votes
2 answers

Mobx State Tree reference type and Typescript

I'm using mobx-state-tree with Typescript in a React application. And, I'm having an issue with Typescript where it complains about the type of the mobx type types.safeReference. It looks like the type of safeReference in the model definition is…
ataravati
  • 8,891
  • 9
  • 57
  • 89
7
votes
1 answer

Using react.useEffect and mobx.autorun together

In the MobX with React docs, in the Side effects and observables section there is a receipe to respond to changes inside a useEffect hook. import React from 'react' import { autorun } from 'mobx' function useDocumentTitle(store: TStore) { …
David Casillas
  • 1,801
  • 1
  • 29
  • 57
7
votes
5 answers

Mobx console warning

I got this waring message from Mobx. [mobx.array] Attempt to read an array index (0) that is out of bounds (0). Please check length first. Out of bound indices will not be tracked by MobX @observable checks = { deviceType: ['phone','laptop',…
kkangil
  • 1,616
  • 3
  • 13
  • 27
7
votes
2 answers

React Hooks (useState) and Mobx [No mobx-react-lite]

in my react application (with typescript) I want to use React hooks (specifically useState) to manage the form state and meanwhile use it as an observable component for Mobx store but I get the error Hooks can only be called inside the body of a…
Amir-Mousavi
  • 4,273
  • 12
  • 70
  • 123
7
votes
1 answer

How to use mobx-react 'observer' without decorator syntax?

I am trying to shoe horn mobx into a vr application I am making with react 360. I've tried to use the decorator syntax but after wasting a solid chunk of time trying to implement it, I've decided to use the nondecorator syntax. Here is an example…
Dan Rubio
  • 4,709
  • 10
  • 49
  • 106
7
votes
3 answers

Is it possible to create inheritance between two mobx stores?

I'm building two widgets with mobx/react, where all the logic sits inside the stores. Both share most of the design rules, so their stores are 95% identical. Is there a smart way to handle this situation? For example, is it possible to create…
Sveta
  • 1,041
  • 13
  • 22
7
votes
2 answers

MobX - Why should I use `observer` when I could use `inject` when injecting data into a React component

MobX documentation suggests I should use observer on all my components. However by using inject I get more fine grained control over what data causes a re-rendering of my components. My understanding is I that with observer, a change in all accessed…
Mateo Hrastnik
  • 533
  • 1
  • 7
  • 20
7
votes
1 answer

Component disappears on update

I am implementing a word search facility in my React Native app. I have a MobX store, wordStore. Each text change triggers a database query via the setFilter action. This all works under the hood as I can see from console debug output. However, the…
Adamski
  • 3,585
  • 5
  • 42
  • 78
7
votes
1 answer

How to test react components with mobx observable state

Here is a simplified version of my component: import React from 'react'; import { observable, action } from 'mobx'; import { observer } from 'mobx-react'; import { fromPromise } from 'mobx-utils'; @observer export class MyComponent extends…
alisabzevari
  • 8,008
  • 6
  • 43
  • 67
6
votes
2 answers

Whats the difference between @observable and @observable.ref modifiers in mobx?

Mobx supports both @observable and @observable.ref modifiers and their official doc says observable: This is the default modifier, used by any observable. It clones and converts any (not yet observable) array, Map or plain object into it's…
freakomonk
  • 574
  • 1
  • 5
  • 15
6
votes
3 answers

React native + Mobx, @inject decorator throws an error

I'm trying to use mobx with react native and stuck into a problem. @inject('someStore') @observer export class SomeComponent extends Component { render() { ... } } I'm sure I configured properly babel plugins for decorator but @inject…
jesuisgenial
  • 685
  • 1
  • 5
  • 15
6
votes
3 answers

mobx react action binding

For those who has written apps with mobx + react, I'm wondering if there's a better way to handle context issue (eg. this. returns undefined in mobx store) when using onClick event handler inside a react component w/ inject & observer. I have been…
Bi Yoo
  • 249
  • 4
  • 9
6
votes
1 answer

Support for the experimental syntax 'decorators-legacy' isn't currently enabled

I am getting the above error when I am using mobx-react and while trying to use annotations.Here I am using .js and not .ts. All the solutions provided earlier not successful for me. import React, { Component } from 'react'; import { withRouter,…
6
votes
4 answers

Mobx @computed functions with parameters

I'm new to Mobx but so far it's been working great and I've managed to get pretty far. I have a react-native application with mobx, and mobx-persist. I'm using axios to pull posts from a Wordpress site. The functionality that I'm trying to improve…
1 2
3
56 57