react-patterns

Identify wasteful re-renders with React DevTools Profiler, then apply targeted fixes: hoist default array/object props to constants, derive state with useMemo instead of effects, use primitive dependency values, and move frequently changing values to useRef.

Replace sequential awaits with Promise.all for independent calls, hoist fetches to the highest common ancestor instead of fetching in nested children, and use a single Suspense boundary around async siblings rather than cascading boundaries.

React 19 makes ref a regular prop, eliminating forwardRef, renames useFormState to useActionState, allows use() in conditionals and loops, and adds useOptimistic for optimistic updates plus automatic hoisting of title and meta tags.

Yes, the rules include Vite and Cloudflare-specific guidance such as resolve.dedupe for duplicate React instances, loadEnv for Node scripts, and using c.env or import.meta.env instead of process.env at the edge.

Switch to composition when a component has more than five boolean props. Create explicit variant components like CompactCard, split complex components into compound parts with shared context, or use children with named slots instead of render props.