Fixing Redux/Zustand Re-Renders

[@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.

[@Fuzbo_]

Flipper helps to bridge the gap a bit more by giving you access to Redux Devtools in React-Native. Doesn’t help you diagnose everything, but definitely better than nothing if you haven’t used Flipper before.

[@zarty96]

I personnaly use reactotron with reactotron-redux in order debug my app, but indeed it might not be perfect for debbugging the performance of the useSelects().

[@vincent3542]

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

[@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...

[@jaular14]

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

[@nastygambler2522]

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

[@IzharJumadi]

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

[@avneet12284]

Nice.......didn't 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 :)

[@jherr]

Yeah that’s true. GitHub copilot added that destructure and I should have removed it.

[@jherr]

@Abhilash M I think you've got it. As long as the `numbers` reference doesn't change, then you won't get the re-render. That's what you are looking for, selecting down to primitive types (preferably) like strings, numbers and booleans. Or selecting specific keys if you have arrays or objects within a store object.

[@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!

[@jherr]

Thank you!!!

[@nafeesnazik1751]

High-quality content as always ❤️.

[@talatkuyuk6556]

Extremely useful for state management with redux, thanks Jack.

[@fadfooood]

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

[@hideinbush0]

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

[@MOURADSLIM]

I love how you made redux easy to understand, goin with zustand though

[@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!!!

[@tthiagolino8]

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

[@jeremydeveloper32]

Great vidoes! Best content in KZbin for React developers!

[@Mayur2345]

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

[@ajay87ball]

Great content as always. This is the video I've been looking for!!! 😄Thanks

[@alisonhj]

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

[@jherr]

Thank you for watching.

[@ryanle4059]

so cool, thank you, Jack. Now I know it's called Referential Identity.

[@irfansaeedkhan7242]

awesome, you really go deep in production level code, normal we just see abcd of things, but you go till xyz

[@oleksandrshevchuk448]

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

[@kerimalihodza3938]

I'm very impressed by your comparison of the two. I would say Redux Toolkit is more suitable for large projects and complex business logic, while Zustand can become messy over time due to its 'free-for-all' nature

[@jherr]

I disagree. I've seen lots of Redux stores that have become a junk drawer of state on the idea that "everything needs to be in the store".

[@tonguyenducmanh]

Your explanation is very detailed. thank you very much

[@depSol-DE]

I love how you say Zustand 😂 nothing against your content, it's great, as always 🙌🏼 Zustand is the German word for state. You could use Google translate to get an idea on how to pronounce it in german 😁😂 but I'm fine with your pronunciation, continue using it, since no one really cares about it 😁

[@abdulshakur2776]

One word, Magnificent!

[@moritzschwarz2309]

First of all, great explanation! I have one more question here. On the app I’m working on currently, we have a Zustand store that contains an array of nested objects. How would you suggest to handle this? By using shallow to detect changes in the first level of the objects, it would still be „too deep“ to not render the component as it would again compare objects.

[@jherr]

Assuming that you are working on changing just one entry at a time. Just create a new array with the contents of the old array (that would copy the references), then create a new object for the one you are editing, with the contents of the old object, and make your changes to the new object and replace the existing object in the new array with the new object. Or... use immer.

[@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

[@tarunsukhu2614]

This is pure gold

[@JimPowersUSA]

The same issue occurs if you create an object in the useSelector function and return that object. I tripped on this when using a single useSelector to select data from the store and return a view specific object.

[@adimardev1550]

zustand is like saying to you "Relax bro, just focus on your stuff, i'll take care the state for you." which how all state management should be.

[@vadym7023]

Hey, Jack! What do you think about Zustand best practice? What do you prefer single store or many stores?

[@jherr]

Many stores is what I've done and I'm good with it. I don't think a singleton store is ever a good idea.

[@Pilosofia]

Hi Jack Herrington. I love your content. can you pleas some day make a video about how to structure the folders in a react app, I have struggled a little bit to find the perfect one.

[@codernerd7076]

Great video and really good to know about this! Still trying to get Redux toolkit to play nice with Next.js ssr here never got state management to work as showed in your next.js state video 😭

[@Euquila]

Why are you SSR with heavy duty state management? Wouldn't you want CSR for a more sophisticated app?

[@codernerd7076]

@@Euquila its one complex app that need seo for dynamic data and state management for tons of data and my sanity 😵

[@Stoney_Eagle]

I have been destructuring useSelectors all over my app, so you're saying that my app becomes much faster if I'm not so lazy and use non destructured items for ALL of my values? I got some work to do 😳

[@andrewc8125]

lovely as always

[@ThePrician]

Thank you, Jack. ✌️

[@sudhanshubhagwat9538]

This is an awesome videos.. Could you please make a video of an app which is a victim of such bad usages and how should we debug them? Keep up with the great content😊✌️

[@sdsd-ec8rw]

do you have same video on preventing unnecessary re-renders when dispatching actions?

[@nomorecensor]

Great content! One small thing: shouldn't store be named as store.ts instead of store.tsx because there is nothing to render?

[@eleah2665]

Very insightful. Thanks.

[@muneugi3900]

Loved this, how do you go about authorization using Zustand?

[@mohammednawaz8664]

Hi Jack, I wanted you to make a video about when SPA application grows, how we can maintain that, as we start we have some components our bundle file would be less but as our application grows we would be adding more and more components, and our bundle file would be increasing how can me make sure our bundle files would not be grown as time goes, Thank you, so much for your videos It really helps a lot in my career

[@diyaagubarah3328]

thanks for sharing this you help me a lot 💙

[@PauloPanganiban]

Ty Jack!

[@shin5302]

Thank you for your explanation. I really love it. But I'm a little confused about when does useSelector function run. It runs when every action dispatched?

[@jherr]

Yes, all the selectors are run every time the state is updated BUT that does not mean they force a re-render by setting state. That only happens when the selector return values differs as described in detail in the video.

[@shin5302]

Thank you, Jack.

[@sugaith]

Thank you Sir

[@iPankBMW]

If Shallow fixes unnecessery rerenders and the shallow function is exported from the library it self then why its not so already by default?

[@jherr]

Because it's less efficient.

[@imam_robani]

that means it's fine to use shallowEqual in every selector we call?

[@VarelaBoss]

Can React.memo prevent the re-render of children components - where the parent component is subscribed to a nested object via zustand/redux? i.e., the parent component is an array of deeply nested objects, and a child component is a consumer of said object.

[@irfanmohammad7269]

Jack you are a great person with awesome content please can you make a video on caching

[@AustinJerry]

Great video! In zustand, how do I get multiple values from the store so I can destructure them using the state pick?

[@jherr]

Use the selector function to select them out into an object and then use the shallow compare, destructure the object on the other side.

[@AustinJerry]

@@jherr Okay, thanks!

[@amershboul9107]

Well explained 👏

[@PaoloJn]

Hi Jack, can we get more videos about backend development? Technologies such as node js, express, databases such as mongodb, mysql and more...

[@Shubham-yc6nz]

Super bbbbbbb thanks sir

[@carlosricardoziegler2650]

So helpful, thanks a lot :)

[@bagorolin]

Is it Zustand like German for state? In that case you would pronounce the st in Zustand like st in state :) Great video as usually. Thanks a lot!

[@jherr]

Yes, you are correct, I'm letting my pronunciation of it slip lately. :(

[@bagorolin]

@@jherr it's not important at all, just wanted to let you know :)

[@jherr]

@@bagorolin No worries. I should get it right though... Respect for the language and all that.

[@trenthm]

Cool!

[@ThomazMartinez]

What are you using to paint on screen?

[@jherr]

Screenbrush with a drawing pad

[@yadusolparterre]

great vid ! Btw it's spelt "efficient" ;)

[@dg3152]

Hey Jack, thanks for the tutorial! How would you implement this using middlewares and persist ❓

[@jherr]

I don't understand the question. This is about selectors. It doesn't have anything to do with middleware or persistence.

[@dg3152]

@@jherr Sorry Jack, I should have been more specific in my question. I Apologise. What I meant to ask was, in Zustand I saw you can write your own middleware, is it possible to achieve the same thing you did using a middleware rather than adding the "shallow " param in multiple places? or is it not a good idea to use that approach? Thanks

[@jherr]

@@dg3152 Is there a middleware pattern in a different state manager that does this. This question feels kind of "trappy". Like you already know an answer. Two ideas though, first, you shouldn't have to do shallow compare because you shouldn't be creating new objects or arrays if they haven't changed their contents. Second, you could use middleware to keep an associated changeIndex value for an array or object. The middleware would do the shallow compare and bump the index on a true change. Then you could select the object but compare on the index in the getter.

[@dg3152]

@@jherr I think I understand now! Thanks for all your content! It helps me a lot!

[@rahulsriram6295]

Does react-tracked or use-context-selector libraries from daishi kato work like this too?

[@jherr]

I’d have to check but my hunch is yes.

[@average7181]

but what if you include all the components into single one?

[@jherr]

One mega-component for the whole app? I've seen that and it's a bad idea.

[@nafeesnazik1751]

What theme are you using ?

[@jherr]

Night Wolf [black] with JetBrains Mono.

[@Valiant600]

Does Jotai "suffer" from the same issue?

[@jherr]

Yes. If you use a "selector" atom, then the result of that atom will only force an update if the `oldValue !== newValue` so you should try to select down to primitives (number, string, boolean). Unfortunately there doesn't seem to be a comparitor function option on `useAtomValue` to allow for a shallow check (or something else). So... that's problematic. Love Jotai tho.

[@marcpanther8515]

So, every single `useSelector` that's currently mounted has a cache of its own? Wouldn't that be a memory hog for large applications? Image N mounted components, with say M `useSelector`s for each.

[@jherr]

By cache do you mean the storage of data to compare it to the last value? A value in this case is either just a value in the case of a primitive, or a reference in the case of an array or object. I'm assuming you are concerned about copies of big arrays or object structures? That's not an issue because it's just caching a reference to that structure and not a copy of the structure. In general, React apps are very memory intensive. Every single tag or component invocation in a React component is a call to createElement, which creates objects and stores them in a massive VDOM. And on every re-render more objects are created and compared again to that stored VDOM. It's a massive amount of memory usage and churn that is just inherint to the system.

[@marcpanther8515]

@@jherr Thanks!

[@vini6]

Why should we use these state managers over react context api?

[@MitchellMagro]

Because of the flow

[@ponderatulify]

How do you do annotations on the code itself

[@jherr]

Screenbrush

[@ayushjain7023]

Hey Jeff, why it only compare one level deep what if numbersarray have objects instead of numbers that does not change ?

[@jherr]

Jeff? I'm Jack. But assuming you meant me, it's about references. Arrays and objects are compared by reference and not by contents. So if the contents change but the reference doesn't then neither React nor Zustand count that as a change.

[@ayushjain7023]

@@jherr It’s the autocorrect on my phone is weird, Actually what my actual question was that example if you have a state like currentUser, which is an object and it has a key whose value is also an object (currentUser is anested object I mean) now if I use shallow function which only check 1 level deep, then here as key ‘s value is object which means shallow will return false even though that key’s value is not actually changed !!

[@jherr]

@@ayushjain7023 Huh, that's weird. If you have something like: const user = { name: "Jack" }; const settings1 = { user, someState: 1 }; const settings2 = { ...settings1, someState: 2 }; Then: user === user // true settings1.user === user // true settings2.user === user //true

[@ayushjain7023]

@@jherrwhat if I do this const { currentUser, numbers } = useStore( (state) => ({ currentUser: state.currentUser, numbers: state.numbers }), shallow ); Here even though I use shallow because as the object keys are array/object as well, then it will rerender 🥲

[@jherr]

@@ayushjain7023 Question for you. Does this re-render? const currentUser = useStore(({ currentUser }) => currentUser); const numbers = useStore(({ numbers }) => numbers); If it doesn't then why do you think that's the case?

[@ankitkumarsharma2372]

Its great

[@ashn]

terminal autocomplete???

[@rajannishad-vt5sz]

how do we solve the problem of objects inside array [{name: 'rohan" ,class: '10'}]

[@DuyTran-ss4lu]

Cool

[@bla156]

Great content but you stopped too soon. I would like to see section on handling nested objects and array of objects.

[@jherr]

Fair point. Perhaps I'll do a followup. Some kind of "How to manage arrays of object in React" type video.

[@shadibshah8070]

Sir, stack of technologies I am using in my project are next.js(typescript), tailwind, twin.macro and storybook but I can't just make them work together perfectly Well I somehow did make them work together with some issues but honestly I don't know how I did it 😅 So can you address this issue Love your content by the way

[@jherr]

I do have a Discord server if you want to jump on there and post your question in the #react channel maybe you can get some help to figure it out. Please follow the #rules before posting.

[@shadibshah8070]

@@jherr will do that Thanks sir

[@Soundbreakr1]

Is anyone curious about reactformbuilder?

[@archmad]

Kwaka?

[@jherr]

quokka

[@viktorkasap]

ж, д, дб ??? =) 1:39

[@davidfromnorth7836]

Jack, please checkout $mol js FE framework

[@alirezaarttam3344]

nicd 😊