Fixing Redux/Zustand Re-Renders

Let's see if we can cut down on the re-renders by building better selectors for Redux and Zustand.

👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF

0:00 Introduction
0:36 Not All Renders Are Bad
1:38 Redux Project Setup
2:40 UI Setup
4:28 Redux Store Setup
7:05 Connecting The User Interface
10:21 How useSelector Works
13:28 Referential Identity Basics
17:07 How To Handle Arrays And Objects
20:41 Trying Out Zustand
21:37 Porting The Store
23:35 Porting The User Interface
25:39 Testing Zustand Rendering
27:28 Shallow Checking In Zustand

#redux #zustand #react_state_management

[very_unique_username]

Being a React Native developer, selector-related performance issues are usually the most impactful yet the hardest to diagnose and detect due to near terrible debugging experience. These issues scale exponentially the more screens + components you have nested in the stack, so I'd say this video caters even more so to us, native developers, than the web developer dudes.

[hamzahmd_]

Sir, being a React developer, I must say that's high-quality content, and you've amazingly explained the foundational concept of useSelector. Love it...

[vincent]

I am very impressed with the quality of the video on your channel regarding optimization and state management, sir. become a self-taught front end and managed to get a job in 4 months studying through youtube, blogs and udemy, I am very sure, that your channel is the king of optimization and state management

[IzharJumadi]

Lucky to have found your channel. Was trying to find good videos explaining the use of zustand and yours was definitely comprehensive. Subscribed!

[jaular]

Excelente video, gracias.
More zustand and typescript tutorials please 🙏

[nastygambler]

I got the knowledge of reading a 100 blog posts.. in one video😁.
Thank you very much

[avneet]

know useSelector depends so heavily on how you get stuff out of state but it does make total sense. Great explanation.

[SvenToreIversen]

Really nice video, I think I've watched all your content during the last couple of months. I noticed that you returned the numbers array in the updateSecond reducer in zustand as well as in redux. I believe you already taught us we only need to return the items actually updating in the state when using zustand :)

[quelchx]

Hey Jack hope things are well with you and your family.
Wanted to drop a comment and say thank you for the work you have done within the React Community.
You have helped me become a much better React developer with the various videos and articles you have created.
It has opened my eyes to more effective approaches to engineering React applications, thus helping myself and the company I work for solve problems in more effective and optimal ways.
So again thank you very much it's greatly appreciated. Keep up the great content!

[Mayur]

this video thought me more than 6 to 7 hrs of entire course. your videos are really awesome. keep up the good work

[fadfooood]

Mr. Jack, amazing explanation! You also showed how to switch to other state managers easily. 👍🏻

[OdradasMarch]

Great video on optimizing Redux/Zustand! 💌💌💌💌💌💌💌

You've demonstrated using shallow() as the second parameter to check the content of the first level of objects/arrays. For deeply nested objects, like 3-level structures, how can we optimize useSelector in such scenarios?

[tthiagolino]

When i saw the title i thought you would bring the react-tracked lib, which has been brought in this channel before to fix the context api but which also has solutions for both redux and zustand

[hideinbush]

A pleasure to learn from you, thanks for contributing so much to the community!

[amol_]

Hi, Very informative video :), Could you please walkthrough us from your setup of recording and also How are you writing on screen. Thanks in advance

[jeremydeveloper]

Great vidoes! Best content in YouTube for React developers!

[talatkuyuk]

Extremely useful for state management with redux, thanks Jack.

[oleksandrshevchuk]

would be great to have full guide video how to set up single-spa to have microfe with monorepo on existing microfe react.

Basically, imagine we have microfe monorepo build with module federation to support communication between packages and we want to migrate that monorepo to single-spa

[alisonhj]

Revisiting this now! Great content as usual! Thanks for sharing, Jack! <3

[thecodecatalyst]

Hey man great vid, we have a high impact on our app performance due to redux, this helps us solve it, thanks a lot!!!