Finally.... But it's exciting! | Highlights and Annotations by Gistr.

React 19 introduces several new features, including: form actions (client-side and server-side), simplifying ref passing and context usage with new hooks (`use`), and improved metadata handling. An experimental React compiler aims to automate performance optimizations. While mostly backward compatible, some features (like server components and server actions) require specific project setups (e.g., Next.js) for full functionality. but that you can still use in your projects. And that requires React 19. And that would be the React compiler, which is a new tool, you could say that was created by the React team. And the goal of this compiler is to simplify the React code you write. because without that compiler, you have to do quite a lot of optimizations manually in your code to produce performant React applications. At least you have to consider making these optimizations. And I'm talking about things like using the memo function or the use memo hook or the use callback hook, which you have to use to avoid unnecessary component re-evaluations and potential render cycles.. with the React compiler added to your React project, the idea is that you don't have to use memo, use memo or use callback and that instead the compiler will kind of add those features behind the scenes to your code, though you'll never see them. form actions. And I mean form actions, not server actions. that's all the part but I'll get back to that later.. instead form actions are a new feature where you can handle form submissions without listening to the submit event.03:10So instead of adding the on submit prop and adding a function and preventing the browser default manually as you had to do it before with React, you can now use the action prop on a form element and bind that to a function..03:26now that's something which normally wouldn't work. It's not something the browser supports out of the box, but React supports it And React will then invoke this function, prevent the browser default so that no request is being sent. and in that function, you'll automatically get a form data object as a parameter so that you can easily extract and use the submitted value.. , the use form, status hook, which you can use in some nested component that must be used in a nested component actually. So a component that's used inside of that form, that is using that form action,