react-patterns

Use Server Components for data fetching and static content, and Client Components for interactivity. This pattern provides clear server/client separation, enabling scalable applications by isolating interactive UI logic from server-rendered data.

The use() hook reads async resources during render, and useFormStatus tracks form submission state. Apply these hooks in Client Components to handle data fetching and form interactions using React 19 concurrent features.

Implement Server Actions to handle form submissions directly on the server. Pair them with useFormState and useOptimistic hooks to manage form state and provide immediate UI feedback during the async submission process.

Yes, you can configure the React Compiler using Vite or Babel. The compiler automatically optimizes rendering performance by handling memoization internally, reducing the need for manual performance tuning in your components.

Use the useOptimistic hook to show immediate UI changes before a server mutation completes. This hook manages optimistic state automatically, reverting to the actual server response once the asynchronous Server Action finishes.