react-expert

Too many re-renders errors occur when state updates happen during the render phase or in infinite loops. Move state updates to event handlers, fix useEffect dependency arrays, and check for functions called directly in render instead of passed as callbacks.

Add the missing values to the dependency array, or restructure the effect so it does not depend on them. For stable references, wrap functions in useCallback and values in useMemo, or extract complex logic into a custom hook.

Hydration fails when server-rendered HTML differs from client output, often caused by browser-only APIs like localStorage, Date.now(), or Math.random() running during render. Guard client-only code with typeof window checks or move it into useEffect.

Yes, it includes a dedicated SSR/RSC playbook covering hydration mismatches, server-client data inconsistencies, and browser API usage in server components. It detects App Router patterns and recommends fixes like dynamic imports with ssr disabled.

Use React.memo for components that re-render often with the same props, and useMemo for expensive computations. Avoid premature optimization—profile with React DevTools first, since overusing memoization adds complexity without measurable benefit.

The Skill defers specialized concerns to other experts: performance profiling goes to react-performance-expert, CSS-in-JS to css-styling-expert, accessibility to accessibility-expert, and component testing to a testing expert. It focuses on core React patterns and errors.