2 things about PureComponent you probably should know.

Pure something in Pure somewhere.

But pure functions are not pure components.

How PureComponents works?

Why “purifying" of stateless components is..

..not enabled by default?

How Pure is a Pure component?

if f(X) produces Y, then `f` will be `pure`, when with the same X `f` will generate the same Y.

So, you have to be a good parent.

<MyApp>      // just my app
<Router> // react-router.
<Chrome> // my _pure_ chrome. Just a chrome.
<Switch> // react-router Switch
<Route ....>
</Switch>
</Chrome>
</Router>
</MyApp>

Redux connect — is a PureComponent.

componentWillMount() {      
// subscribe to the event emitter. This
// is necessary due to pure components blocking
// context updates, this circumvents
// that by updating when an event is emitted.

const subscribe = this.context[CHANNEL];
this.unsubscribe = subscribe(nextTheme => { <----- MAGIC
trySubscribe() {
if (shouldSubscribe && !this.unsubscribe) {
this.unsubscribe =
this.store.subscribe(this.handleChange); <----- MAGIC
}
}
componentDidMount() {
this.trySubscribe();
}

Aaaand….

  • redux-connect is a source of a change propagation.
  • redux connect is the end of a change propagation. It is still a PureComponent.

If you are not 100% sure that you have “rights” to stop propagation

— DONT STOP IT!!

const App = (props) => (
<div>
<PureComponent>
<AnotherComponent>
<strong>{props.name}</strong>
</AnotherComponent>
</PureComponent>
</div>
);

Conclusion

--

--

--

Born. Code. Die. [Refactor.] Repeat.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Three Great Array Methods in JS

Promises in JavaScript…

VueJS PWA And IndexedDB

How to create a connected account in Stripe with Node

Time for a Quick(er) Cypress Visit in Angular

7 Useful VS Code Extension if You are Using TypeScript

A Quick Tutorial for Drawer Navigation!

Time Parsing — A Kata

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Anton Korzunov

Anton Korzunov

Born. Code. Die. [Refactor.] Repeat.