React Redux Performance Techniques and Optimizations

This course demonstrates how to optimize a React Redux Toolkit blog application by diagnosing unnecessary re-renders and applying memoized selectors, React.memo, normalized state, and createEntityAdapter. It assumes prior React knowledge and beginner-level familiarity with Redux and Redux Toolkit.

Syllabus

Intro
Welcome
Prerequisite knowledge
Starter Code Note
UsersList component
selectByUserId selector
UserPage component
Adding user routes to App.js
Adding a catch all route
Add Users link in header
Testing the user components
Adding count state, reducer, and selector
Adding a counter to the header
Quick typo fix
Optimization issue 1
Identifying the cause of re-renders
Creating a memoized selector
Updating the UserPage component
Testing our changes
Optimization issue 2
Solving with React.memo
A full-featured solution
Normalization
Adding createEntityAdapter
Changes to initial state
Using entities as a lookup object
Applying entity adapter CRUD methods
Entity adapter generated selectors
Reviewing postsSlice changes
PostsList component changes
PostsExcerpt component changes
Testing the entity adapter changes