React Native - Updating component


trigger update => compare state and props => render

trigger update

component’s update is triggered when:

compare state and props

  1. https://reactjs.org/docs/react-component.html#shouldcomponentupdate

comparison is made inside shouldComponentUpdate() which is

NOTE: in all cases where state or props are compared, shallow comparison is used - only prop references are compared! if you pass mutated property (say, some nested value is updated), it’ll be considered unchanged => always return new objects from reducers!

connected component vs. PureComponent

connected component behaves just like PureComponent:

the only difference is that connected component is subscribed to Redux store updates while PureComponent is not (so update of the latter is triggered only when its props or state change).

render

  1. https://medium.com/@gethylgeorge/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84e

render() is called every time shouldComponentUpdate() returns true.

rendering the component is:

  1. updating virtual DOM
  2. running diffing algorithm
  3. updating actual DOM

so even if you call forceUpdate(), say, on every Redux store update, it won’t force update actual DOM every time unless markup has really changed (and only the parts that correspond to changed markup will get updated).