React 19: Evolution and Features

Rethinking Dependencies

As developers, we often carry the weight of numerous dependencies in our projects. It's crucial to critically evaluate these dependencies instead of dragging along outdated or unmaintained libraries. This proactive approach ensures that our projects remain robust and maintainable over time.

Dependencies can become a source of technical debt if not regularly assessed. Therefore, it's essential to periodically audit them to determine whether they are still necessary or if there's a more current alternative that fits your project's needs better. By doing so, we can avoid potential future headaches and ensure smoother upgrades.

The Evolution of React

React has undergone significant evolution, and its transition to version 19 is a testament to this ongoing development. Some developers express skepticism about whether React is expanding beyond its original scope as a UI library. This sentiment echoes the idea of "jumping the shark," a phrase that signifies a point where something has gone too far and lost its way.

The discussion around React's evolution highlights the importance of understanding how these changes impact our projects. It's crucial to stay informed and adaptable, ensuring that we leverage new features while maintaining the integrity of our applications.

Anticipating React 19 Features

React 19 introduces several notable features that developers should be aware of. The emphasis on TypeScript is one of the significant changes, as React moves away from runtime type safety features. This shift encourages developers to adopt TypeScript for enhanced type safety and better developer experience.

Another significant change is the endorsement of the testing library philosophy, which advocates testing from the outside in. This approach improves accessibility and durability of component tests, shifting away from older practices like shallow rendering and test utils.

Embracing Compilers and Platform Integration

React 19 also embraces compilers, a trend seen in other frameworks like Svelte. This integration aims to optimize performance and streamline the development process. While not covered in detail here, the documentation provides a comprehensive guide to understanding these changes.

Moreover, React 19 is making strides in better integrating with the web platform. This shift is particularly exciting for developers who appreciate HTML and CSS, as it brings React closer to traditional web development practices.

Preparing for Migration

The transition to React 19 requires careful preparation. Developers should familiarize themselves with the APIs slated for removal and utilize the available code mods to facilitate a smooth migration. This proactive approach ensures that projects remain up-to-date and compatible with the latest React version.

It's also essential to address dependencies, especially those relying on secret internals. With changes in React's internals, developers may need to update or replace outdated dependencies to maintain project stability.

Enhancements in Type Safety and Testing

React 19's focus on type safety is evident in the improvements to useReducer types and the requirement for useRef arguments. These changes enhance type safety and simplify the development process, making it easier to write robust applications.

Testing practices are also evolving, with the move towards using the Testing Library. This shift simplifies testing by eliminating the need for test utils and shallow rendering, resulting in more maintainable and reliable test suites.

Exploring New APIs

React 19 introduces several new APIs, such as useActionState and useOptimistic, which enhance the handling of asynchronous actions. These APIs improve user experience by providing immediate feedback while managing asynchronous processes in the background.

Additionally, the new use API offers a way to conditionally render components without incurring unnecessary rendering costs. This optimization allows for more efficient use of context and improves application performance.

Conclusion

The transition to React 19 presents both challenges and opportunities for developers. By critically evaluating dependencies, understanding new features, and preparing for migration, we can leverage the advancements in React 19 to build more robust and efficient applications. As we embrace these changes, it's essential to stay informed and adaptable, ensuring that our projects remain on the cutting edge of web development.

Watch full talk with demos and examples:

Watch video on a separate page
Rate this content
Bookmark

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

FAQ

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.

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

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

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

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

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

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

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

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.

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 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!
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!

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