frontend-implementation-guard

To keep React components focused, enforce single-responsibility design by moving business logic to custom hooks or services, placing state at the appropriate scope, and using discriminated props for variant rendering.

The best way to manage server state in React components is using TanStack Query for client-side data fetching, which separates server data from local component state and reduces unnecessary prop drilling.

Organize React state placement by keeping it at the lowest necessary scope and avoiding Context for frequently-updated data, instead relying on local state and custom hooks to prevent unnecessary re-renders.

You should use custom hooks for business logic in React because they enforce clean separation of concerns, making components easier to test and reuse by extracting sprawled event handler and render logic.

Yes, this React architecture guard works with standard ESLint hook rules, actively requiring adherence to them alongside discriminated props patterns and single-responsibility component design.

You should use discriminated props for React component variants when rendering distinct UI states, as it enforces clean component design and prevents prop combinations that violate single-responsibility principles.