You Probably Shouldn't Use React.memo() 

Yes that is why I am switching back to jinja + vanilla js

@@himanshutripathi7441 I'm sorry to hear that

Based

Same 😂

😶

Soo-shtand

*"zoo-sh-tand"* is the way to go

Most of React inbuilt features are outdated tho 🥺

i know this is a joke. but i'll bite. *make sure you understand why you need to reach out for a specific in-built feature

@@carebeyan This is true. To be fair i'm only a hobbiest and iv'e moved to sveltekit it just seems so much nicer BECAUSE I don't need 9000 npm packages just to get it to work properly

Bro just like components in another component

i'll be hardpressed to call use memo a 'feature'. it's a patch to fix some inherent architectural flaw in react.

React has a lot of technical debt in terms of their state reactivity and rerenders approach - but you can't just deprecate this stuff at that point. And there isn't much you can do if your components are render functions(instead of builder like in other frameworks) and reactivity basically just relies on if (prevState!==newState) render() - that's why those memoization hatches exist.

REACT IS A LIBRARY!

I think the problem here is that people believe React is a full framework. I have a different view, React does 1 thing really good, it's a JSX to VDOM to DOM consolidator (of course those stages are different for Native etc), if you start expecting it to be more, that's when issues creep in. eg. `useState` been pushed up the render pipeline etc, is a massive fail. And comparisons between say Vue & React don't make sense, Vue & NextJS comparisons sure.. So yes, React have shifted the responsibility onto the users, but is that really a bad thing?. This basically allows the user to decide what state manager he likes, rather than one thrown on them by React Devs. Could you imagine if React had included Redux as it's state manager in the early days, well let's say this, I wouldn't be using it now.

​@@keithjohnson6510Sure, but at some point there should be a sensible and easy-to-use default with the ability to change it in some advanced config. Even then, multiple state management tools is a terrible idea and will just result in fragmenting the ecosystem. They should have just designed it better in the first place.

@@RomvnlyPlays React is just an npm package!

Can you elaborate more?

Yes, but I find the video title highly exaggerated.

No, it shows that how many people totally miss understand what React is & is not. If you install React and think that's all you need, then your in a world of pain. It needs at least one other lib, Jotai, Redux, Rematch, Zustand, etc etc. But whatever you do pick at least one of them. Maybe the biggest mistake React have done, is not making that point clear enough. React on it's only can only really be used for very simple apps, even a simple ToDo list is would benefit from a state lib.

@@keithjohnson6510 How do you not see the issue with this?

Indeed. Years ago React moved away from classes because beginner/light programmers didn’t know how to use `this`. Turns out you have to be an expert anyway because you have understand the hidden complexity.

@@keithjohnson6510they should have the feature baked in. Seriously, state management is a pain in the you know what.

It's only for content most of the time

React provides primitives. useEffect is a primitive hook that can wrap a lot of different logic depending on your use-case. That's why it has footguns, as with any lower level APIs. Use libraries that abstracts around these primitives, where performance, maintainability and simplicity matters. Or create your own abstraction for specific use-cases to make it impossible to misuse. Memo is also not unique to React and its rules are not unique to React. Any memoization implementation will effectively have the same tradeoffs. It's a caching mechanism, which requires cache invalidation. You have to make tradeoffs where needed. React already does a lot to make renders fast, so don't sweat it.

@@dealloc you’re right it has trade-offs, this topic deserves I bigger video on that. People in the comments are just like “alright, I guess I will never use memo or React ever in my life”

I'm curious, why you would pass it as a prop if you are using redux toolkit? If you use the selectors you can have memoization in the data and avoid unnecessary rerenders

​@@joaopslinsthere are components that have to be reusable and passing data as props is the proper way to make them reusable

@@joaopslins I think that's the play. Need to create a way where I can use the selector to get the props of the individual component, then pass them in as props to the reusable component. Plan is to use some sort of generic component wrapper to do that. If you know of some examples of this I am curious to see how others have implemented this.

@@amaury_permer That's kind of the struggle I'm having. Want to make reusable react components to use within my react code, but be able to hook those same components into this JSON page config design model too.

Does Vue have jsx?

@@saadhabashneh5587you can use vue with jsx, but it isn't the same one with react, which gets transpiled into React.createElement, but in vue the jsx code will be transpiled into vue's own virtual dom generation function - which is the "h" function, aka render function -.

@@saadhabashneh5587 Yes, it does.

​@@saadhabashneh5587 Yes it does. They recommend to default to using Vue templates instead.

@@saadhabashneh5587 It can but its not the same as React. Better to use plain HTML/templates as it's just 1000x easier to read and manage.

I don’t think that’s too bad. In the worst case scenario of wrongly using memo, like by not memoizing the component props, things should work exactly the same as if there wasn’t any memo on your app, all the components still rerendering on the DOM. And React handles that well too, not a big deal.

Wait until you discover Vue ;)

the sad part is that their library ecosystem isn't as rich as react. A lot of components that I can find are mostly react only :\

Same for React, both optimizes the rendering components on the DOM, but at least it gives the developers the opportunity to prevent unnecessary renders with simpler logic, Vue just doesn't have that option.

​@@pedrocruz8164You dont seem to understand that the reactivity approach of Vue never re-renders anything that you dont change. Why would you need a Vue.memo in the first place if the way reactivity works is surgical out the box, which is exactly what zustand, jotai, recoil and others propose to avoid Reacts problems.

I think every other framework handles it better - React is the outsider here. Solid/Preact use signals,Angular uses observables, Vue uses proxies and getters, Svelte uses compiler. Only React just uses Object.is(=== basically)

@@pencilcheck main reason there are more react libraries is because most things need a react wrapper to work inside of react as in Vue you can just use the js library for the same component it just works

