index.mdx

import {Link} from "react-router-dom";

React Render Perf

The purpose of this workshop is to learn about common issues that can result react renders taking longer than expected.

Preliminaries

This tutorial assumes that you have the React Developer Tools Chrome extension installed. You will need to make use of the "Profiler" tab in the React DevTools to measure performance of the components in the exercises. For information on how to use "Profiler" tab see this blog post.

Lessons

1. Memoizing expensive to render components
2. Prevent React.Context from re-rendering the whole tree
3. Avoid using React.Context at all
4. Minimizing re-renders by splitting up large components