Video: An App Developer's Guide to React 19: What You Need to Know and Everything You Can Safely Ignore

From Author:

React 19 introduces a huge number of new capabilities and APIs. So, what do you need? What can you implement today? And what should leave for framework authors to integrate?

Even if you don't plan to embrace Server Components, there are new capabilities in React 19 to improve speed, clarify code, and even eliminate long standing dependencies.

In this practical and progressive overview, you'll learn everything you need to be prepared for a React 19 upgrade.

This talk has been presented at React Summit US 2024, check out the latest edition of this React Conference.

Rate this content
Bookmark
Video summary
Today's Talk focused on React 19 and its features, APIs, changes, and optimizations. The speaker emphasized the importance of migrating apps and building with React 19. They discussed the high-level features of React 19, including TypeScript emphasis and the testing library philosophy. The Talk also covered the APIs and integration of React 19, as well as the changes and type safety it brings. The speaker highlighted the improvements in useReducer types and the use of TypeScript. They introduced useActionState for migrating code and the useOptimistic hook for maintaining state immediacy. Real-time updates, action functions outside components, and the benefits of using the 'use' prefix in React were also discussed. The Talk touched on upgrade considerations, the role of RSEs and server actions in React, and the current state of RSC development. Overall, the Talk provided valuable insights into the new features and enhancements in React 19 and their impact on the development process.

FAQ

If useOptimistic fails, it reverts the state back to its previous value, ensuring consistent user experience and state management.

React 19 emphasizes TypeScript, endorses the testing library philosophy, embraces compilers, and improves integration with web platforms.

React 19 recommends using the testing library philosophy, moving ACT into the React proper library, and eliminating test utils and shallow rendering.

React 19 encourages the use of TypeScript over runtime type safety features, which are being phased out. It provides better useReducer types and requires arguments in useRef for improved type safety.

Potential challenges include dealing with unmaintained older dependencies, adapting to API removals, and the need to critically evaluate existing libraries for necessity.

React 19 introduces useActionState and formAction, which integrate web form APIs into React, allowing for asynchronous form handling and optimistically updating UI states.

useActionState in React 19 allows developers to integrate familiar form APIs into React, enabling asynchronous form handling while maintaining immediate user feedback with useOptimistic.

When upgrading to React 19, use code mods to address API removals, review and update dependencies, and prepare for community-driven library updates.

Integrating web forms with React in version 19 aligns React more closely with web standards, allowing developers to use forms as they were intended on the web, while benefiting from React's control and state management capabilities.

APIs such as prop types, default props, context types, get child context, string refs, create factory, module pattern factory, test utils, React on render, React on hydrate, unmount component at node, find DOM node, React test renderer, and shallow are being removed.

Michael Chan
Michael Chan
33 min
19 Nov, 2024

Comments

