How does mobx prevent rerender children of observable components? - javascript

I've found mobx observable component only rerender themselves and not their children. How is this achieved?

From the MobX documentation:
MobX reacts to any an existing observable property that is read during the execution of a tracked function.
By using #observer over a component MobX will track and react to changes occurred to observables defined inside the render function of this component.
Each child component should be wrapped with #observer if you wish it to react to changes.
Edited:
By using observer over a component, MobX will override the shouldComponentUpdate by telling the component to update only when necessary (observables change or shallow props change).
From MobX #observer documentation:
observer also prevents re-renderings when the props of the component have only shallowly changed, which makes a lot of sense if the data passed into the component is reactive. This behavior is similar to React PureRender mixin, except that state changes are still always processed. If a component provides its own shouldComponentUpdate, that one takes precedence.See for an explanation this github issue

Related

Connected React component unnecessarily re-renders when parent re-renders

I have a React component that is connected to the redux store via implementation of mapStateToProps. React-redux connect implements a shallow-equality shouldComponentUpdate that should prevent re-renders if props do not change (based on references). However, unless I make my component explicitly pure (using PureComponent), my component re-renders when its parent re-renders. This should not be needed as connect should have implemented shouldComponentUpdate like PureComponent does. Any reason as to why this might be happening? Specifically, how does the implementation of connect differ from PureComponent? Doesn't connect make its wrapped component pure?
connect should have implemented shouldComponentUpdate like PureComponent does
The connect function doesn't do that. PureComponent provides you with shouldComponentUpdate function which is a placeholder where you can put your performance-tweaking code.
coonect takes a different approach and provides 4 functions/placeholders instead. You can use all four or some or none to fine-tune performance. The functions are called:
areStatesEqual
areStatePropsEqual
areOwnPropsEqual
areMergedPropsEqual
Doesn't connect make its wrapped component pure?
It leaves it up to you by giving you the option to use the above functions. You can mimic the shallow equality checks done by shouldComponentUpdate.

How can you create a functional component that updates on Redux store change?

For my application, I want to create a component who's sole purpose is to update when there is a change to the Redux store.
I have achieved this with a componentDidMount() that checks if the component's state matches the store and sets the state if not.
My solution works, and is suitable enough for the situation, but it seems like a lot of code for a simple function.
How can one achieve the same outcome, a component that updates on Redux store change, using a functional component or a more simple stateful component?
Update: Thanks to the comments below, I have a new working the passes state information as props.
React components renders due to changes in props and state, therefore when you connect your component to Redux store
and supply mapStateToProps, when redux store update the mentioned props that you will return from that function, your component will re-render. You can detect changes via componentWillReciveProps life cycle method.

mobx store not accessable inside lifecycle methods?

I have a react component which i am injecting a mobx store. when I try to access an observable from my store inside a lifecycle method (componentWillMount or componentDidMOunt) the value is empty. however when I access it inside the render method it is available. Is there something I am missing? I feel like I'm missing something basic here.
The documentation clearly states that observer from mobx-react tracks observables only in render method of wrapped component.
Function (and decorator) that converts a React component definition,
React component class or stand-alone render function into a reactive
component, which tracks which observables are used by render and
automatically re-renders the component when one of these values
changes.
If you take a look at observer sources you can confirm that it only tracks render method
Hi by my experience with Mobx state management you should not access the
observalbe variables from React Component.
Even when you inject the Redux Store into React Component. (Decorate or wrap).
The computed variables are designed to provide updated observable variables to React Component.
You can access Mobx actions and computed but not the observable. They are used only inside Mobx class.

Redux with React-Native and mapStateToProps

I've read this thread. What is the difference between state and props in React?
It says that props are different from states and ideally props should not be change in its component and only should be changed by its parent component.
However, mapStateToProps function in react-redux maps states in Redux to props of a React components, which is basically changing props of a React component when Redux state is changed by an Redux action.
It does not make sense to me. It seems that it should have been mapStateToStates instead and maps Redux states to states of a React component.
Am I missing something?
It says that props are different from states and ideally props should
not be change in its component and only should be changed by its
parent component.
State here refers to the internal state of the component, which the component can change internally via .setState().
However, mapStateToProps function in react-redux maps states in Redux
to props of a React components, which is basically changing props of a
React component when Redux state is changed by an Redux action.
The state here refers to the redux store, an external state. react-redux's connect method creates a HOC - higher order component (a component which is aware of the store's state changes). The HOC wraps the dumb react component, which is not aware of the store. Using mapStateToProps the HOC maps the data from the external state, and inject it to the react component via the props.
State in redux store -> mapStateToProps in HOC -> props passed to the dumb component
So the HOC is the parent, and the dumb component is the child. The parent injects new props to the child component, and the 1st assertion "props should not be change in its component and only should be changed by its parent component" is not violated.
Notes:
More info about higher order component can be found in Dan Abramov's article about Presentational and Container Components.
To understand how react-redux connect works - in the online free course, Getting Started with Redux, Dan Abramov shows how to build connect from scratch (lessons 22-29)
state here in mapStateToProps means state in ReduxStore.
It maps Redux state to ReactComponent props. It's not necessarily to map props to states, e.g. Pure Component
mapStateToProps pass state as a props to component using react-redux connect () function. Consider connect() function as wrapper component, which passes props to children.
mapStateToProps
connect (state) -----------------------> component(props)

Is it true that using redux with react will eliminate the need of react's state?

In react-redux library, there is almost only one API, connect(), and its only purpose is to bind "redux-things" to react's props. That's fine, but as far as I could see, the application state is handled with redux's state. I find no use of react's state anymore, since, a component could be rendered using props alone and mutate its state (via redux's state) using actions.
Am I correct ?

Categories