react-19

Structure React 19 components by defaulting to server components and opting into client components only when necessary. This architecture optimizes rendering and data fetching in Next.js apps by enforcing correct 'use client' directives.

Use the 'use client' directive in Next.js when a component requires interactivity like useState or onClick event handlers. Maintain use client hygiene by isolating client-side logic to small interactive components.

The React Compiler automates memoization in .tsx files, changing hook patterns by making manual memoization unnecessary. It enforces specific rules for imports and the use() hook to optimize component re-rendering.

React 19 allows passing refs as props directly to components without forwardRef. This pattern simplifies component APIs but requires alignment with React Compiler rules to ensure correct rendering behavior.

The best way to convert a mixed component tree is to refactor root layouts as server components for data fetching while extracting interactive leaf nodes into discrete client components with 'use client' boundaries.

Components fail React Compiler rules when they violate constraints around manual memoization, improper hook usage, or incorrect import patterns in server-components-first architectures. Aligning hook patterns resolves these conflicts.