This New React Feature Will Make Your App 20% Faster

Подписаться 1,6 млн

Просмотров 44 тыс.

50% 1

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

Опубликовано:

27 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 104

@ericepp1496 Месяц назад

I love this guy but I can’t unsee him shaking his head while talking. It‘s robbing me of my focus 😂

@rooibaard832 29 дней назад

Why did you have to say that? now I keep seeing it as well

@kkebo 27 дней назад

Shit can't unsee that now 😂

@witchmorrow День назад

oh damn you're so right it's constant, I never noticed before

@saqibkhanz8417 Месяц назад

Could you please create videos based on large-scale projects?

@saru-mado Месяц назад

Great to see u again! Kyle

@fabianramirez3222 Месяц назад

Thabks for sharing this info. It's always good to know React keeps evolving.

@JawaCodePro Месяц назад

Thank you for information

@mohamadrezakazemian5220 18 дней назад

great video! thanks for sharing

@rp77797 26 дней назад

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?

@kevinespina3289 Месяц назад

More titled Tuesday please! So you stream somewhere? On twitch maybe?

@huycaoviet8367 Месяц назад

Useful 🎉

@snake1625b Месяц назад

if it memoizes everything by default then does it use extra memory as well?

@bobwilkinsonguitar6142 19 дней назад

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😭

@gothicwave7761 28 дней назад

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 😭

@user-fc8xh7uo4c 27 дней назад

Hi, thanks for your awesome videos, is there a way to reach out to you for questions?

@premsagar4438 27 дней назад

What kind of keyboard you use Kyle?

@luiz.henrique9 Месяц назад

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?

@arek9430 20 дней назад

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.

@user-ko1cw6mv4q Месяц назад

❤️❤️🥺 awesome

@SeanCassiere 29 дней назад

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.

@amitjoshi956 27 дней назад

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 RU-vid embedded player in my app? tried the 's contentDocument and querying for its children but that didn't help.

@first275 Месяц назад

I love React and I'm really exited for these new features to become stable

@SteveosCPU Месяц назад

what do you love about React? I don't use it.

@first275 Месяц назад

@@SteveosCPU try others frameworks, you'll realize React has the lowest learning curve

@first275 Месяц назад

@@SteveosCPU try others frameworks, you'll realize React has the lowest learning curve

@fabianramirez3222 Месяц назад

@@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.

@BeCurieUs Месяц назад

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

@fabianramirez3222 Месяц назад

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.

@AjayGopalShresthaAGS Месяц назад

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.

@programmerjowo Месяц назад

Yeah class based component is more clean and just like desktop gui programming. And hook is crap

@thecoolnewsguy Месяц назад

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.

@programmerjowo Месяц назад

@@thecoolnewsguy yeah hooks especially useEffect is the source of bugs

@karethokyakare651 22 дня назад

Did anyone try React compiler for Existing Projects?plz share exact steps for migration

@skillsnwokoloanthony7557 5 дней назад

I am not ready for react 19 😅

@sadabdhrubo Месяц назад

we would love to have a crush course on nest js from you. ❤❤

@abdoolkareem_ Месяц назад

Faster or faster compile time?

@davidmartensson273 27 дней назад

Faster runtime. This is actually something that many functional languages already have been doing for 30 years which makes it fast.

@arek9430 20 дней назад

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?

@s7yr0 17 дней назад

We should have this in like 2014

@rajfekar1514 26 дней назад

please teach new nextjs 15 features and websocket connection with example

@avijitchanda7944 Месяц назад

How use effect not cause any issues, if you guys see there is no dependency array so it will under do infinite loop right?

@hathspider9763 29 дней назад

This iust seems like too much work to upgrade. Im keeping with 18.

@gigsnicky 28 дней назад

Shake it, but shake less

@habiks Месяц назад

just scrap react for something that is fast out of box

@jasonjasonjasonjasonjason 13 дней назад

bruh moment

@deimne970 Месяц назад

React trying to be Svelte 🤣

@davidmartensson273 27 дней назад

No, its react implementing common functional features that has been around for decades.

@Euquila Месяц назад

{ 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.