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 😅😂
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;
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.
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.
About the Bootcamp - Saw two bad review comments on Reddit- It seems there’s hardly anything there… I backed out. Such a shame given the excellent videos shared on TH-cam
Great. Now I have an excuse to tell LT to remove the code we added a few years ago to make our code performant to now make it more performant. Thanks React. Without you I wouldn’t be able to keep my job 😊
"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.
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
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 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
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
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)
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.
useOptimistic is nice. But what if, for example with chat, a user sends a few messages, will setState (set messages in the chat example) override all the optimistic values?
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.
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!
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
@@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 :)
@@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?
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?
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.
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.
This 7-minute video is worth way more than React 19 Conf video :)).
Really like the pacing, examples, and humor. Now we just need dark mode 🌙
I was going to say the same, thank you.
eww Light mode>>>>>>>
and a proper typeface...
@@be2wa agreed, really exceptional video killed by Comic Sans.
Good pace , and clear concept examples. These examples are way better then others .
You got one subscriber 👍
Really smooth pacing and topic jumps. Great job!
Another fantastic video! Your explanations are exceptional-clear and concise! I'm eagerly awaiting more content from you! Keep up the excellent work!
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 😅😂
How about react-hook-form?
Wow, great overview. Thanks for this!
Cool video! Everything is clear, understandable and short. Thank you!
This is amazing explaining, teaching skill ! You are amazing.
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;
Full circle to PHP era.
same impression here since i heard about nextjs… the new stuff is the re-invented old stuff, they cant change it…
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
This is amazing! Great explanation and great React updates coming.
This is just a phenomenal video. Concise, simple and great examples.
Loving your work. TH-cam is full of basic react app tutorials, but well explained content like this is much needed
Please make more of such videos. Fasterr! (Keep up the good work)
i like the way you use animations to explain concepts, it makes comprehension so much effective
Thanks
really love the way you teach pls make a full in-depth course for React with latest features 🙏
Amazing explanation 🔥 the visuals and examples really helped me understand the new features of React 19
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.
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.
Awesome explanation! Thanks a lot :)
We got a really useful video right here.
Awesome 👌 explanation 👏
really really helpful & straightforward thanks alot
Thank you so much for this consice and straight to the point video!
About the Bootcamp - Saw two bad review comments on Reddit- It seems there’s hardly anything there… I backed out.
Such a shame given the excellent videos shared on TH-cam
Great work! Small correction though "use" is not a hook, its an api
Very helpful. Thanks
Many thanks for this great summary! 🙏
Great. Now I have an excuse to tell LT to remove the code we added a few years ago to make our code performant to now make it more performant. Thanks React. Without you I wouldn’t be able to keep my job 😊
Thanks god, I was never comfortable working with those optimization elements.
Clear explain, thanks!
the code and order of its working is a good idea.
Great video on these React's concepts 👏👏
This is really useful
"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.
Been doing this for 2 years in Nextjs lol
@@sowmocoding5740same, and it's a mess lol
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
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
i've been using for a while
Thank you for explaining
React compiler is independent of React 19 release. So React Compiler may come with 19 or may not
Great video! Keep up the good work, mate.
This is really great explanation 👍
Can you keep video background dark? My eyes hurt in light mode.
06:54 so we should render optimisticMessages instead of messages?
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
literally the best one
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
Would have been better to say "To specify code (actions) you want to run on the server"
@@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
that 'subscribe bro plz' at the bottom right got me rolling. subbed haha
"use server" is not to run react component on the server. It is to create instant endpoint and run javascript code in the server.
"use server" can be used at the module or function level. You're right that it's primarily used for marking server actions.
Great video thanks.
Awesome.
(Subscribed!)
It makes me feel like a React developer.... which I'm not. Great content !
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
I bet better patterns will emerge once 19 becomes a stable release
So by introducing both directives and actions, does that mean that React can replace Next.js (or that Next.js isn't necessary anymore)?
It's all a mess i moved over to VUE
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)
wait is the "use client" and "use server" basically available in react now without a full stack framework?!
apparently.
Best explanation
Good editing and explanation!
That was very helpful ❤,thank you very much ,could you please make a tutorial for react redux and redux toolkit ?
4:13 - is that supposed to be action={myAction} ?
After 6 months of programming burnout break looks like Im returning in the right time
Amazing video! Where do you do such code animations for video?
This is gold, very well structured and all the animations helps to get the idea quickly!
Thanks for share 🫡
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
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.
Your subscribe picture is funny af
You got a subscribe from me 😂
Great video. I am not sure if what you explained for Context and "use server" is 100% accurate but again, great video.
So good videos!!
useOptimistic is nice. But what if, for example with chat, a user sends a few messages, will setState (set messages in the chat example) override all the optimistic values?
React is learning from Svelte
With " use server" for server side rendering. Do we even need next js anymore?
Next is so much more than that.. this is actually kinda new in nextjs
That was good!
waiting for useUse hook in react 20
What about useMe
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.
Very nice ❤❤
Happy that React added those features which means no more NextJS. Vercel is almost killing React
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!
@@TheCodeBootcamp Thanks for your HQ content man!
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
Can anybody share your experience of his bootcamp!?
Saw two bad review comments on Reddit- It seems there’s hardly anything there…
Such a shame given the excellent videos shared on TH-cam
@prasad_yt I had the same experience finding reviews for this
4:11 myAction!=formAction
Typo
Does React 19 will support server components out of the box, or u need some minimal server to support RSC?
You need a server. That's why most people use Next.js (with app router) right now.
@@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 :)
@@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?
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?
Could you please create a video on JavaScript Data Structures and Algorithms
'useFormState' is already going to be replaced by useActionState, which returns errorMessage, action, and isPending state.
At 6:36, I checked my Discord. You might too.
Create one on flutter
React is the Apple of Javascript frameworks: "look, everybody, we build a compiler"
Please explain about javascript and mern stack topics
React 19 = Next 14, that's all there is to it
You don’t know what you’re talking about, that’s all there is to it.
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.
cool video
Can we download this slider ?
The form stuff looks like trying to “use the platform” and the asynchronous stuff looks tanstack query
Experiencing technology change for the first time in my life
Great
Seems like they're taking a lot of inspiration from Svelte with this update. I'm all for it.
The compiler will not be part auf react 19, maybe as a separatate bable plugin.
Angular please
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.
Wow react is becoming solid. Ryan was right
Wow this svelte 5 release looks promising
React is slowly becoming Nextjs because of new actions feature
I am new in react can you make a project video which is help to improve react concept 😊😊😊
so after 19 versions, react accepts angular's way was the right one.
Just wow
Still not a framework, guys, just a tiny small library!
Cant get the idea of useOptimistic
am your biggest fans now give me a heart
react became almost like vue 5 years ago 🎉
They should've done this years ago