react

React components use functional component patterns with TypeScript typings for type safety. Create functional components with hooks like `useState` and `useEffect` for state and side effects, and apply `memo`, `useMemo`, and `useCallback` to optimize rendering performance.

Use React Hook Form paired with Zod validation to build forms with minimal boilerplate. This combination provides robust error handling, input field management, and submission logic while keeping bundle size small and performance high.

State management in React uses Context API for sharing data across component trees and custom hooks for encapsulation. For async data fetching, React Query handles caching, synchronization, and state updates automatically.

React Query simplifies data fetching by managing server state, caching, and synchronization without manual Redux-like boilerplate. It integrates seamlessly with functional components and hooks for fetching, updating, and invalidating data.

Apply `React.memo` to prevent unnecessary re-renders, use `useMemo` for expensive computations, and `useCallback` to stabilize function references. These patterns prevent child component re-renders when parent state updates don't affect them.

Context API handles simple, application-wide state without external dependencies. For complex workflows with frequent updates, consider pairing it with custom hooks or dedicated libraries, but Context works well for theme, auth, and moderate state sharing.