Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

Learn React Redux performance techniques and optimizations as we look at our blog project to see when components are re-rendering and why. We'll cover memoized selectors, createEntityAdapter, and React.memo.

⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Advanced React & Redux: https://bit.ly/AdvReactDev
- Jr to Senior Web Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
- Master FAANG Coding Interviews: https://bit.ly/FAANGInterview

Subscribe https://bit.ly/3nGHmNn

React JS for Beginners full course - 9 hours: https://youtu.be/RVFAyFWO4go

React Redux Toolkit tutorial series - https://www.youtube.com/playlist?list=PL0Zuz27SZ-6M1J5I1w2-uZx36Qp6qhjKo

Course Updates https://courses.davegray.codes/

Source Code and Resources for this Redux Toolkit Series: https://github.com/gitdagray/react_redux_toolkit

React Redux Performance Techniques and Optimizations

(00:00) Intro
(00:36) Welcome
(00:50) Prerequisite knowledge
(01:07) Starter Code Note
(01:55) UsersList component
(03:11) selectByUserId selector
(03:58) UserPage component
(06:00) Adding user routes to App.js
(06:44) Adding a catch all route
(07:39) Add Users link in header
(08:04) Testing the user components
(09:15) Adding count state, reducer, and selector
(11:24) Adding a counter to the header
(12:30) Quick typo fix
(12:58) Optimization issue 1
(15:02) Identifying the cause of re-renders
(16:01) Creating a memoized selector
(17:50) Updating the UserPage component
(18:56) Testing our changes
(20:36) Optimization issue 2
(21:16) Solving with React.memo
(23:27) A full-featured solution
(23:51) Normalization
(24:27) Adding createEntityAdapter
(25:37) Changes to initial state
(26:17) Using entities as a lookup object
(26:49) Applying entity adapter CRUD methods
(28:51) Entity adapter generated selectors
(30:33) Reviewing postsSlice changes
(31:14) PostsList component changes
(32:17) PostsExcerpt component changes
(33:02) Testing the entity adapter changes

Buy Me A Coffee: https://www.buymeacoffee.com/davegray

General Redux Toolkit References:
Official Site for Redux Toolkit: https://redux-toolkit.js.org/
Redux Devtools: https://github.com/reduxjs/redux-devtools
Immer.js: https://immerjs.github.io/immer/

React Router v6 References:
Official Site for React Router: https://reactrouter.com/docs/en/v6
React Router v6 Tutorial: https://youtu.be/XBRLVRjZ3CQ

ES7 React JS Snippets Extension for VS Code:
https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

React Dev Tools Extension for Chrome:
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

General React References:
ReactJS Official site: https://reactjs.org/
React Wikipedia: https://en.wikipedia.org/wiki/React_(JavaScript_library)
React Jobs: https://www.ziprecruiter.com/candidate/search?search=react&location=

Follow Me:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Blog: https://yesdavidgray.com
Reddit: https://www.reddit.com/user/DaveOnEleven

Was this tutorial about building Redux Toolkit Performance Techniques and Optimizations helpful? If so, please share. Let me know your thoughts in the comments.

#redux #performance #optimizations