react-19

The React Compiler automatically optimizes component rendering, eliminating the need for manual useMemo and useCallback hooks in React 19 development. It allows developers to write standard JavaScript code while the compiler manages performance optimizations internally.

You can pass a ref as a direct prop to child components in React 19. This simplified ref handling pattern removes the need for the forwardRef wrapper, streamlining component composition and reducing boilerplate.

Use the use() hook by passing a promise directly to it within your component to handle asynchronous data fetching. The use() hook manages promise resolution and allows for conditional context handling alongside the asynchronous data stream.

You should opt into Client Components in React 19 when your component requires interactivity, state management, or browser-specific APIs. Server Components are used by default for data fetching and static rendering, reserving Client Components for interactive UI elements.

Manage pending states by using the useActionState hook to track the form submission lifecycle with server actions. This pattern provides examples for server actions and automatically manages the pending state while the asynchronous server action executes.

Named imports are enforced for modern import conventions in React 19 to ensure better tree-shaking and code clarity. This practice helps bundlers eliminate unused code more effectively, reducing the final bundle size of your application.