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
TodoListcomponent to rerender every 500ms by changing a new
- Create a new
PerfTestcomponent, and log every time that component renders
React.PureComponentto take advantage of the PureComponent shallow equality check on props, and to stop the unnecessary renders