react-best-practices

Start independent operations immediately without awaiting them, then await the promises later. For example, call auth() and fetchConfig() without await, then use Promise.all() to resolve them together, reducing sequential round trips to parallel execution.

Avoid importing from barrel files like lucide-react or @mui/material entry points, which can load thousands of modules. In Next.js 13.5+, use the optimizePackageImports config option; otherwise import directly from subpaths like @mui/material/Button.

Yes, it includes server-side rules for RSC such as avoiding duplicate serialization in props, using React.cache() for per-request deduplication, avoiding shared module state for request data, and authenticating Server Actions like public API routes.

Calculate derived state directly during rendering instead of using effects, and avoid wrapping simple primitive expressions in useMemo. Reserve memoization for genuinely expensive computations or extracting work into memoized child components.

Both create stable callback references that always call the latest handler without re-triggering effects. useEffectEvent is the modern React API for this pattern, while storing handlers in refs with useRef is the manual equivalent for older React versions.