Sign in or register to post your comment.
Video transcription
Sign in to access video transcription and chapter summary.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Compiler - Understanding Idiomatic React (React Forget)
React Advanced 2023React Advanced 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
Watch video: React Compiler - Understanding Idiomatic React (React Forget)
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Everything You Need to Know About React 19
React Summit US 2024React Summit US 2024
29 min
Everything You Need to Know About React 19
Watch video: Everything You Need to Know About React 19
React 19 introduces new features such as React Compiler and React Actions, which optimize code and provide better performance. The useOptimistic hook allows for optimistically updating UI, while the UseFormStatus hook tracks loading states and enables button disabling. The introduction of the 'action' attribute simplifies form handling and data retrieval. React 19 eliminates the need for useMemo and useCallback thanks to the React Compiler. The stability of React 19 has been observed in side projects without major issues.
What Refs Can Do for You
React Summit US 2024React Summit US 2024
27 min
What Refs Can Do for You
Today's Talk focused on using refs and profiling Agigrid in React. The speaker shared their experience with optimizing custom cell components and performance, including using memo and leveraging the React compiler. They also discussed improving performance with manual style updates and refactoring the use of useEffect. The speaker highlighted the use of ref callbacks, which can be implemented with useLayoutEffect. React 19 introduces changes to the ref callback approach. The Talk touched on using React DevTools and CSS variables for monitoring renders. It also discussed the compatibility of Azure Grid with React and the trade-offs between using React components and vanilla JavaScript. The speaker emphasized the importance of considering the DX improvements and the complexity of not seeing a React component tree in the dev tools. The Talk concluded with a mention of AG Grid features, handling refs at various levels, and the recommendation to consult with Stephen for technical questions and application architecture.
React Compiler - The Missing Piece for Optimizing React Applications
React Day Berlin 2024React Day Berlin 2024
30 min
React Compiler - The Missing Piece for Optimizing React Applications
Today's Talk introduces the React compiler and its optimizations in React 19. The compiler handles optimizations internally, allowing existing optimizations to coexist. React 19 also brings server components, enhanced hooks, improved reference handling, and asset loading optimization. The React compiler follows the same principles as a typical compiler, with a Babel plugin and ESLint plugin identifying optimizations. The compiler optimizes components by performing in-place updates and reducing unnecessary re-rendering. The React compiler playground helps understand the optimization process. Caching JSX and configuring the React compiler can further optimize specific components. The React compiler is compatible with React 18 and 17 with some configuration, but using React 19 is recommended. Connect with the speaker for more information and subscribe to their YouTube channel. Thank you for watching!
React 19 and the Compiler for the Rest of Us
React Day Berlin 2024React Day Berlin 2024
30 min
React 19 and the Compiler for the Rest of Us
Hi everyone. I'm Johnny, an application engineer who builds user-centric React 19 applications. Today, our goal is to help you reach production mountain with React 19. Let's start by gathering a crew and discussing the motives for installing the compiler. We'll revisit React rules and explore the compiler's impact on code. The React compiler translates from JavaScript to JavaScript and provides error reporting. It enables deeper levels of optimization and focuses on user experience. To upgrade to React 19, install the latest version and be aware of any compatibility issues. Check if any custom runtime code needs to be disabled. The React compiler can be used with versions 17 or 18 if you have runtime support. The compiler removes use memos and optimizes the initialization process based on static components. It provides granular reactivity and reduces rendering, making the application feel quicker. Follow React rules and conventions to ensure compatibility. Test custom hooks, be aware of the impact on build time, and address any unexpected issues like the removal of the global JSX namespace. Debugging tools and source mapping in Chrome are useful for understanding compiler output. Enjoy translating chants and exploring the possibilities of React 19!

Workshops on related topic

Mastering React Server Components and Server Actions in React 19
React Advanced 2024React Advanced 2024
160 min
Mastering React Server Components and Server Actions in React 19
Workshop
Maurice de Beijer
Maurice de Beijer
Calling all React developers! Join us for an immersive 4-hour workshop diving deep into React Server Components and Server Actions. Discover how these game-changing technologies are revolutionizing web development and learn how to harness their full potential to build lightning-fast, efficient applications.
Explore the world of React Server Components, seamlessly blending server-side rendering with client-side interactivity for unmatched performance and user experience. Dive into React Server Actions to see how they combine client-side interactivity with server-side logic, making it easier to develop interactive applications without traditional API constraints.
Get hands-on experience with practical exercises, real-world examples, and expert guidance on implementing these technologies into your projects. Learn essential topics such as the differences between Server and Client Components, optimizing data fetching, passing data effectively, and maximizing performance with new React hooks like useActionState, useFormStatus and useOptimistic.
Whether you're new to React or a seasoned pro, this workshop will equip you with the knowledge and tools to elevate your web development skills. Stay ahead of the curve and master the cutting-edge technology of React 19. Don't miss out - sign up now and unleash the full power of React!
Evolution of Form Management in React
React Summit US 2024React Summit US 2024
72 min
Evolution of Form Management in React
Workshop
Adrian Hajdin
Adrian Hajdin
Learn how to handle forms in React using the latest features, such as startTransition, useTransition, useOptimistic, and useActionState, with and without React 19 server actions, alongside proper validation, error handling, and best practices.The workshop will begin by demonstrating traditional form handling using useState and useEffect for client-side rendering. Gradually, we'll transition to using the latest React 19 features, including server-side forms and the newest hooks for managing form states and errors. By the end of the workshop, participants will understand how to create robust forms with proper validation and error handling.Learning GoalsLatest React 19 Hooks — useTransition, useFormStatus, useOptimistic, useActionState, useDeferredValueServer ActionsRevalidationsServer-side ValidationError handlingSecurity practices