yea I heard they want to rename React to kaputt.

React Forget

Yeah, another thing that bothers me is how you have to setup your editor perfectly so it suggests you the correct dependencies with useEffect/useMemo or it's gonna be really easy to mess up everything. Like, why can't the framework do that by itself? It's surprising react is still the default goto framework

Which is part of why they are working on React Forget. Also, to have effective optimizations you have to know some internals before you can make the right tradeoff. It's the same as having to choose between data structures, depending on your use-case. You'd have to know beforehand how you'd like to store things in memory and how they are accessed. But abstracting this to try and fit it into every solution won't work, as those may require other optimization strategies. React provides primitives because the team don't think providing abstractions that work for a tiny number of people is worth the maintenance burden that comes with provided new APIs both for the maintainers, but also for users of React. Which I'd agree with.

My other solution to this is to connect to the backend and get the data from there. I’d rather be coupled across the network than to a state management system.

React was supposed to be a UI library but quickly evolved (or devolved IMO) into an entire app framework due to everyone slowly pushing all of the app scope onto the browser. All the work that statically reendered apps did now is done on the frontend and then some, all while duplicating most of the backend logic. Suddenly the frontend is now an entire long lived application in itself with all of the state problems that came with it.

React is a very leaky abstraction with a lot of footguns. Once you're aware of the low level concepts you're mostly good to go.

Wait till you try angular

Just use a good state management library and you will be fine

@@pedrocruz8164 this is symptomatic of the problem, why has front-end state evolved to the point where we need entire state management libraries as well?

nope, just try in a small project and see yourself. I would use Vue since its a very good middleground from ease of use and ecosystem

jenna marbles is editing the videos

Women with breasts work nice on me! I click each and every time!

That's a state management solution. But worse, since it changes React internals in order to work how it does. If those internals change with a new React update, you have no way to update it without either waiting for a patch from Preact, or patch it yourself, potentially introducing bugs that can be hard to debug.

I make ONE bad joke and Theo reads it on his video 😭. I wanted to say that "shorter to write" is not a good argument for anything, because we should optimize for readability first. We always read code more often than we write it. I have a blogpost on that, too. I should just stop doing jokes and stick with content I guess 😂

@@TkDodo are you saying $("blah") is not readable? What's there not to understand? It's a US Dollar sign, with some paranthesis and a word "blah"! Even my dog would understand it and I don't even have a dog!

[] does not equal [] on each new render and {} does not equal {}, React thinks it's a new object. to prove console.log("Is this equal: ", { name: "Mike" } === { name: "Mike" })

What's telefunc

also, I stopped using nextjs. I use vike instead it is basically ssr plugin for vite and it is actually very minimal and just as useful as nextjs. (the initial setup might not feel as smooth but once you get it it is actually very simple)

isn't it?

@@user-tt3bc7yk8rto get new props we need to rerender the component, so state changing is the main reason for rerendering, but not props changing

​@@user-tt3bc7yk8rthey do, they also re render if the parents functions are not memoized with useCallback even if you use memo wrap to the child components.

They do

Git gud

In fact it's not just the exact same, but worse depending on how much you do it since. memoization requires storing additional copies of things in memory for caching, it will take up additional memory for no reason, which can lead to an overall bad user experience.

well if it's used wrongly it's more code to write and maintain. Why would we want code that does nothing in the best case, and adds additional overhead in the worst?

@@dealloc I think memory is not directly tied to UX, it certainly doesn’t affect rendering performance at all.

@@TkDodo I mean nobody should use anything wrongly ever. React memo has useful usage on specific cases, and we shouldn't just throw it out the window just because is hard to understand how to use it.

This is 100% the sort of take you'd expect from a content creator though. People who have worked across a number of React teams of different sizes, skillsets, and project sizes might have a more nuanced opinion of this. Someone who are ultimately responsible for sorting out perf issues a team encounters might have a different recommended default approach.

Is it because an empty object/array as fallback value will always have a new reference on every render breaking memoization?

Correct things like Jotai do state better than React, and is the reason you use React+(state manager of choice).. Why use React?, well personally I would love to switch to SolidJS, but it would be a big change for existing apps. Never been a fan of View syntax, but what's more concerning is look at breaking changes for V3 Vue?. One things you have to give React credit for is backwards compatibility, code I've written years ago in React, will in most cases work on the latest version with minimal changes if at all, that V2 to V3 breaking changes would scare the hell out of me.

@@keithjohnson6510 React in its essence is JS functions. So backwards compatibility is not an issue. And, logically, React is much easier to debug. But now no one uses just React library without other libs and addons. So all that aforementioned pros can go through the window because of some unstable library you installed years ago. Which is poses the same question: why I ever need to use React now-days and experience all those pain points?

@@alexm9104 I gave you a few reasons. Repeating the same question won't change my answer. Also React is not just a function, it also has backwards compatibility with class based React components. And in fact still has to be used for certain things like Error boundaries. If you mean why start a new project in React, then yes, maybe going SolidJS might be an option, but you still have the issue of the massive eco system React brings with it, that Solid currently does not have. But saying that, I don't have any pain points with React, so I wouldn't experience them anyway, so sticking with React seems fine to me. YMMV

@@keithjohnson6510 ok. Just remind you, JS has no "traditional" classes. Classes in JavaScript are syntactic sugar for constructor functions. With extra optimization, maybe idk. That's all. I'm done.

@@alexm9104 Was there a point you was making there?. Regardless if you class JS classes as true classes or not, it's still rather nice a React component written uses classes, still works in the latest version of React. That cannot be said for a lot libs out there, breaking changes can sometimes be a pain in the but.