frontend-dev

Choose state placement by scope: useState for UI-only state, lift to a parent for shared sibling state, Zustand or Context for app-wide state like auth and theme, and TanStack Query or SWR for server data. Avoid Redux until simpler options become genuinely painful.

Use semantic HTML elements like button instead of div with onClick, ensure keyboard operability, link form labels to inputs, and use aria-describedby for error messages. Modals must trap focus and restore it on close, and dynamic content should use aria-live regions.

Zustand suits lightweight global UI state like theme, modals, and auth with minimal boilerplate. Redux Toolkit fits large applications with complex state logic. Start with useState and prop drilling, and only adopt Redux when that becomes genuinely painful.

Use TanStack Query or SWR whenever the data comes from a server. These libraries handle caching, refetching, and loading states automatically, while useState is appropriate only for local UI state like open/close toggles and hover states.

Excessive re-renders usually come from unstable prop references or unmemoized expensive computations. Use useCallback for stable function references and useMemo for costly calculations, but profile first since premature memoization adds complexity without benefit.

Tailwind trades naming decisions for verbose class strings and requires a build step. Alternatives include CSS Modules for scoped styles with full CSS features, or styled-components for co-located dynamic styles. Regardless of approach, use design tokens instead of hardcoded values.