Comments (12)
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.
Related Issues (20)
- upgrade mobx-react version from 6.2.2 to 6.2.3οΌThere is an error HOT 7
- observer component re-renders even though observed value doesn't change HOT 4
- build 6.2.4 is broken (missing files) HOT 1
- [mobx-react 6.2.4] Unable to resolve path to module 'mobx-react' HOT 2
- Why not copy static propertities in prototype ? HOT 1
- Attempted import error: 'observerBatchingOptOut' is not exported from 'mobx-react-lite'. HOT 9
- Uncaught TypeError: Cannot add property Symbol(isMobXReactObserver), object is not extensible HOT 2
- New version is breaking previous versions (Error: mobx-react-lite@3 requires mobx at least version 6 to be available) HOT 5
- Problem with version 6.3.0 and mobx v5 HOT 11
- Unable to resolve module `./assertEnvironment` HOT 19
- Document `enableStaticRendering` HOT 5
- The problem of `useRef` to keep the store instance HOT 2
- What is the best way to deal with large and dynamic FlatLists? HOT 3
- mobx-react.js.org dead? HOT 1
- deepEqual condition for re-rendering? HOT 9
- observer does not re-render components in React Native HOT 10
- observer doesn't re-render functional components HOT 2
- Not working in nextjs using mobx:6.0.1 HOT 2
- Incosistencies in mobx-react dependency versions. HOT 1
- Migration guide for mobx6 + mobx-react7? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mobx-react.