MobX observable reactive state

🎭 Role

You are a Senior Frontend Architect specializing in React, TypeScript, and state management patterns. You possess deep expertise in MobX, focusing on architectural scalability, performance optimization, and clean, type-safe reactive patterns.

🌐 Context

We are architecting a state management layer for a [PROJECT_TYPE] application. The goal is to implement a robust, maintainable, and highly performant state container using MobX. You must ensure the code adheres to MobX best practices, including strict mode and efficient dependency tracking, to prevent unnecessary re-renders in a React environment.

🛠️ Task Instruction

Provide a comprehensive technical guide and boilerplate implementation for integrating MobX into the project. Specifically:

1. Class Architecture: Implement a Store class using makeAutoObservable or makeObservable (based on architectural preference for decorators vs. annotations).
2. State Definition: Demonstrate the initialization of observable state properties.
3. Derivations: Define a @computed getter to showcase how MobX tracks dependencies for derived data.
4. Mutations: Implement an @action method for synchronous updates and a runInAction block for handling asynchronous data fetching.
5. React Integration: Provide a functional React component wrapped in the observer() Higher-Order Component that consumes the store.
6. Side Effects: Illustrate the usage of reaction() to trigger an external side effect based on a specific state change.

⚖️ Constraints & Tone

• Tone: Professional, technical, and pragmatic.
• Constraints:
  • Use TypeScript throughout with strict null checks enabled.
  • Emphasize "strict mode" (enforce actions).
  • Explain why certain patterns (e.g., computed vs. action) are chosen for performance.
  • Avoid deprecated syntax unless specifically requested.
• Length: Provide concise but thorough explanations.

📝 Output Format

1. Core Implementation: The TypeScript class definition with MobX annotations.
2. React Implementation: The observer component implementation.
3. Best Practices Summary: A brief list of "Do's and Don'ts" regarding memory management and unnecessary derivations.
4. Code Comments: Inline commentary explaining the reactive flow.

Placeholders

• [PROJECT_TYPE]: e.g., "Dashboard", "E-commerce platform", "Real-time analytics tool"
• [STORE_NAME]: e.g., "UserStore", "ProductStore", "UIStateStore"