Тёмный

Every React 19 Feature Explained in 8 Minutes 

Code Bootcamp
Подписаться 32 тыс.
Просмотров 105 тыс.
50% 1

Grab the React 19 Guide: reactbootcamp.dev
Chapters
0:00 - Intro
0:26 - How to use React 19
0:38 - React compiler
0:58 - No memoization hooks
1:38 - No forwardRef
2:07 - use() hook
2:27 - Fetch data with useEffect/use
3:02 - Use context with useContext/use
3:32 - Directives
3:53 - Actions
4:12 - Client Actions
4:37 - useFormStatus() hook
5:12 - useFormState() hook
6:12 - useOptimistic() hook
7:07 - Conclusion

Наука

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

 

1 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 145   
@wchorski
@wchorski 2 месяца назад
Really like the pacing, examples, and humor. Now we just need dark mode 🌙
@MASTERRAGE
@MASTERRAGE 2 месяца назад
I was going to say the same, thank you.
@upsxace
@upsxace Месяц назад
eww Light mode>>>>>>>
@be2wa
@be2wa Месяц назад
and a proper typeface...
@naishe
@naishe 2 месяца назад
Really smooth pacing and topic jumps. Great job!
@nihadtima8811
@nihadtima8811 2 месяца назад
Another fantastic video! Your explanations are exceptional-clear and concise! I'm eagerly awaiting more content from you! Keep up the excellent work!
@mod_cyber1015
@mod_cyber1015 Месяц назад
Good pace , and clear concept examples. These examples are way better then others . You got one subscriber 👍
@nemeziz_prime
@nemeziz_prime 2 месяца назад
Amazing explanation 🔥 the visuals and examples really helped me understand the new features of React 19
@DericMarchand
@DericMarchand 2 месяца назад
This is just a phenomenal video. Concise, simple and great examples.
@russelfernandes8483
@russelfernandes8483 16 дней назад
So well explained, thank you for summarizing this (and for all the clear illustrations that took time and effort). I need to watch this a couple more time even after trying to watch as much as I can of React Conf 2024;
@yaroslav_holub
@yaroslav_holub 2 месяца назад
This is amazing! Great explanation and great React updates coming.
@lamba7044
@lamba7044 2 месяца назад
really love the way you teach pls make a full in-depth course for React with latest features 🙏
@JamesQQuick
@JamesQQuick Месяц назад
Wow, great overview. Thanks for this!
@ouassimzayani8806
@ouassimzayani8806 2 месяца назад
i like the way you use animations to explain concepts, it makes comprehension so much effective Thanks
@saravanan-subramanian
@saravanan-subramanian Месяц назад
Many thanks for this great summary! 🙏
@MaxWilliam
@MaxWilliam 24 дня назад
Awesome explanation! Thanks a lot :) We got a really useful video right here.
@TruthOfDeath1
@TruthOfDeath1 14 дней назад
Thank you so much for this consice and straight to the point video!
@ayhanarif3906
@ayhanarif3906 2 месяца назад
Great video! Keep up the good work, mate.
@yt-sh
@yt-sh 2 месяца назад
the code and order of its working is a good idea. Great video on these React's concepts 👏👏
@psiko1006
@psiko1006 2 месяца назад
Please make more of such videos. Fasterr! (Keep up the good work)
@soundsofnature4065
@soundsofnature4065 2 месяца назад
Clear explain, thanks!
@MushrathChoudhury
@MushrathChoudhury 2 месяца назад
Loving your work. RU-vid is full of basic react app tutorials, but well explained content like this is much needed
@mcflanky8340
@mcflanky8340 2 месяца назад
Good editing and explanation!
@wishmeheaven
@wishmeheaven 2 месяца назад
Awesome. (Subscribed!)
@binh1298ify
@binh1298ify 7 дней назад
Very helpful. Thanks
@naveedalirehmani4135
@naveedalirehmani4135 5 дней назад
Great video thanks.
@lllapland
@lllapland 16 дней назад
literally the best one
@HamtaroCappy
@HamtaroCappy 2 месяца назад
It makes me feel like a React developer.... which I'm not. Great content !
@enriquegrageda
@enriquegrageda 2 месяца назад
Your subscribe picture is funny af You got a subscribe from me 😂
@prashantmishra5691
@prashantmishra5691 Месяц назад
that 'subscribe bro plz' at the bottom right got me rolling. subbed haha
@0ninetyseven97
@0ninetyseven97 Месяц назад
Best explanation
@neosarchizo
@neosarchizo Месяц назад
So good videos!!
@alexkar66
@alexkar66 25 дней назад
Amazing video! Where do you do such code animations for video?
@Brunoenribeiro
@Brunoenribeiro 2 месяца назад
It's an unusual update from the React team. Until now, React was more like a rendering framework with hooks for adding logic. If you wanted form state for instance, you'd need to add it yourself or use a community lib. Now they are bringing their own solutions to some common use cases. I find it interesting.
@bass-tones
@bass-tones 2 месяца назад
I think they (rightfully) are seeing that React will eventually fall out of relevance if they don’t take some extra steps. The news of the Forget compiler is absolutely massive, and is alone one reason I would have eventually gotten fed up enough with react to switch to something else, if it never appeared.
@miervaldis42
@miervaldis42 2 месяца назад
I just spent 2 hours coding a complex form with Next.js and then, I watched your video, saw `formData` at 4:30, went back to my code and rewrote the from in 20 mins. Lessons of the story : 1) The React updates are really great ! 🚀🚀🚀 2) I should have watched your video earlier 😅😂
@zacharyzheng9326
@zacharyzheng9326 Месяц назад
How about react-hook-form?
@eugenefedorov3498
@eugenefedorov3498 Месяц назад
That was good!
@hristiyanhristov9330
@hristiyanhristov9330 5 дней назад
After 6 months of programming burnout break looks like Im returning in the right time
@ajibodeolayinka3903
@ajibodeolayinka3903 Месяц назад
whoa this is very nice and easy to understand ... can you kindly make on fetching and sending data to the backend in react ether with fetch() or axios
@nilo_river
@nilo_river 2 месяца назад
Full circle to PHP era.
@anonimous__ho
@anonimous__ho Месяц назад
same impression here since i heard about nextjs… the new stuff is the re-invented old stuff, they cant change it…
@simpingsyndrome
@simpingsyndrome 2 дня назад
Butt with JavaScript we have constant DX for both backend and frontend while in PHP u still need a JavaScript if u need interactivity​@@anonimous__ho
@compilejs110
@compilejs110 2 месяца назад
This is really great explanation 👍 Can you keep video background dark? My eyes hurt in light mode.
@jazsouf
@jazsouf 2 месяца назад
"use client" doesn't mean you want you component to run on the client and "use server" doesn't mean you want your component to run on the server. "use client" means you want to access browser objects like the window object, so you have to send your component to the client on top of rendering it client side or/and server side. "use server" means create an API endpoint and treat every function defined in the file as POST
@TheCodeBootcamp
@TheCodeBootcamp 2 месяца назад
It's a little more complex than that. "use client" is also required (at least in Next.js) in components that use state, hooks, and event handlers. It's beyond the scope of an 8 minute video, but I'm happy to cover directives in greater detail in a future video (maybe in a Next.js video or when React 19 is stable).
@jazsouf
@jazsouf 2 месяца назад
Yes, “use client” is for when you want your component to run also on the client, but it doesn’t mean that it won’t be server rendered. It has burned me many times when starting with the app router. Great video btw, I think a video about directives coupled with rendering strategies would be great!
@o_glethorpe
@o_glethorpe 2 месяца назад
We are not even use it and it already looks confusing.
@rico5146
@rico5146 2 месяца назад
@@jazsoufYeah, actually many of guys doesn't seem to know that the fact the component marked as 'use client' also rendered on the server. But it only happens on initial page load (Browser's refresh page also does) for faster page load on the browser. After entire html has been made of the page, it gets painted and client components do hydration which attaches hooks or event handler to the component.
@devrano48
@devrano48 2 месяца назад
Thanks god, I was never comfortable working with those optimization elements.
@codingintelugu8820
@codingintelugu8820 2 месяца назад
React compiler is independent of React 19 release. So React Compiler may come with 19 or may not
@user-bb1cy1yt2q
@user-bb1cy1yt2q 2 месяца назад
for beginners should I learn react 19 or older version as most websites use older react version and react 19 has a lot of changes
@TheCodeBootcamp
@TheCodeBootcamp 2 месяца назад
I would learn React 18 first, especially since its still the stable version. React 19 doesn't replace many things. It's useful to understand why these changes were introduced.
@seifeldeenessam_
@seifeldeenessam_ 2 месяца назад
So by introducing both directives and actions, does that mean that React can replace Next.js (or that Next.js isn't necessary anymore)?
@jwoods9659
@jwoods9659 2 месяца назад
It's all a mess i moved over to VUE
@TheCodeBootcamp
@TheCodeBootcamp 2 месяца назад
React doesn't replace Next.js. Next.js is a framework built on top of React. With client-side actions in React 19, you can make a client-rendered React app with actions, so you don't need Next.js to use actions in particular. Directives are useful only if your components can run on the server or client (like in Next.js). Next.js still has a bunch of features you're still not going to get with a plain React project (data fetching tools, routing, image/font loading, etc)
@msahu2595
@msahu2595 2 месяца назад
Very nice ❤❤
@soukaynazaidi5099
@soukaynazaidi5099 2 месяца назад
That was very helpful ❤,thank you very much ,could you please make a tutorial for react redux and redux toolkit ?
@JJ-sz8wf
@JJ-sz8wf 2 месяца назад
Hey, thank you for Uploading Videos again: I was currently building my Web App with your Full-Stack Saas App Video with Nextjs and SUpabase. Unfortunately you deleted it, can you reupload it, or has some1 downloaded it?
@user-mc4qu9kp6f
@user-mc4qu9kp6f Месяц назад
cool video
@MrEnsiferum77
@MrEnsiferum77 2 месяца назад
Does React 19 will support server components out of the box, or u need some minimal server to support RSC?
@TheCodeBootcamp
@TheCodeBootcamp 2 месяца назад
You need a server. That's why most people use Next.js (with app router) right now.
@MrEnsiferum77
@MrEnsiferum77 2 месяца назад
@@TheCodeBootcampYeah I don't know why I've asked the question, I didn't read the docs properly... Btw, waiting for react 19 and moving towards RSC, it's better if I go greenfield, or I have that time and luxury to refactor client app towards server components, i will go with astro + qwik... I mean get all the performance u can get :)
@yashsolanki069
@yashsolanki069 2 месяца назад
​@@TheCodeBootcampi didn't get this. When we run the application it's already running on the server right(locally)? So it means another server instance locally to have RSC support? I'm not sure how nextjs does this out of the box?
@ngochunglongnguyen4523
@ngochunglongnguyen4523 2 месяца назад
"use server" and "use client" will be a mess! believe me. It's hard to reason about which part of the code is executed on the client or on the server, and confusion will introduce bugs and chaos.
@sowmocoding5740
@sowmocoding5740 2 месяца назад
Been doing this for 2 years in Nextjs lol
@snerketryne
@snerketryne 2 месяца назад
​@@sowmocoding5740same, and it's a mess lol
@kevinreber
@kevinreber 2 месяца назад
I feel like Remix does a pretty good job at this. If you want your code to only be ran on the server just rename your file with a ".server.ts". If you want your code only ran on the client, then rename your file with a ".client.ts". A lot of these new React concepts and patterns actually look like they're taken from Remix
@Athet0s1s
@Athet0s1s 2 месяца назад
source: believe me. There is so many things that when not used properly can introduce bugs and that doesn't make them less powerful when used properly
@elvispalace
@elvispalace 2 месяца назад
i've been using for a while
@AlfonsusAC
@AlfonsusAC 2 месяца назад
"use server" is not to run react component on the server. It is to create instant endpoint and run javascript code in the server.
@TheCodeBootcamp
@TheCodeBootcamp 2 месяца назад
"use server" can be used at the module or function level. You're right that it's primarily used for marking server actions.
@snes87aysd8b
@snes87aysd8b Месяц назад
Im not a react dev, but I watched the video... I was wondering, does vuejs abstract a lot of things that makes it easier to use than react? It would be interesting an opinion of who know both.
@zaccanoy
@zaccanoy 2 месяца назад
i’m not seeing an ergonomic way of handling error state within the form state or actions here. maybe i’m missing it, or it’s in the docs, but wrapping a component in an error boundary doesn’t feel like a good solution, since that can’t be contained to the component with the form logic (because the error will occur in that component, the error boundary must surround it). there are also aspects of forms that are hard to handle in a performant manner, like arrays of fields. maybe the new compiler handles that part though. but it still sounds like we need libraries like tanstack query to make error handling easy, and libraries like react-hook-form and zod to provide good validation
@TheCodeBootcamp
@TheCodeBootcamp Месяц назад
I bet better patterns will emerge once 19 becomes a stable release
@mikefreitag574
@mikefreitag574 15 дней назад
4:13 - is that supposed to be action={myAction} ?
@firethunder20
@firethunder20 2 месяца назад
Create one on flutter
@andrasmargittai6663
@andrasmargittai6663 2 месяца назад
Great
@JazzXP
@JazzXP 2 месяца назад
Seems like they're taking a lot of inspiration from Svelte with this update. I'm all for it.
@connormc711
@connormc711 Месяц назад
Wow react is becoming solid. Ryan was right
@SilvestreVivo
@SilvestreVivo 2 месяца назад
React is learning from Svelte
@Devendradhare
@Devendradhare 2 месяца назад
Experiencing technology change for the first time in my life
@tonyvito5062
@tonyvito5062 2 месяца назад
Happy that React added those features which means no more NextJS. Vercel is almost killing React
@TheCodeBootcamp
@TheCodeBootcamp 2 месяца назад
As a React framework, Next.js offers a bunch of features that React doesn't have out of the box. Routing, image/font optimization, SSR, etc. But features like these definitely make the default React experience nicer. Thanks for watching!
@tonyvito5062
@tonyvito5062 2 месяца назад
@@TheCodeBootcamp Thanks for your HQ content man!
@arden6725
@arden6725 2 месяца назад
all of the server features require next.js until someone writes a different server runtime. the react docs literally refer to next.js when referring to these features
@avciua8082
@avciua8082 2 месяца назад
Just wow
@user-lq7xz1th4x
@user-lq7xz1th4x 2 месяца назад
Wow this svelte 5 release looks promising
@leelacreations
@leelacreations Месяц назад
Could you please create a video on JavaScript Data Structures and Algorithms
@zlatanonkovic2424
@zlatanonkovic2424 Месяц назад
React is the Apple of Javascript frameworks: "look, everybody, we build a compiler"
@jehnzcode
@jehnzcode Месяц назад
React is slowly becoming Nextjs because of new actions feature
@vamshikrishna6001
@vamshikrishna6001 Месяц назад
Please explain about javascript and mern stack topics
@truestoriesz
@truestoriesz 2 месяца назад
Angular please
@user-zh5kg2op4h
@user-zh5kg2op4h 2 месяца назад
'useFormState' is already going to be replaced by useActionState, which returns errorMessage, action, and isPending state.
@Xeras82
@Xeras82 2 месяца назад
The compiler will not be part auf react 19, maybe as a separatate bable plugin.
@arayoflight
@arayoflight 2 месяца назад
great content
@Johnssssss
@Johnssssss 2 месяца назад
I am new in react can you make a project video which is help to improve react concept 😊😊😊
@MaciejPusa
@MaciejPusa 2 месяца назад
4:11 myAction!=formAction
@TheCodeBootcamp
@TheCodeBootcamp 2 месяца назад
Typo
@haveyouseenitthough
@haveyouseenitthough Месяц назад
Correction on 3:48 - “use server” does not tell react to run the code on the server exclusively. It is only used for creating server actions. “use server” won’t create a server component
@TheCodeBootcamp
@TheCodeBootcamp Месяц назад
Would have been better to say "To specify code (actions) you want to run on the server"
@haveyouseenitthough
@haveyouseenitthough Месяц назад
@@TheCodeBootcamp Possibly yeah. I think the real issue is with react choosing those as the way of declaring 2 very different things. “Use client” is more confusing still when you use an SSR framework which is rendering ‘client’ components on the server. It’s fine once you understand it but I think it’s a big problem for beginners
@playboycity
@playboycity 6 дней назад
The form stuff looks like trying to “use the platform” and the asynchronous stuff looks tanstack query
@albiceleste101
@albiceleste101 2 месяца назад
They should've done this years ago
@FrontendNerd-lg3oh
@FrontendNerd-lg3oh 2 месяца назад
reed bager is that you ?
@NetherFilmsTR
@NetherFilmsTR Месяц назад
so after 19 versions, react accepts angular's way was the right one.
@francisco8196
@francisco8196 Месяц назад
Cant get the idea of useOptimistic
@privetdriver
@privetdriver Месяц назад
react became almost like vue 5 years ago 🎉
@prashlovessamosa
@prashlovessamosa 2 месяца назад
Please make more comprehensive videos with examples.
@TheCodeBootcamp
@TheCodeBootcamp 2 месяца назад
What would you like to see?
@prashlovessamosa
@prashlovessamosa 2 месяца назад
@@TheCodeBootcamp i mean to say please make more comprehensive videos explaning topics thats it.
@54peace
@54peace 2 месяца назад
9.9/10 ❤🔥 .1 is for not using darkmode 😄
@emreunlu5592
@emreunlu5592 Месяц назад
React 19 = Next 14, that's all there is to it
@user-hb6yb6bu8n
@user-hb6yb6bu8n Месяц назад
Memoization alwayes seemed to me just a headeache when writing react code, In fact, I never even give them I try 😂. Who feels the same?
@mikkun_
@mikkun_ Месяц назад
This would destroy our whole app. Omg
@notramiras
@notramiras 11 дней назад
This video contains a factually wrong part. "use()" cannot be used to fetch data as described at 2:50. You can't use "use()" with promises created inside the component, because they are not stable references. The whole point of a generic "use()" hook is that unlike other hooks, the identity/persistence of the subscription is already provided by a stable reference. That's the way many state managers, including Recoil, works out dependency definitions inside atoms. You can simply reach out to the dependency through a subscription-based API. But if you put a fetch call in a use(), you'll always have a new promise reference, and it won't work.
@notaspectator
@notaspectator 2 месяца назад
There is a bug in your code on minute 2:42 , your internal function is called fetchPerson, yet in the useeffect you're calling getPerson(). Given that this is a BootCamp, I would assume this is helpful.
@jasongates6894
@jasongates6894 2 месяца назад
The compiler isnt part of React 19.
@redeemr
@redeemr 2 месяца назад
I was so confused about that. I also heard the same thing about the compiler not being included but then I've also seen a lot of people say that it is.
@SiddharthSharma-ei8os
@SiddharthSharma-ei8os 2 месяца назад
am your biggest fans now give me a heart
@TunifyBasic
@TunifyBasic Месяц назад
it's not a compiler it's transpiler.
@cheemakhushvirsingh
@cheemakhushvirsingh Месяц назад
What's the difference?
@imadhamaidi
@imadhamaidi Месяц назад
The difference is very subtle, but it is still valid to call it a compiler since it's transforming a high level language which the browser can't understand (JavaScript with jsx etc) into a language that browsers can understand (vanilla JavaScript). Calling it a transpiler would just cause confusion to people that aren't familiar with the term.
@bipinmaharjan4090
@bipinmaharjan4090 Месяц назад
Action hook is really messed up.
@DarlantenCaten
@DarlantenCaten 2 месяца назад
At this point, React is just copying Remix with a worst API.
@danielson9490
@danielson9490 2 месяца назад
This is gold, very well structured and all the animations helps to get the idea quickly! Thanks for share 🫡
@kid1412621
@kid1412621 3 дня назад
Remove some useXXX, add some useYYY😂
Далее
Every React Concept Explained in 12 Minutes
11:53
Просмотров 364 тыс.
React Compiler: In-Depth Beyond React Conf 2024
15:16
I Built 4 SECRET Rooms In ONE COLOR!
29:04
Просмотров 3 млн
7 React Lessons I Wish I Knew Earlier
7:30
Просмотров 49 тыс.
Cool Tools I’ve Been Using Lately
23:11
Просмотров 91 тыс.
The Heart of React || How React works under the hood
10:32
How to Rewire Your Brain to Learn React
5:46
Просмотров 3,3 тыс.
Why Signals Are Better Than React Hooks
16:30
Просмотров 449 тыс.
JavaScript Visualized - Promise Execution
8:42
Просмотров 116 тыс.
ALL React Hooks Explained in 12 Minutes
12:21
Просмотров 55 тыс.
Bash scripting - Associative Arrays
9:39
They made React great again?
4:11
Просмотров 988 тыс.
Lost Vape Ursa Pocket
0:17
Просмотров 42 тыс.
What’s your charging level??
0:14
Просмотров 7 млн
Плохие и хорошие видеокарты
1:00