react mobx
via PatrickJS/awesome-cursorrules
React development with MobX state management integration and best practices.
What is react mobx?
This rule configures Cursor for React projects using MobX for state management. It establishes conventions for functional components, store architecture, TypeScript usage, and reactive patterns to maintain scalable and debuggable applications.
- Enforce functional components with hooks as the preferred pattern
- Guide MobX store implementation for centralized state management
- Recommend computed values and actions for observable state handling
- Provide folder structure conventions (components, stores, hooks, pages, utils)
- Suggest TypeScript integration for type-safe MobX usage
- Advise on reactive component patterns using observer HOC and useObserver hook
Applies to
File patterns this rule matches.
Rule definition (reference)
Source of truth, from the repository.
// React + MobX .cursorrules
// Prefer functional components with hooks
const preferFunctionalComponents = true;
// MobX best practices
const mobxBestPractices = [ "Use MobX-react-lite for optimal performance with functional components", "Implement stores for managing application state", "Utilize computed values for derived state", "Use actions for modifying observable state", "Implement proper error handling in asynchronous actions", ];
// Folder structure
const folderStructure = src/ components/ stores/ hooks/ pages/ utils/;
// Additional instructions
const additionalInstructions = `
- Use TypeScript for type safety with MobX
- Implement strict mode for MobX for better debugging
- Use observer HOC or useObserver hook for reactive components
- Implement proper dependency injection for stores
- Use reaction for side-effects based on observable changes
- Utilize MobX DevTools for debugging
- Follow MobX best practices for scalable state management `;
Related rules
Best practices and structure for React Native Expo development.
React Native Expo Router with TypeScript and Windows development setup.
Expert React & Next.js App Router development with clear, production-ready code.
React Query integration patterns and best practices for React development.
React + Redux + TypeScript integration with hooks, Redux Toolkit, and type-safe patterns.
React Router v7 framework mode patterns for loaders, actions, route modules, and progressive enhancement.