React 19 is huge
React 19 is huge. Here's a cheat sheet.
Nine new features:
1. React Server Components - Components that render at build time, or for each request.
2. Actions - Functions that use async transitions and automatically submit data for you. Actions support error handling, optimistic updates, and pending state.
3. Full custom element support
4. Document metadata support - Render title, link, and meta tags and they automatically hoist.
5. Stylesheets with precedence settings
6. Render async scripts in any component - They're automatically deduplicated
7. Preload resources via prefetchDNS, preconnect, preload, preinit
8. Unexpected tags in <head> and <body> are skipped over - Improves third-party script compatibility and avoids mismatch errors
9. Better error reporting - Automatically removes duplicate errors. Added onCaughtError and onUncaughtError root options.
Two new directives:
1. 'use client' marks code that runs only on the client.
2. 'use server' marks server-side functions that can be called from client-side code.
Six new APIs:
1. use - Read resources (like promises and context) in render
2. ref as a prop - refs are finally just a plain prop!
3. ref callbacks support returning a cleanup function
4. Streamlined Context - Use <Context> instead of <Context.Provider>
5. useDeferredValue - Now accepts an initial value too
3 new hooks:
1. useActionState - Declare form state and degrade gracefully if JS hasn't executed yet
2. useFormStatus - Get a form’s status
3. useOptimistic - Show the final state optimistically while an async request is underway
Full post: https://react.dev/blog/2024/04/25/react-19