How to generate shared state logic with Cursor

1---
2description: React Context generation conventions
3globs: "src/contexts/**/*.tsx,src/providers/**/*.tsx"
4alwaysApply: true
5---
6
7## Context Rules
8- ALWAYS create a typed context with createContext<Type | undefined>(undefined)
9- ALWAYS create a custom hook (useXxxContext) that throws if used outside provider
10- Split state and dispatch into separate contexts to prevent re-renders
11- Use useReducer for contexts with more than 2 state values
12- Memoize context values with useMemo to prevent reference changes
13- Place contexts in src/contexts/{name}Context.tsx
14- Export the provider component and the custom hook, NEVER the raw context

1// Cursor Chat prompt (Cmd+L):
2// Generate a ThemeContext at src/contexts/ThemeContext.tsx
3// State: { theme: 'light' | 'dark', fontSize: number }
4// Actions: toggleTheme, setFontSize(size)
5// Use useReducer. Split state and dispatch contexts.
6// Export ThemeProvider and useTheme hook.
7
8import { createContext, useContext, useReducer, useMemo, ReactNode } from 'react';
9
10type Theme = 'light' | 'dark';
11interface ThemeState { theme: Theme; fontSize: number; }
12type ThemeAction = 
13  | { type: 'TOGGLE_THEME' }
14  | { type: 'SET_FONT_SIZE'; payload: number };
15
16const ThemeStateContext = createContext<ThemeState | undefined>(undefined);
17const ThemeDispatchContext = createContext<React.Dispatch<ThemeAction> | undefined>(undefined);
18
19function themeReducer(state: ThemeState, action: ThemeAction): ThemeState {
20  switch (action.type) {
21    case 'TOGGLE_THEME':
22      return { ...state, theme: state.theme === 'light' ? 'dark' : 'light' };
23    case 'SET_FONT_SIZE':
24      return { ...state, fontSize: action.payload };
25    default:
26      return state;
27  }
28}
29
30export function ThemeProvider({ children }: { children: ReactNode }) {
31  const [state, dispatch] = useReducer(themeReducer, { theme: 'light', fontSize: 16 });
32  const stateValue = useMemo(() => state, [state]);
33  return (
34    <ThemeStateContext.Provider value={stateValue}>
35      <ThemeDispatchContext.Provider value={dispatch}>
36        {children}
37      </ThemeDispatchContext.Provider>
38    </ThemeStateContext.Provider>
39  );
40}
41
42export function useTheme() {
43  const state = useContext(ThemeStateContext);
44  const dispatch = useContext(ThemeDispatchContext);
45  if (!state || !dispatch) throw new Error('useTheme must be used within ThemeProvider');
46  return { ...state, toggleTheme: () => dispatch({ type: 'TOGGLE_THEME' }), setFontSize: (size: number) => dispatch({ type: 'SET_FONT_SIZE', payload: size }) };
47}

1// Cursor Chat prompt (Cmd+L):
2// Create a ComposeProviders utility component that accepts
3// an array of provider components and nests them automatically.
4// Use it to wrap ThemeProvider, AuthProvider, and ToastProvider.
5
6import { ReactNode, ComponentType } from 'react';
7
8type Provider = ComponentType<{ children: ReactNode }>;
9
10export function ComposeProviders({
11  providers,
12  children,
13}: {
14  providers: Provider[];
15  children: ReactNode;
16}) {
17  return providers.reduceRight(
18    (acc, Provider) => <Provider>{acc}</Provider>,
19    children
20  );
21}
22
23// Usage in App.tsx:
24// <ComposeProviders providers={[ThemeProvider, AuthProvider, ToastProvider]}>
25//   <App />
26// </ComposeProviders>

1// Cursor Chat prompt (Cmd+L):
2// @src/contexts/ThemeContext.tsx Create a useThemeSelector
3// hook that accepts a selector function and only re-renders
4// when the selected value changes. Use useRef and useSyncExternalStore
5// or a simple equality check pattern.
6
7import { useRef, useCallback } from 'react';
8
9export function useThemeSelector<T>(selector: (state: ThemeState) => T): T {
10  const state = useContext(ThemeStateContext);
11  if (!state) throw new Error('useThemeSelector must be used within ThemeProvider');
12  return selector(state);
13}
14
15// Usage:
16// const theme = useThemeSelector(s => s.theme);
17// Only re-renders when theme changes, not when fontSize changes

1// Cursor Chat prompt (Cmd+L):
2// @src/contexts/ThemeContext.tsx Generate Vitest tests for
3// ThemeContext. Test: 1) Provider renders children,
4// 2) useTheme returns correct initial state,
5// 3) toggleTheme switches between light and dark,
6// 4) useTheme throws when used outside ThemeProvider.
7// Use @testing-library/react renderHook.