React.memo is great. You probably shouldn't use it. Great article TK!
Follow him! x.com/tkdodo?s=21&t=UvyVXF6GN...
Link: tkdodo.eu/blog/the-uphill-bat...
Check out my Twitch, Twitter, Discord more at t3.gg
S/O Ph4seOn3 for the awesome edit 🙏
React.memo is great. You probably shouldn't use it. Great article TK!
Follow him! x.com/tkdodo?s=21&t=UvyVXF6GN...
Link: tkdodo.eu/blog/the-uphill-bat...
Check out my Twitch, Twitter, Discord more at t3.gg
S/O Ph4seOn3 for the awesome edit 🙏
if my app never renders in the first place then I don't have to worry
Yes that is why I am switching back to jinja + vanilla js
@@himanshutripathi7441 I'm sorry to hear that
Based
Same 😂
C'mon, y'all get on me all the time about pronouncing Zustand as a German word, and you're gonna let Theo get away with calling it zuss-tand. KZhead comment section I am disappointed. Very disappointed! Another great video, Theo! 😃
😶
Soo-shtand
*"zoo-sh-tand"* is the way to go
Theo: I love react Also Theo: don’t use any of its inbuilt features
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.
This whole conversation about 'My entire freaking app re-renders when I only update a counter... Gee whiz, I'd better use all the "Senior React Dev Tips and Tricks™" to avoid having a sluggish app!' seems to imply that the React development team has shifted a lot of their responsibilities onto the users of their framework.
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!
This video is really important. I think the most important part is not about react.Memo, but about reference management in a React application. From the moment you start to get objects as props, is really easy to get lost, mainly in a production app with thousands of files where you don't know which variable can be trusted to maintain a stable enough reference that you can use as a dependency of your own variable.
Yes, but I find the video title highly exaggerated.
Can’t we just admit large parts of React suffer from bad API design (for the masses, not Facebook)
Actual video title: You Probably Shouldn't Use React
I just start developing a date range picker last week and hit this problem. Super helpful insight. Thank you so much @Theo
Things like this is why I've switched to Svelte.
Can you elaborate more?
You Probably Shouldn't Use React.
Back in the day, jquery didn't trigger re-renders
React: I have a really weird implementation of component rendering, but I give you a bunch of weird utilities to fix it on your own Vue: Let me handle that for you
Yeah that was super helpful. I've been trying to optimize a high level state describing the config of every component and children on a page. Memorizing each component with little luck. Using redux toolkit now but I think I still fell into a trap by passing via prop. Need to surgically get each components state from the store.
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.
I have been writing react code for around two years atm, and I haven't used Memo on components yet
looks like the problem is prop drilling which passing object (and array) as props, If you are building uncontrolled component, react memo will still benefit us. by using zustand / react query, usually you will end up mixing your logic state with component state
Correct me if i'm wrong but .. if the child element is stable .. i.e. im stable .. it shouldn't cause re-renders as a child of a memoized component.
The fact that this discussion still exists, that Reddit posts are still debating it, and that articles are still popping up after many years just shows how React is still an overcomplicated piece of technology with a lot of pitfalls. :D
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.
I could get 3120 elements re-rendering at 60fps with no slow down. 100% agree, If you having slow performance have a look at your overall state design.
React has too many “well actually, you should not” 😢
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”
Switching to VueJS was the best decision i could make. Not caring anymore about all this footguns makes me so productive. Love it 🥰
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.
All this time since using react class components where PureComponent was recommended, I’ve ignorantly kept slapping memo on most of my components without thinking much of it 🤦♂️ thanks for the heads up
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.
tks for sharing
ive use memo for ever changing assets (3 components that able show: image, av and 3d), the expectation is not rerender by expecting just show the asset, but its rerender... so is that memo-ize problem or by using global state (zustand in my case) problem ?
awesome video theo!
It's interesting to see how Vue handles reactivity and optimization out of the box. It's one of the reasons why I find Vue's approach elegant and less cumbersome for certain projects.
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
I mean, Solid solves all of this. You can put the state wherever it makes sense for your code and it will always render quickly.
Is react worth learning over something like svelte, vue, or solid, for any reason other than job market?
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
Well deserved shoutout! TKDodo da man
Wait, we misunderstood another React feature? How shocking. That's definitely not always happening in React.
If I have no users, does my app's rendering performance really matter?
I would honestly just switch to preact signals instead of dealing with the hooks stuff to avoid recomputing things
How big are your tables dude? If you are rendering content you can’t see on the screen, you may consider some form of pagination or windowed rendering.
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.
Why should a developer ever be bothered with all this framework-internal stuff? Developers are meant to solve business problems, not to fight another framework's design flaws. A compiler should handle all the necessary optimizations, similar to what Svelte does.
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.
7:39 💀me as a german speaker, when Theo says "Zustand".
"Zustand" is pronounced "tsuu-shtaand" and means "state" or "condition" in German.
yea I heard they want to rename React to kaputt.
You Probably Shouldn't Use React
like because of the links, thanks for the sauce.
Memoization is a simpler approach imo, unless one uses a state management library at the first place. Bringing a lib to resolve a problem that has a working solution out of the box sounds like an overkill
At this point I just watch these videos to remind myself how much better life is in Svelte-land.
Wait until you discover Vue ;)
Wouldnt this technically be lifting state up and not lifting the content up? Because now the component with state is wrapping the content.
What about using preact/signals as an alternative !
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.
This is crazy to me, i don't do react but this just went over how memoization is just caching and it's not a solution for event handling, which is solved with "state management and hooks" aka observer pattern
Zustand to the resque...
I've said it before but I'll say it again: the editing on these videos is super jarring. Little jump cuts after every single phrase is really hard to listen to. It disrupts the inflection in the voice and makes things harder to understand. I understand you're trying to cut out pauses and keep the video as brief as possible but I can't imagine you're saving much time by cutting out (fractions of?) seconds..
jenna marbles is editing the videos
The thumbnail though
React used to be an npm package, then it grew a little and became a library. A few years later it grows more and becomes a framework, and today it became something even larger than that. React is life. It's so large that if we stop using it it will kill us.
Offtopic : Honestly, I find your thumbnails not funny anymore, became boring. May be use some new thumbnails for some time to come.
Women with breasts work nice on me! I click each and every time!
Man. I learnt React because at the time it looked like the easiest thing you could learn and now its looking like the hardest/most complex UI Framework. What went wrong?
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?
Why would highlightRows={highlight ?? []} break memoization?
[] 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" })
Your last quote from Dominik was the only thing I didn't agree on the video. As "shorter to write" can come with less context or high cognitive overload when coding, so that for me doesn't always work, it seems as a good bet, but it can't guarantee that it won't have some bad trade-offs.
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!
Just use a 3rd party state management library.. This can all be avoided by not using reacts own state management.
set playback speed to .9!
Yo theo. Love your content ❤.
most of the time, the slowness is coming from other stack, such as swr, apollo, graphql, tanstack query, trpc, etc as their default takes a long time to resolve. Once I switched to telefunc everything is showing up instantly
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)
Thumbnail developer Theo brown
Our Codebase is memo free 😃
They should just do React 2 with modern approach instead of piling more stuff to solve problems that shouldn't exist.
Das ist eine ziemliche Zustand!
Use signals, problem solved.
Bruh, I used it 😭😭😭
One thing that I always thought, but turned out wrong is that components re-render when props change, they don't.
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
You shouldn't use React at all.
Theo, please comment here that wrongly using memo is the exactly same as not using memo at all, so it's not a shot in the foot or whatever. I see a lot of apocalyptic comments on this video.
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.
Can someone elaborate on why it is bad to pass an empty object/array as fallback option to a prop in a memoized component? Here kzhead.info/sun/jMxrlaxsnYqdlY0/bejne.html
Is it because an empty object/array as fallback value will always have a new reference on every render breaking memoization?
Why we even NEED React library this days? State management? TanStack Query, Zustand, Jotai, Recoil e.t.c. (most of them are framework agnostic) are better than native React tools. Routing? Completely irrelevant to original React lib. Managed by external libs by default. JSX syntax extension? Not React exclusive. Other frameworks can have it too. What exactly React library do today? And why should we still use it and not Vue, Svelte, Angular e.t.c.?
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.
Every time I see a clickbait thumbnail I will not only not watch the video, I will dislike it too, for being clickbait.
Just don't use React
You're meant to use react memo to memoize the output of slow functions In this case, its easy to define the dependencies of the function to optimize only the slow part of a component Ive never thought of wrapping a whole component in a memo call as an optimization It sounds like a terrible idea and reeks of bootcamp vibes React render functions are supposed to be fast to run. If an app is large enough where this is not the case anymore, perhaps the problem is using react itself, not memo
react is not slow, you are slow
Firsttt
Howdy love your stuff!. preactjs/signals seems epic ?
You Probably Shouldn't Use React.