Four Reasons React Renders (and three ways to stop it)

There are four events that cause a React component to render:

1. State change
2. Prop change
3. Parent render
4. Context change

When state changes, you can skip the render via:

1. shouldComponentUpdate
2. React.memo

When props change or a parent renders, you can skip the render via:

1. shouldComponentUpdate
2. PureComponent
3. React.memo

When context changes, React always renders the context’s consumers.

You can also force a render via forceUpdate, but that’s rarely the right approach.

This is a preview of content from my upcoming “Managing React State” course, publishing on Pluralsight late summer 2020. ☀️

More on React

React: The Big Picture
Creating Reusable React Components
Building Applications with React and Redux
Securing React Apps with Auth0