Welldone Software
Published in

Welldone Software

React — When Should Pure Components Be Used?

React.memo / React.PureComponent usage guide

What’s a Pure Component?

Sandbox

Scroll Performance

Profiler For The Rescue!

  1. Make sure Main is not pure in order to prepare the performance issue scenario
  2. Start recording
  3. Scroll (reproduce the performance issue)
  4. Stop the recording
React profiler screenshot where Main re-renders often

Preventing The Heavy Render

Then Why Not Make All React Components Pure?

Optimizations To Help Keeping Components Pure

So, When Should Pure Components in React be Used Indeed?

  • Making a component pure, forces React to compare props before re-rendering the component. (prevProp !== newProp)
  • A React Component, especially a bigger one, is relatively expensive to render.
  • A component with inline generated props will always re-render (like style={{width: 100%}}.
  • Optimizations to inline generated props to make sure a component doesn’t always re-render has its overheads (code readability, resources).
  • Not small. (has considerable calculations or generates many react elements inside)
  • Re-render on user interaction. (click, scroll, hover)

Thanks :)

--

--

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