Stack Overflow
Stack Overflow

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.

746 questions
10
votes
1 answer

How to track nested object in a MobX store

Let's stay I have this myObject loaded via an API call: myObject = { fieldA: { details: 'OK', message: 'HELLO' }, fieldB: { details: 'NOT_OK', message: 'ERROR' }, } Only details and message of each field can change. I want this object to be…
jeanpaul62
  • 6,379
  • 6
  • 40
  • 74
10
votes
3 answers

React Mobx - component not updating after store change

Using Mobx, after updating the store (i.e. clicking the button) the component does not re-render. I've installed mobx devtools which shows nothing after the initial load, and there is no error in the console. Any ideas what I've done…
Chris
  • 1,355
  • 3
  • 16
  • 31
9
votes
1 answer

Make typescript see props from decorators

I have simple component that uses mobx and decorators like this import * as React from "react"; import { observer, inject } from "mobx-react/native"; import { Router as ReactRouter, Switch, Route } from "react-router-native"; import Dashboard from…
Ilja
  • 35,872
  • 66
  • 218
  • 401
9
votes
6 answers

React not rerendering after mobx observer change

Upon page load, I see "hi2" When I click the button, nothing happens. I tried with setUser as well. I suspect I'm just editing the props themselves and somehow the observable is not being triggered? See sample code of it not working here in a brand…
wiznaibus
  • 621
  • 3
  • 8
  • 16
9
votes
3 answers

React + Mobx: 'this' is null when trying to update store

Just getting started with Mobx & React and having trouble getting the store to update. I get error when clicking the button, which should update the 'me' property: Store.js:12 Uncaught TypeError: Cannot set property 'me' of null My store: import {…
Chris
  • 1,355
  • 3
  • 16
  • 31
8
votes
1 answer

What exactly does mobx-react-lite's "useLocalStore" hook do, and why is it (only sometimes) needed?

Within the mobx-react documentation there are variations in how stores are created. For example, on the React Context page: In the first code sample, the store is instantiated with useLocalStore: const store = useLocalStore(createStore) In the…
arhnee
  • 715
  • 5
  • 19
8
votes
4 answers

React: Don't render components in table who aren't visible

I have a table with >30 rows and >50 columns. Each row and each cell is a specific React component, since you can manipulate them and they change behaviour and look based on changing data. So my component hierachy looks like this: Grid -> Row ->…
Johannes Klauß
  • 9,087
  • 13
  • 59
  • 110
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
  • 966
  • 1
  • 4
  • 22
7
votes
1 answer

Store 'someStore' is not available! Make sure it is provided by some Provider

I am trying to build a new projec twith React, Typescript and MobX. For some reason, i cant get MobX to work. It is a relative simple piece of code, but it gives me this error. Uncaught Error: MobX injector: Store 'appState' is not available! Make…
Englund0110
  • 407
  • 5
  • 19
7
votes
1 answer

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
  • 473
  • 6
  • 18
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,307
  • 2
  • 29
  • 72
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
  • 7,178
  • 6
  • 38
  • 60
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
  • 599
  • 4
  • 13
6
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
  • 3,249
  • 4
  • 40
  • 86
6
votes
1 answer

Access stores from class using mobX and react Context

I am strugling a bit with mobx/mobx-react-lite and react hooks. From a class i want to update a property in one of my stores, but somehow i cant get it to work. Here are some examples of how my stores are combined, and the component and class i…
Englund0110
  • 407
  • 5
  • 19
1
2
3
…
49 50