react

For complex state in React 18, use the `useReducer` hook instead of `useState` to manage centralized logic, enabling predictable state transitions and easier testing of component behavior.

Optimize React performance by applying `useMemo` to cache expensive calculations and `useCallback` to memoize functions, preventing unnecessary re-renders when passing callbacks to child components.

Use `useRef` instead of `useState` when you need to directly manipulate the DOM or store mutable values that do not require triggering a component re-render upon updates.

Common React hooks anti-patterns include missing effect dependencies and infinite loops; fix them by properly managing `useEffect` dependency arrays and extracting reusable logic into custom hooks.

Yes, this guidance enforces modern React principles including Server Components, ensuring proper dependency management and efficient data fetching patterns for robust frontend applications.

Share logic across React components by creating custom hooks, allowing you to extract stateful logic and reuse it throughout your application while maintaining clean component composition.