mobxjs/mobx

Keeps views automatically in sync with state. Unobtrusively. https://egghead.io/courses/manage-complex-state-in-react-apps-with-mobx

Lee Wexler

@lbwexler

Hi -- Am trying to create a functional component with observer() that supports forwardRef. Would like to use the documented flag on observer that does this: e.g.

const FooBar = observer((props, ref) => <div>Hello</div>, {forwardRef: true)).

However this doesn't seem to work. Am I thinking about this in the right way?

The error I get when I try to pass a ref to FooBar is: "Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?". Thanks for any help.

Fredrik Sigvartsen

@fredrik9_gitlab

Hi guys! Is there anyone here working with React and Mobx, that can help me with an issue? My React component triggers an action, and changes the Mobx state, but React component won't notice, and therefore don't rerender:

mobxjs/mobx-react#767

MikeWarren2014

@MikeWarren2014

I noticed there is an absence of solid MVVM React/MobX example apps. This is crucial for me as I am a novice at this, and my work is mandating MVVM architecture, using OOP design patterns. Could someone come up with such an example so that I can get started? Thanks!

/ I was told that my typical design of putting things into one app store, which has a UI store and stores for the pages, was unacceptable, and that someone else had to refactor that /

anikethsaha

@anikethsaha

how to get the observer value in the react component>
I have a store with simple object observer

import { action, computed, observable } from "mobx";

class TaskStore {
    @observable public task = {};
    @observable public boards = [];

    @action public addNewTaskJson(storageJson: Object[]) {
        this.task = storageJson;
    }
    public get getTask() {
        return this.task;
    }
}

const store = new TaskStore();
export default store;

AND THE COMPONENT I am having simple like this


@inject("TaskStore")
@observer
export default class TaskContainer extends React.Component<ITaskContainerProps, ITaskContainerState> {
    constructor(props: ITaskContainerProps) {
        super(props);
    }
    public componentDidMount() {
        console.log("TaskStore.task", this.props.TaskStore.task);
    }
....
....
...

And In this log I am getting like this

anikethsaha

@anikethsaha

I need the task object to loop on, its coming as a wrapper or something

VeryEvilTomato

@VeryEvilTomato

Hello! If I wanted to make a reaction from an observable to modify the state of another observable, I was wondering what'd be the concepts I'd have to study to implement this on MobX.

Thanks in advance for any answer

MikeWarren2014

@MikeWarren2014

This

This needs to

This needs to be a full-blown forum, with topics and threads

Daniel K.

@FredyC

@MikeWarren2014 feel free to organize one :) either Spectrum or Discourse sounds useful

it's not necessary to be a maintainer to direct a community to different place ... of course we can then put up notice to repo and other places

zrk

@zrk

Hi! Anybody having trouble with observable Map in Mobx 5?

I have like @observable source = new Map(). Then, after some sets, source.values() - gives me nothing.

(just an empty array)

keys() - nothing.

entries() - nothing.

zrk

@zrk

source.size - gives the number, whatever it should be - so it works.

Downgrading to Mobx 4 seems to solve the problem.

Edson Gustavo Santiago Silva

@shtanaka

looks like mobx-react docs is down

getting undefined error

Daniel K.

@FredyC

@zrk Best if you can prepare reproduction of the problem, sounds more likely you are doing something wrong and not telling a whole a story :)
I am personally using MobX5 Map quite extensively and had no problem with it

Sigurd Spieckermann

@sisp

How do you typically deal with name collisions between MobX model classes and React component functions/classes? Do you give component names a suffix like XxxxxView?

Artyom

@ArtyomPLAY

How to make mobx work with next.js?
I tried everything, mobx just doesnt want to re-render component on state change... Im hopeless.
I did learn mobx while working on pure React, everything been fine, now i work with next.js and mobx just doesnt work as expected. Any help?

Pierre-Luc Auclair

@plauclair

Anybody knows if this is expected behaviour? mobxjs/mobx#2105

alisman

@alisman

