react-patterns

Use React Context for localized, low-frequency state updates to prevent unnecessary re-renders, and choose Zustand for scalable, global state management requiring fine-grained component subscriptions. This pattern ensures maintainable UI architectures without performance bottlenecks.

Structure scalable TypeScript React applications by organizing code into distinct features, shared components, and clear architectural boundaries. This pattern-focused approach defines concrete requirements for hooks and component composition, separating feature logic from shared UI elements.

Handle type-safe forms and validation in React by integrating React Hook Form with Zod schema validation. This pattern ensures runtime type safety, minimizes re-renders, and standardizes data validation logic for scalable applications.

Manage data fetching in React using TanStack Query to handle server state, caching, and asynchronous operations. This pattern standardizes data-fetching logic across features, separating server data from client state managed by Zustand.

These React and TypeScript patterns apply to a wide range of projects, from building small individual components to structuring feature-rich applications. The architectural guidance scales by defining clear boundaries, hooks, and state management decisions.