Sign in Go Pro

Advanced React Native

Fixing Performance Issues with shouldComponentUpdate

This lesson is for PRO members.

Upgrade today to get access to all the PRO lessons.

Unlock this lesson



There are some situations where the shallow equality check of PureComponent is not enough to prevent unnecessary re-renders of a component. For those cases, you need to implement shouldComponentUpdate.

You can define any arbitrary logic in shouldComponentUpdate, so we'll add a condition to only update the PerfTest component when the counter prop is divisible by four.

Summary of Content:

  • Pass the counter state from TodoList into the PerfTest component, to see how it affects the rendering
  • Switch from PureComponent back to just Component and define a shouldComponentUpdate method on PerfTest
  • Return a custom condition from shouldComponentUpdate to prevent some of the re-renders on PerfTest




There are no comments on this lesson, start the conversation below ...

You need to go PRO to post comments.

Lessons in Advanced React Native