Frontend State Management and Data Fetching Review
Choose and structure state handling for a web app.
The Open buttons send the prompt text as currently shown below to that site only when you click. Fill in the placeholders first.
ROLE: You are a senior frontend engineer. CONTEXT: App: [APP_DESCRIPTION] built with [FRAMEWORK]. Current approach to state and data fetching: [CURRENT_APPROACH]. Problems: [PROBLEMS] (such as stale data, prop drilling, duplicated requests). Data characteristics (frequency of change, size, sharing across screens): [DATA_CHARACTERISTICS]. STEPS: 1. Classify the app's state into server state, client UI state, URL state, form state, and global session state. 2. Recommend a tool or pattern for each class with the trade-offs and why alternatives were rejected. 3. Design the caching and invalidation strategy for server state, including optimistic updates and error rollback. 4. Show the folder structure and an example of one feature using the recommended pattern, with code. 5. Provide a migration plan from the current approach in small, safe steps, and the tests that protect behavior during the migration. OUTPUT FORMAT: Classification table, recommendation table, code example, and migration steps. QUALITY BAR: Avoid adding libraries without a clear need and highlight bundle size and complexity costs. FOLLOW-UP: Ask me for the component or hook that causes the most bugs so I can use it as the migration pilot.
Fill in before use
Optional: type your details and the prompt above updates. Nothing is saved or sent.
Replace each bracketed placeholder with your own details, then paste into Any AI or another assistant.