Prevent rendering about mobx-react HOT 12 CLOSED

Investigated this issue. shouldComponentUpdate is respected, but only for setState or newly passed in props. It is not respected when observables used in render are changed. This breaks fundamentally with the philosophy of MobX that derivations and state should be kept consistent with the state at all times.

If you don't want components to be rerendered, this should be expressed in the state and addressed by using for example computed or other observables that are only updated once in a while.

I hope that helps!

from mobx-react.

@mweststrate voting for keeping shouldComponentUpdate with it's original functionality (or at least providing an observer that respects manually written ones).

from mobx-react.

Or we could implement componentWillReact return true/false to render or not ?

from mobx-react.

Sounds to me like a simple if statement in some root component that prevents children from being rendered until a certain condition is met? Or you can event postpone the SSR React.render in the first place until your stores are ready?

from mobx-react.

Thanks for your help @mweststrate 😃

I have to render my whole component three to let the components initialize and call the necessary store's methods.

I guess I could use shouldComponentUpdate in all my "smart components" using the @observer but I don't even think that mobx-react check the component shouldComponentUpdate result before doing his own business. (Am I right?)
Having a way to enable/disable the @observer rendering would be a cool feature though, SSR would be easier, less extra code.

from mobx-react.

We could call shouldComponentUpdate if it exists here https://github.com/mobxjs/mobx-react/blob/master/index.js#L53 and skip forceUpdate if it returns false.

from mobx-react.

@andykog good point, that might make sense anyways. Or it might be confusing :) not entirely sure. Implementing should be pretty straight forward, although the original shouldComponentUpdate should be used, as mobx replaces it with its own implementation

from mobx-react.

Hi. This feature important for me too. My use case:
I have observer component Shape. This shape is drawing on a page in different places: in central canvas and in preview widget. Sometimes I have to update Shape very frequently. On canvas, a user needs to see real-time updates, but in preview widget, we can delay update (e.g. redraw only when the user finished drawing or only once per second). That will improve performance almost twice.

Currently, I don't see any solutions without shouldComponentUpdate.

I tried @andykog tip, looks like it works.

from mobx-react.

@lavrton: observer will respect any manual written shouldComponentUpdate. However in your case I think I would create a copy of the shape to be previwed and only update that once in a while (for example using autorunAsync), that might result in less confusing code?

from mobx-react.

@mweststrate will it respect shouldComponentUpdate? Take a look into this demo:
https://jsfiddle.net/lavrton/wgumzdtq/2/
Am I missing something?
Can you make any suggestions on this demo?

I am happy to use autorunAsync. But I am not sure how to do it with mobx-react. Write high order wrapper by myself instead of using mobx-react?

from mobx-react.

Hi. You said
"...It is not respected when observables used in render are changed. This breaks fundamentally with the philosophy of MobX that derivations and state should be kept consistent with the state at all times."

I'm a bit confused. Isn't the point of MobX that we can create observables, that are used in render() change them as we like, and MobX automatically tells React when to rerun render()? What exactly is the anti-pattern you're describing here?
Thanks.

from mobx-react.

@thunderkid I think the discussion is about shouldComponentUpdate, not render. Not entirely sure since this thread is 1.5 years old and closed ;-)

from mobx-react.