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
6
votes
1 answer

React/Mobx - component is re-rendering, but componentWillReceiveProps() is not being called

I have React/Mobx app. When I am making changes in the store, the component is updating (re-rendering), but I need to make some comparisons for adding some more functionality, so I want to use componentWillReceiveProps(nextProps) and compare…
Hayk Aghabekyan
  • 1,087
  • 10
  • 19
6
votes
5 answers

Mock Ajax (Reactjs + Mobx)

I want to make some fake my ajax calls so when on localhost I can bring back dummy data from a fake method instead of doing real calls to my server(where the structure might not exist). What is the best way to do this in reactjs + mobx? I was…
chobo2
  • 83,322
  • 195
  • 530
  • 832
6
votes
2 answers

How to convert single screen app to tab based app using react-native-navigation?

I am trying my hands on react-native-navigation but I am stuck with a simple problem. The app has a login page which doesn’t have tabs. (very much similar to facebook login page)(Image ref - The image is just to give an idea. Image Courtesy - …
6
votes
2 answers

How to check if object is in Mobx observable array?

I'm using indexOf in a React component to style a button based on whether an object is in an mobx observable array. The button is for favoriting. It pushes the object for that specific list item into an observable array in the store called…
Kyle Pennell
  • 5,747
  • 4
  • 52
  • 75
6
votes
1 answer

Mobx returning ObservableObjectAdministration instead of my object

I'm new to mobx. I was wondering why I'm getting ObservableObjectAdministration when I call the computed getServerUrls() function instead of the object. Below is my store. import { observable, computed } from 'mobx'; import { ServerNames } from…
devwannabe
  • 3,160
  • 8
  • 42
  • 79
5
votes
3 answers

Mobx makeAutoObservable not binding this

I've built a basic counter React app with a simple MobX store. I was able to create an observable MobX status using makeObservable but for some reason when I try to use makeAutoObservable I get the error Cannot read property 'counter' of…
Jon_B
  • 969
  • 4
  • 16
  • 24
5
votes
0 answers

MobX - Cannot obtain atom from undefined after migrate to MobX v.6+

I need to migrate MobX v.5 to MobX v6+ which supports react hooks, however after upgrading to MobX v6+ I get this error [MobX] Cannot obtain atom from undefined I was able to track down that when I want to create Lazy observable with…
Martin
  • 455
  • 1
  • 11
  • 34
5
votes
4 answers

Confusion between mobx-state-tree and mobx-keystone. When to use which?

Both recommended in the official Mobx page if one wants an opinionated way to using mobx for state management. Based on these(1,2), keystone seems like an improvement of state-tree. Having everything that state-tree has + more. Nowhere I could find…
5
votes
1 answer

Shouldn't useContext() only be used for low frequent updates? (mobx-react-lite)

Almost all examples (even the official documentation) use mobx-react-light in combination with useContext() hook. However, React, many articles and blog-posts advice to NOT USE useContext() for middle/high frequent updates. Isn't state something…
mleister
  • 1,697
  • 2
  • 20
  • 46
5
votes
3 answers

Why doesn't MobX v6.x work as expected in React with Typescript?

I am currently writing a React App, that should be able to rerender components when the value of any observable changes. The problem is, that I can't get email to rerender if it changes. store.ts export class ExampleStore { @observable email =…
Keimeno
  • 2,512
  • 1
  • 13
  • 34
5
votes
1 answer

Unable to expand and close collapsable on click

I have been on this for a little while and here is whats going on. I have an array in mobx Storage that I Would like to display in a collapsable view within a Flatlist in my React native component. The problem here is that when I click on it it does…
5
votes
2 answers

Component not re-rendering when nested observable changes

Adding a node to a list and yet a component is not re-rendering. Mobx Chrome Extension dev tools says it's a dependency but for some reason still no reaction! A button renders 'Add' or 'Remove' based on whether a node is in a list. It doesn't…
ali_wetrill
  • 173
  • 1
  • 9
5
votes
0 answers

Is there a problem when use of mobx in my project , the error is 'Support for the experimental syntax 'decorators-legacy' isn't currently enabled'

I configured my package.json and babelrc but I got some errors when I used decorators. I use "react16.8.1" and "mobx5.9.4". My babelrc code: "presets": [ "@babel/preset-env", "@babel/preset-react", ], "plugins": [ …
5
votes
2 answers

Why useEffect doesn't fire on every render?

My component has two Rect.useEffect hook const Example = ({ user }) => { React.useEffect(() => { autorun(() => { console.log("inside autorun", user.count); }); }); // Only runs once React.useEffect(() => { console.log("Why…
Andrew-Dufresne
  • 5,464
  • 7
  • 46
  • 68
5
votes
1 answer

Why are React components rendering twice when wrapped with observer()?

Simply wrapping React components with observer() seems to cause them to render twice. What could the possible reasons for this be? I am running the latest versions of react 16.8.3, mobx 5.9.4 and mobx-react-lite 1.2.0 For example: import React from…
user1843640
  • 3,613
  • 3
  • 31
  • 44