This New React Feature Will Make Your App 20% Faster
Vložit
- čas přidán 26. 07. 2024
- React Simplified Course: reactsimplified.com
React has a lot of things you need to keep in mind when it comes to performance and optimization, but with the new React compiler all of this will be handled for you. This is one of the biggest changes coming to React and something I am super excited for. In this video I will show you how to get started with the compiler and what it can all do.
📚 Materials/References:
React Simplified Course: reactsimplified.com
All React 19 Changes Video: • NEW React 19 Changes A...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:32 - Basic Setup
02:20 - Vite Extra Steps
03:27 - Next.js Extra Steps
03:51 - Compiler Benefits
08:30 - When The Compiler Won’t Work
#React19 #WDS #ReactCompiler
I love this guy but I can’t unsee him shaking his head while talking. It‘s robbing me of my focus 😂
Why did you have to say that? now I keep seeing it as well
Shit can't unsee that now 😂
oh damn you're so right it's constant, I never noticed before
It's so distracting... I have to cover his face...
Could you please create videos based on large-scale projects?
Great to see u again! Kyle
Thabks for sharing this info. It's always good to know React keeps evolving.
great video! thanks for sharing
Great video! How do you find out which components can't be compiled. The health check only tells the number of components compiled. Is there a way to see more details on which components didn't compile and the reason?
More titled Tuesday please!
So you stream somewhere? On twitch maybe?
Useful 🎉
Already updated my projects. Pretty smooth transition, but the eslint isn't working in Vite, so I've got 8/9 and 32/34 components memoized, but can tell which ones are problematic. Using MUI, my component tree is a mess😭
if it memoizes everything by default then does it use extra memory as well?
So basically it implements `React.memo`, `useMemo` and `useCallback` be default to any mutable elements making it not rerender brainlessly - shouldn't it be default React behaviour?
We should have this in like 2014
What kind of keyboard you use Kyle?
Hey Kyle! I have been trying to solve this problem from long and hence seeking your help How do hide/remove the title and more videos sections from the CZcams embedded player in my app? tried the 's contentDocument and querying for its children but that didn't help.
❤️❤️🥺 awesome
Hi, thanks for your awesome videos, is there a way to reach out to you for questions?
bro really had to spend 1/3 of the video editing the config files just to write hello world 💀💀💀 react sure looks tempting I wanna learn this aha 😭
If I am using the Context API, will this memo only trigger a re-render in the components that use the specific property that was updated?
I was once doing some serious debuing in my react-native app that used ContextApi and here is what I observed:
-EACH component that uses 'useContext(myContext)` and even uses property that didn't change in the context will always rerender when any property of useContext changes
-without using `useCallback` and `useMemo` on properties and functions served by the context, WHOLE context rerenders (and then all subsequent components that uses this context) on each local component state change (not from context).
-so using `useCallback` and `useMemo` on arrays objects and funtions inside ContextApi dramatically lowers number of unnecessary rerenders but still on any property change inside context, all components using this context will rerender - redux fixes this issue. So ContextApi with memoizations is quite good, but definitely not ideal - or I am wrong.
PSA: For anyone looking to get the eslint warning and errors, make sure you are using v8 without the flat-config. The react eslint plugins are not compatible with the flat config and v9.
I love React and I'm really exited for these new features to become stable
what do you love about React? I don't use it.
@@SteveosCPU try others frameworks, you'll realize React has the lowest learning curve
@@SteveosCPU try others frameworks, you'll realize React has the lowest learning curve
@@SteveosCPUmost of the time you don't have a choice due to IT guidelines, 1st or 3rd party dependencies, or simply. getting to work in ongoing projects made in React, so no.
We still can't even upgrade to 18 cause we have to upgrade all our unit tests from enzyme to RTL....that face when 100% unit test coverage causes migration issues
That moment when you realize unit testing helps you catching bugs earlier, but takes extra time to maintain and introduce a new way of coupling.
I loved the class-based components. they complicated the frontend development with the introduction of functional components with hooks.
The thing use memo does to a react app. should have happened by default.
Yeah class based component is more clean and just like desktop gui programming. And hook is crap
Wow. I thought I was mad when I thought they were cleaner.
Glad I'm not the only one on the boat.
I've always hated how dirty the code looks on function components. It's a mess. I'm having hard time trying to read this mess.
On the other hand, classes were so cleaner and easier to read.
@@thecoolnewsguy yeah hooks especially useEffect is the source of bugs
Did anyone try React compiler for Existing Projects?plz share exact steps for migration
Faster or faster compile time?
Faster runtime. This is actually something that many functional languages already have been doing for 30 years which makes it fast.
I am not ready for react 19 😅
please teach new nextjs 15 features and websocket connection with example
How use effect not cause any issues, if you guys see there is no dependency array so it will under do infinite loop right?
This iust seems like too much work to upgrade. Im keeping with 18.
we would love to have a crush course on nest js from you. ❤❤
Shake it, but shake less
just scrap react for something that is fast out of box
{ name }: { name: string }
This is the part of Typescript I don't like. In the context of dynamic language we should take some liberties, especially in frontend code where the depth is complexity is usually not that great.
skill issue💀
bruh moment
React trying to be Svelte 🤣
No, its react implementing common functional features that has been around for decades.
Too bad the compiler is still in beta
You won't imagine how fast your app will be when you stop using react at all! Start learning vanilla JS again!
Yea... Sometimes I do feel that... 😂
and reinvent the wheel!
jQuery write less do more
This comment is so stupid, no sane person would choose vanilla js to build a large scale app.
Atleast use Lit
Fun fact: Stream browser webapp uses jQuery. Like a lot.
Third to view
This is great. Thanks🤭
Lol First to see
From last.
13th comment...
first after firsts lol
I swear React is the laziest, most brainless implemented framework ever.
Can we make a federal ban on just adding “honestly” for no reason please.
Also hooks(use, useoptimistics,use actions......) please
stop using react :P Hopefully this helps I quit react after using react hooks for a while. they are so convoluted, cumbersome, and messy
U were prob using them wrong
Skill issue lol
React is PURE GARBAGE. Long live Svelte.
@@ba8e ok cultist
@@UsernameUsername0000 I'd say React people are cultists because they can't leave that piece of shit framework.
Do not tell people what to do, you do not know what their circumstances and goals are!
dont come to see his videos then
He didn’t tell anyone what to do, he’s just showcasing a new feature. Tf are u on about?
I introduce you to a new concept: ignore them.
But you are telling him what to do
Or you can stop coding in React and use an Adult framework 😂
First comment
Thats no working on socket io connection