How to safely use React context

  1. You are a library author
  2. You use a library that uses context or you use context yourself, and you want to safely use shouldComponentUpdate (SCU) or implementations thereof (e.g. PureComponent, Redux connect, or MobX observer).

Why is Context + ShouldComponentUpdate problematic?

ShouldComponentUpdate and Context can work together!

  1. Context should not change; it should be (shallow) immutable
  2. Components should receive context only once; when they are constructed.

Communicating changes through context-based Dependency Injection

Conclusion

Bonus: Using MobX observables as context simplifies things

--

--

Lead Developer @Mendix, JS, TS & React fanatic, dad (twice), creator of MobX, MX RestServices, nscript, mxgit. Created.

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

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