The correct way to optimise React

VSCode Theme | Font → Material Theme Darker | Menlo

It's finally time we talk about the correct way to optimise React. I see a lot of developers using React hooks like useMemo and useCallback wrong, and actually trying to over-engineer performance. This can even lead to, ironically, worse performance than you had to begin with! I show some examples here to hopefully clear this up once and for all, so that we can all go back to building performant React applications.

[rmnkot]

Let's don't forget about one important thing. React will re-render child component anyway regardless of wrapping variables or functions in hooks on parent render unless you wrap it in memo HOC. This concept is skipping in most of the videos like this which forms wrong mindset around this problem.

[KoOcie]

@vishwasrv Correct sir, primitives such as strings, numbers or booleans are compared to each other by their value, where arrays, functions or objects are compared by their reference in memory. In other words on each re-render non-primitives are having a new reference, therefore using them in dependency arrays is just counter-productive. This is actually the most common mistake made even by the senior devs. That being said it is worth to mention that states in react if not changed directly, preserves their reference... which just introduce more confusions...

[CoericK]

What about wrapping the UserStats component with a React.memo(UserStats) ? What that be low performant as well?

[otis]

32:48 how you got this popup showing logged value there, any extension ?

[pororit]

its so good point for optimisation! thanks!

[HarshShah]

Can you please create video on how to measure how many time rerender happens on clicking or any event?

[ДенисМалышок]

What make expensive calculations being expensive? Where it starts? Where is the border?

[isaacjon]

I have an idea. imagine we have a page where at the top we have 3different filters and based on that we display an infinite number movies and also we have a search bar. You u need to make sure that everything is written like a senior developer to make this page the most optimized

[nonnnth]

This looks unnecessarily complicated. Can I just useSvelte or other frameworks instead.

[supersaiyan]

I am new to react, but if user is a state, wont user stats automatically get updated when user is changed? Whats the point of a useMemo?

[balduin_b]

whouldnt be the best optimization to use 2 variables instead of one obj?

[PwrXenon]

Greatest way to optimize it is to remove it entirely from your project

[erezmizrahi]

its meaningless If you use an object in the dependency array of useMemo.. the object will always have a new reference when the component re renders

[archmad]

make an object as dependency is a red flag. That actually is the biggest sin

[MrREALball]

The other use of useMemo, besides expensive operations, is if you need to have a more stable reference to an object.

Also, you forgot that theres an additional cost for creating a callback function and a dependency array for useMemo.

[pavelisel]

I'm still waiting for someone to give an example of an expensive computation, everyone says is for that but no one has ever given an example 😥

[vishwasrv]

I have a doubt sir, passing objects as dependancy array in usememo or callback will always create new instances isnt it? In that case its better to use primitive values within the objects as dependencies, please correct me if I'm wrong?

[coder]

It’s seem logical to think that useMemo and useCallback is not cost less and perhaps we should be using it more sparingly. But another thought that came to mine was the presentation given on the React compiler that meta is working where useMemo and useCallback is applied by the framework itself. In that case I’m wondering on what basis it will apply the optimization or if they feel like the cost is negligible and apply it across the board.

[pedR]

Once again great video!!! How can we evaluate the cost performance of each aproach? It would be interesting to do a video with metrics?

[ДеянДелчев-ыз]

Isn't comparing to reference super fast. It is comparing two pointers. On another hand if the is object big and component rerenders a lot, the GC will not be very happy