Guidelines for REACT

NEXT.JS

• Use App Router and Server API routes for improved performance and SEO
• Implement route handlers for API endpoints instead of the pages/api directory
• Use server actions for form handling (Use React Hook Form for form handling) and data mutations from Server Components
• Leverage Next.js Image component with proper sizing for core web vitals optimization
• Implement the Metadata API for dynamic SEO optimization in public pages
• Use API routes for {{data_fetching_operations}} (Server Side) to reduce client-side JavaScript.
• Use the new Link component without requiring a child <a> tag.
• Leverage parallel routes for complex layouts and parallel data fetching - Implement intercepting routes for modal patterns and nested UIs.
• Instead of building new components from scratch, use Material UI (@mui/material) for components. Do not rewrite existing components, unless specifically asked to refactor.
• Follow AirBnB style guide for code formatting.
• Use named exports when creating new react components.

Internationalization

• use next-intl for internationalization (useTranslations for client side)
• translations are stored in @/messages/, pl.json for polish and en.json for english
• group translations by pages

REACT_QUERY

• Use TanStack Query (formerly React Query) with appropriate staleTime and gcTime based on data freshness requirements
• Implement the useInfiniteQuery hook for pagination and infinite scrolling
• Use optimistic updates, isLoading and isPending with Skeleton MUI component for mutations to make the UI feel more responsive
• Use the select option to transform and extract specific data from query results
• Use Query Keys structuring pattern ([entity, params]) for better organization and automatic refetching. Store queryKeys in separate files at @/queries
• Implement query invalidation strategies to keep data fresh after mutations
• Current defaults for queries are staleTime: 1minute, gcTime: 5 minutes

ZUSTAND

• Create separate stores for distinct state domains instead of one large store
• Use immer middleware for complex state updates to maintain immutability when dealing with nested data
• Implement selectors to derive state and prevent unnecessary re-renders
• Leverage the persist middleware for automatic state persistence in localStorage or other storage
• Use TypeScript with strict typing for store definitions to catch errors at compile time
• Prefer shallow equality checks with useShallow for performance optimization in component re-renders
• Combine stores using composition for sharing logic between stores
• Implement subscriptions to react to state changes outside of React components
• Create custom hooks to encapsulate store access and related business logic