react-debugging

Debug React component rendering by inspecting hooks, state management, and TypeScript types. Identify issues in useState, useEffect, useQuery, and Zustand stores, then apply fixes like correcting dependency arrays or guarding undefined data to restore correct behavior.

React hooks fail when dependency arrays are incorrect, state updates are asynchronous, or type mismatches occur between component props and hook returns. Fix these by aligning dependencies, handling async data, and resolving TypeScript inference errors across component trees.

Resolve TypeScript errors by correcting type mismatches in hook signatures, validating prop types against component consumers, and ensuring data from useQuery and Zustand stores match declared types. Apply type-safe patterns to prevent runtime failures.

Hydration mismatches occur when server-rendered and client-rendered output differ, often from state management timing, conditional rendering, or async data loading. Fix by synchronizing Zustand stores, guarding undefined values, and ensuring consistent rendering logic.

Yes. Debug Zustand store updates and React Query cache mismatches by inspecting state values, hook dependency chains, and TypeScript type definitions. Address rendering problems caused by stale data or incorrect store subscriptions.

Avoid missing dependencies in useEffect, calling hooks conditionally, mutating state directly, and mistyping async operations in useQuery. Catch these errors early by validating dependency arrays, enforcing hook rules with linters, and reviewing type definitions.