## No Manual Memoization (REQUIRED) ```typescript // ✅ React Compiler handles optimization automatically function Component({ items }) { const filtered = items.filter(x => x.active); const sorted = filtered.sort((a, b) => a.name.localeCompare(b.name)); const handleClick = (id) => { console.log(id); }; return ; } // ❌ NEVER: Manual memoization const filtered = useMemo(() => items.filter(x => x.active), [items]); const handleClick = useCallback((id) => console.log(id), []); ``` ## Imports (REQUIRED) ```typescript // ✅ ALWAYS: Named imports import { useState, useEffect, useRef } from "react"; // ❌ NEVER import React from "react"; import * as React from "react"; ``` ## Server Components First ```typescript // ✅ Server Component (default) - no directive export default async function Page() { const data = await fetchData(); return ; } // ✅ Client Component - only when needed "use client"; export function Interactive() { const [state, setState] = useState(false); return ; } ``` ## When to use "use client" - useState, useEffect, useRef, useContext - Event handlers (onClick, onChange) - Browser APIs (window, localStorage) ## use() Hook ```typescript import { use } from "react"; // Read promises (suspends until resolved) function Comments({ promise }) { const comments = use(promise); return comments.map(c =>

{c.text}

); } // Conditional context (not possible with useContext!) function Theme({ showTheme }) { if (showTheme) { const theme = use(ThemeContext); return

Themed

; } return

Plain

; } ``` ## Actions & useActionState ```typescript "use server"; async function submitForm(formData: FormData) { await saveToDatabase(formData); revalidatePath("/"); } // With pending state import { useActionState } from "react"; function Form() { const [state, action, isPending] = useActionState(submitForm, null); return ( ); } ``` ## ref as Prop (No forwardRef) ```typescript // ✅ React 19: ref is just a prop function Input({ ref, ...props }) { return ; } // ❌ Old way (unnecessary now) const Input = forwardRef((props, ref) => ); ``` ## Keywords react, react 19, compiler, useMemo, useCallback, server components, use hook ---