Advanced React Native
Fixing Performance Issues with PureComponent
Autoplay
Up next
Previous
About
Re-rendering too many components too often can cause performance problems, so it's important to not re-render components that don't need to update - even if their parent re-renders.
React has a PureComponent
that we can use to perform a shallow equality check on props and state, which can help with this issue - and prevent unnecessary re-renders.
Summary of Content:
- Force the
TodoList
component to rerender every 500ms by changing a newcounter
in state - Create a new
PerfTest
component, and log every time that component renders - Switch
PerfTest
fromReact.Component
toReact.PureComponent
to take advantage of the PureComponent shallow equality check on props, and to stop the unnecessary renders
Instructor
Links
Comments
Lessons in Advanced React Native
Using the React Native Dev Tools
03:35
Getting the Screen or a View's Dimensions

04:37
Accommodate the Keyboard with Keyboard Avoiding View or Keyboard Aware Scroll View

03:16
Store Data to the Device with Async Storage

04:35
Stateless Functional Components

Pro
05:16
Folder Structure of React Native Applications

Pro
03:08
Absolute Import Paths

Pro
01:33
Modal Screens with React Navigation

Pro
02:16
Animate Components with LayoutAnimation

Pro
03:46
Trigger an Item Delete on Prop Change with componentDidUpdate

Pro
02:55
Animation with Animated

Pro
04:15
Higher Order Components

Pro
04:47
Encapsulating Functionality with a Render Prop

Pro
03:35
Use Child Components in a Parent Component

Pro
03:22
Debugging Performance Issues with the Performance Monitor

Pro
04:44
Fixing Performance Issues with PureComponent

Pro
02:16
Fixing Performance Issues with shouldComponentUpdate

Pro
01:48

Something went wrong
Lesson added to playlist
Create new playlist
Name can't be empty