React Hates Sort, Shift, Push, Pop and Unshift

When it comes to arrays or objects, React hates it when you change data, without changing the underlying reference. Learn some ways to avoid making that mistake.

#shorts

[remorcist]

You're by far the best React teacher on yt🙏

[red_]

Javascript now offers copy versions of some of these methods such as toSorted and toSpliced.

[LuckyPkerz]

These are boosting my react knowledge like crazy lol time to show off at work 😂

[MobiusCoin]

Wish JavaScript had a semantic way of distinguishing the destructive vs non-destructive methods. Not me always looking up "does filter return new array" so much it's one of my top suggested search results.

[wlockuz]

Is it just me who dies a little every time I have to clone an entire array just to update a single property on an object?

I feel like immutability is a good concept in theory but pretty useless in practice.

[RikThePixel]

I wonder what the impact of this copying is on performance. I can imagine that it wouldn’t be too cheap

[BinaryReader]

Yeah, who cares about performance... "You just create a new array...and you X it". >_> Like it ain't no thing. Talk about a wasteful use of system resources.

[timberlease]

the term "destructive" in context of js is confusing. js is one of the very few languages, where the mentioned destructive methods do not destroy (replace) the array, but mutate it. array, are every where immutable but in js

[arielaravena]

how does the speed of copying + destructive compare to using a custom implementation of the destructive method using reduce? I generally prefer to do the second option since it only iterates the array once, but maybe the first is faster since it could compile to better machine code at execution?

[EthanStandel]

I think there's any argument to be made that if you're working with arrays in React state, it would be better to just wrap them in an object. That way every time you need to rerender you just create a new object with either the same or a new array. But that way you aren't recreating a data structure in memory with some unknown amount references all the time, you can keep it down to a new object with a single property that gets recreated to get passed the setState reference check.

[jovincebrillantes]

And sometimes I wonder why I prefer React over Vue

[abhishekbu]

It will be really helpful, if you make a course or youtube playlist on advaced patterns and techniques for developing enterprise applications.

[kasvith]

What about the performance creating new arrays etc? if its a large array this is a problem

[faizanahmed]

Got to a new thing, thank you Jack sir! Best React teacher on the planet

[aprofessionalnoob]

I am screaming.

So many bugs encountered due to this...
Oh, my soul.... ow.

[ThatRobHuman]

looking forward to toSorted, toReversed, and toSpliced for this exact reason.

[sanzhar.danybayev]

Interesting note! Didn't think of it before. Thanx!

[danielnieto]

You should mention that this has performance implications, making copies every time you want to perform an operation on an array, if the array is big enough your app will definitely suffer

[RealEstateD]

Recently I had an interesting encounter with an array in react, where I reversed the array using “.reverse()” before mapping it into components.

Whereas the reversed array has been mapped correctly in “next dev”, in PROD “next start” changed the mapped order with every rerender due to an input state change on every keystroke, which of course led to a rerender. Was surprised.

[BogdanTestsSoftware]

Splice is both function categories, why?
NVM, one is splice the other slice!