We have an application with tabs that each contain visualizations which are very expensive to render. All tabs and contents observe the same store. The problem is the following scenario: we've rendered a tab, the user switches away from it. If we leave the tab mounted, then it will continue to re-render on state changes even though it's hidden. If instead we unmount the deactivated tab, we then have to remount it when user switches back to it (and my boss asks why it's sluggish). What we need is some way to freeze rendering (or observation) when the tab is hidden and then force it when user switches to tab. Anyone have any ideas? @mweststrate is there a way to disable observation in a particular branch of component tree?

Daniel K.

@FredyC

@alisman I think it's a wrong way of thinking to "disable observer" ... instead, I would focus on why things are "sluggish" when you remount, perhaps utilize some cache that would render previous data immediatelly, but fetch new data in background and re-render after

this works great with Apollo and GraphQL which has such cache included, but I reckon it's not that hard for REST either, there are surely some existing solutions for that too

obviously such cache would need to be upper in the tree, preferably Context

and if it's "sluggish" generally for each request then figure out the problem there, optimize backend, buy stronger hardware, etc...

alisman

@alisman

@FredyC thanks for your response. the issue for isn't reloading the data (network), it's the actual rendering of the visualization. There is often a huge amount of data. it is true we could focus on sampling, optimization, but it's fair to say that with scale of the data, we will never get to a point where the visualization can render in less than a few seconds (for large queries). To be more specific, it's calculation of shapes for canvas.

Daniel K.

@FredyC

I see, tough one, and why is it actually a problem that it "renders" on stage changes? it's not even true render since it's not visible on the screen ... not sure about canvas, but you could at least stop updating canvas until the tab is visible again, but keep computing data for it so it's less sluggish afterwards

Nick Steele

@onexdata

Hello everyone! I'm looking to pay someone to do a quick screen share on migrating mobx from 2.x to 5.x in a react app. Does the mobx community have anything like that available?

Daniel K.

@FredyC

@onexdata Officially no and only very few might remember differences between those versions ... I suppose you tried to just upgrade?

recently, there was a question of upgrading from V3 ... mobxjs/mobx#2019
if you would manage to upgrade to V3 then there is official migration guide to V4 ... and V5 is basically same except some different internals

Brady Trainor

@bradyt

Is the "M" in MobX for Mendix? MDD? Mutate? Modify?

(Cross posted from moxjs/mobx.dart)

Brady Trainor

@bradyt

I think it's model, based on like the twentieth commit cd473797 * tsmodel -> mobservable, where a bunch of namespaces model were changed to mobervable.

mobxjs/mobx@cd47379

Ricardo Canastro

@canastro

Hello, anyone else having issues with mobx-devtools? I have Error: [mobx] Cannot obtain atom from [object Object] all the time... the app seems to work properly but when I turn on mobx-devtools all hell gets loose and I get tons of errors like that. I can't figure out what might be wrong, because if I turn it off the app works as expected.

Ricardo Canastro

@canastro

The getAtom method is getting my class instance as thing and not getting any property which is the observable one... not sure if this is helpful

Nick Steele

@onexdata

Thank you @FredyC ! I really appreciate your help and direction!

nkint

@nkint_twitter

Hi. I'm looking for a simple mobx starter with react + hooks + no-decorator + mobx-react-lite only (I don't want to use inject but the react context).

examples in the official awesome-mobx ( https://github.com/mobxjs/awesome-mobx#examples )seems to be outdated with react class component
and the migration guide ( https://mobx-react.js.org/recipes-migration ) does not contains a complete example and seems kind of obscure to me: even if it avoid inject it anyway it takes for granted that state is inserted into the context via a Provider ? not really clear to me sorry :(

in any way possible with mobx I need a class that contains the main store, right? how to do it without a class?

Sorry hope this is the right place where to ask

Wellington Guimaraes

@wellguimaraes

Hi! I'm wondering if it's possible to intercept a computed when it changes... I tried with the intercept fn but had no success. Is there a reason for it not to work with computed values or just not a feature yet?

Wesley Bercx

@wbercx

@wellguimaraes You're generally not writing to a computed property - they're meant to give you the result of a computation involving observables. Since you're not writing to a computed directly, there's really nothing to intercept. You can observe its changes though. Computeds do support setters (https://mobx.js.org/refguide/computed-decorator.html#setters-for-computed-values) which I suppose you could think of as an interceptor?

Where communities thrive

People

Repo info

Activity