react mobx
via PatrickJS/awesome-cursorrules
React development with MobX state management using functional components and hooks.
What is react mobx?
This rule configures React projects to use MobX for state management with functional components and hooks. Use it when building React applications that need centralized, observable state with computed values and actions.
- Enforce functional components with hooks over class components
- Implement MobX stores for application state management
- Use computed values for derived state and actions for state mutations
- Apply observer HOC or useObserver hook for reactive component updates
- Configure TypeScript for type safety with MobX stores
- Enable MobX strict mode and DevTools for debugging
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
Senior full-stack TypeScript, React, Node.js guidance with clean architecture, testing, and WHY-oriented reasoning.
Quantitative factor research skills for designing, evaluating, and mining alpha factors in equities markets.
Android development with Jetpack Compose, clean architecture, and Material Design 3.
Angular development with Novo Elements UI library using standalone components.
Expert Angular 18 + TypeScript development with Jest, emphasizing clean code and performance.
Manage Kubernetes clusters, add-ons, stacks, and credentials via the Ankra CLI platform.