[FAQ] MobX and react-async-bootstrapper

[ctrlplusb]

Hey all

MobX does some componentWillMount observability bindings that don't play nicely with the current architecture of this starter kit. For now I recommend against using MobX until I can investigate this further.

💖

---

Update

We have a solution, detailed below and implemented in the mobx branch. x

[ctrlplusb]

Please read #409

[ctrlplusb]

@birkir 👆

[ctrlplusb]

Hey @birkir and @xiao-hu

I have updated the feature/mobx branch (I deleted feature/mobx@next) with the latest release of react-async-bootstrapper which allows you to set if you would like componentWillUnmount to run. I have only set it to run on the client side bootstrapping but you could experiment with it on the server side too.

Let me know what your experience is like. Thanks!

[birkir]

@ctrlplusb what a man. I tried it out and it worked great after I fixed a little bug in passing the options to recursive function. I added a PR for it.

I really appreciate your effort in solving the issue with mobx.

[ctrlplusb]

Radness! Have you had luck rehydrating state from server to client?

[ctrlplusb]

Version 2.1.1 of react-tree-walker released. :)

[birkir]

Awesome stuff! About re-hydration, I usually use a single domain store (that contains other stores like UI, User, Items, etc.) that I rehydrate from the server, components then inject the store and I get kind of valid rehydration.

However I sometimes use mobx within a component for state management and haven't got them to re-hydrate (yet...) 👍

But hey, great work Sean.

[diondirza]

@ctrlplusb @birkir I know I can count on you guys. Preparing migration for my production to version 13 I guess.

[diondirza]

@ctrlplusb @birkir i have bad message for you guys, this error still happened in feature/mobx branch. Exactly after you refresh on Counter page then click increment/decrement button.

[ctrlplusb]

@diondirza can you check your node modules and ensure react-tree-walker 2.1.1 is there?

[diondirza]

@ctrlplusb just found pulled react-tree-walker in node_modules still 2.1.0 sean, probably you use exact version on its dependency.

---

Update:

found this on react-async-bootstrapper package.json

"react-tree-walker": "^2.1.0"

[ctrlplusb]

run a yarn upgrade for now though 😊

[diondirza]

The problem caused by yarn.lock file here. Now it works fine. gr8

[diondirza]

Anyways, I make a little experiment here. Try to call counter.inc function in componentWillMount, the server rendered result different with client rendered result

Executed 2 times in server and 2 times in client, so I guess for now better using componentDidMount event to have same value both client and server.

[ctrlplusb]

@diondirza if you are going to do state modification on server you need to send that state back to the client somehow so that it can use it to start with. I know how to do this with redux, but have no mobx experience.

[diondirza]

Actually my concern is not maintain modified state to have same value both client and server. Instead I usually set flag in my store on componentWillMount and that flag has side-effect to do ajax call to fetch some data. Probably need to re-tweak some of my code for this changes.

[ctrlplusb]

Yeah, you could try use the asyncBootstrap function that is powered by react-async-bootstrapper for this type of thing. Any component that has this will have it executed during the bootstrap phase. Just return a promise that only resolves after your ajax is complete and you have updated your mobx state. 👍

[diondirza]

Cool, just look at it's README, gonna continue to try it tomorrow. It's pretty late here. Anyway good job guys.

[xiao-hu]

@ctrlplusb, I upgraded to the lastest version of react-async-bootstrapper and added {componentWillUnmount: true} to the function asyncBootstrapper. It worked great!!!

[mtsewrs]

Worked for me too