@mytechtoday/augment-extensions 0.1.0 → 0.1.2

package/augment-extensions/coding-standards/react/rules/performance.md

@@ -0,0 +1,300 @@
+# React Performance Optimization
+
+Techniques for optimizing React application performance.
+
+## React.memo
+
+Prevent unnecessary re-renders of components.
+
+```tsx
+// Good - Memoize expensive components
+interface UserCardProps {
+  user: User;
+  onEdit: (id: string) => void;
+}
+
+export const UserCard = React.memo<UserCardProps>(({ user, onEdit }) => {
+  return (
+    <div className="user-card">
+      <h3>{user.name}</h3>
+      <button onClick={() => onEdit(user.id)}>Edit</button>
+    </div>
+  );
+});
+
+// Good - Custom comparison function
+export const UserCard = React.memo<UserCardProps>(
+  ({ user, onEdit }) => {
+    return <div>{user.name}</div>;
+  },
+  (prevProps, nextProps) => {
+    return prevProps.user.id === nextProps.user.id;
+  }
+);
+
+// Bad - Memoizing everything unnecessarily
+export const SimpleText = React.memo(({ text }: { text: string }) => {
+  return <span>{text}</span>; // Too simple to memoize
+});
+```
+
+## useCallback
+
+Memoize callback functions to prevent child re-renders.
+
+```tsx
+// Good - Memoize callbacks passed to memoized children
+const ParentComponent: React.FC = () => {
+  const [items, setItems] = useState<Item[]>([]);
+  
+  const handleItemClick = useCallback((id: string) => {
+    console.log('Clicked:', id);
+  }, []);
+  
+  const handleItemDelete = useCallback((id: string) => {
+    setItems(prev => prev.filter(item => item.id !== id));
+  }, []);
+  
+  return (
+    <>
+      {items.map(item => (
+        <MemoizedItem
+          key={item.id}
+          item={item}
+          onClick={handleItemClick}
+          onDelete={handleItemDelete}
+        />
+      ))}
+    </>
+  );
+};
+```
+
+## useMemo
+
+Memoize expensive computations.
+
+```tsx
+// Good - Memoize expensive calculations
+const ExpensiveComponent: React.FC<{ items: Item[] }> = ({ items }) => {
+  const sortedAndFilteredItems = useMemo(() => {
+    return items
+      .filter(item => item.active)
+      .sort((a, b) => a.priority - b.priority);
+  }, [items]);
+  
+  const statistics = useMemo(() => {
+    return {
+      total: items.length,
+      active: items.filter(i => i.active).length,
+      average: items.reduce((sum, i) => sum + i.value, 0) / items.length
+    };
+  }, [items]);
+  
+  return (
+    <>
+      <Stats data={statistics} />
+      <ItemList items={sortedAndFilteredItems} />
+    </>
+  );
+};
+```
+
+## Code Splitting
+
+Split code to reduce initial bundle size.
+
+```tsx
+// Good - Lazy load routes
+import { lazy, Suspense } from 'react';
+
+const Dashboard = lazy(() => import('./pages/Dashboard'));
+const Settings = lazy(() => import('./pages/Settings'));
+const Profile = lazy(() => import('./pages/Profile'));
+
+const App: React.FC = () => (
+  <Suspense fallback={<LoadingSpinner />}>
+    <Routes>
+      <Route path="/dashboard" element={<Dashboard />} />
+      <Route path="/settings" element={<Settings />} />
+      <Route path="/profile" element={<Profile />} />
+    </Routes>
+  </Suspense>
+);
+
+// Good - Lazy load heavy components
+const HeavyChart = lazy(() => import('./components/HeavyChart'));
+
+const Analytics: React.FC = () => (
+  <Suspense fallback={<ChartSkeleton />}>
+    <HeavyChart data={data} />
+  </Suspense>
+);
+```
+
+## Virtualization
+
+Render only visible items in long lists.
+
+```tsx
+// Good - Use react-window for long lists
+import { FixedSizeList } from 'react-window';
+
+const VirtualizedList: React.FC<{ items: Item[] }> = ({ items }) => {
+  const Row = ({ index, style }: { index: number; style: React.CSSProperties }) => (
+    <div style={style}>
+      <ItemCard item={items[index]} />
+    </div>
+  );
+  
+  return (
+    <FixedSizeList
+      height={600}
+      itemCount={items.length}
+      itemSize={80}
+      width="100%"
+    >
+      {Row}
+    </FixedSizeList>
+  );
+};
+```
+
+## Debouncing and Throttling
+
+Limit expensive operations.
+
+```tsx
+// Good - Debounce search input
+import { useDebouncedCallback } from 'use-debounce';
+
+const SearchInput: React.FC = () => {
+  const [query, setQuery] = useState('');
+  
+  const debouncedSearch = useDebouncedCallback(
+    (value: string) => {
+      performSearch(value);
+    },
+    500
+  );
+  
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setQuery(value);
+    debouncedSearch(value);
+  };
+  
+  return <input value={query} onChange={handleChange} />;
+};
+
+// Good - Throttle scroll handler
+import { useThrottledCallback } from 'use-debounce';
+
+const ScrollTracker: React.FC = () => {
+  const throttledScroll = useThrottledCallback(
+    () => {
+      trackScrollPosition(window.scrollY);
+    },
+    200
+  );
+  
+  useEffect(() => {
+    window.addEventListener('scroll', throttledScroll);
+    return () => window.removeEventListener('scroll', throttledScroll);
+  }, [throttledScroll]);
+  
+  return null;
+};
+```
+
+## Avoid Inline Objects and Functions
+
+Prevent unnecessary re-renders.
+
+```tsx
+// Bad - Inline objects cause re-renders
+const Parent: React.FC = () => (
+  <Child style={{ margin: 10 }} /> // New object every render
+);
+
+// Good - Define outside or memoize
+const childStyle = { margin: 10 };
+const Parent: React.FC = () => (
+  <Child style={childStyle} />
+);
+
+// Bad - Inline functions
+const Parent: React.FC = () => (
+  <Child onClick={() => console.log('clicked')} /> // New function every render
+);
+
+// Good - useCallback
+const Parent: React.FC = () => {
+  const handleClick = useCallback(() => {
+    console.log('clicked');
+  }, []);
+  
+  return <Child onClick={handleClick} />;
+};
+```
+
+## Image Optimization
+
+Optimize images for better performance.
+
+```tsx
+// Good - Lazy load images
+const LazyImage: React.FC<{ src: string; alt: string }> = ({ src, alt }) => {
+  return <img src={src} alt={alt} loading="lazy" />;
+};
+
+// Good - Use next/image for Next.js
+import Image from 'next/image';
+
+const OptimizedImage: React.FC = () => (
+  <Image
+    src="/photo.jpg"
+    alt="Photo"
+    width={500}
+    height={300}
+    placeholder="blur"
+  />
+);
+```
+
+## Profiling
+
+Use React DevTools Profiler to identify performance issues.
+
+```tsx
+// Good - Wrap components to profile
+import { Profiler } from 'react';
+
+const onRenderCallback = (
+  id: string,
+  phase: 'mount' | 'update',
+  actualDuration: number
+) => {
+  console.log(`${id} (${phase}) took ${actualDuration}ms`);
+};
+
+const App: React.FC = () => (
+  <Profiler id="App" onRender={onRenderCallback}>
+    <Dashboard />
+  </Profiler>
+);
+```
+
+## Best Practices
+
+1. **Profile first** - Use React DevTools before optimizing
+2. **Use React.memo** - For expensive components
+3. **Memoize callbacks** - Use useCallback for child props
+4. **Memoize computations** - Use useMemo for expensive calculations
+5. **Code split** - Lazy load routes and heavy components
+6. **Virtualize lists** - Use react-window for long lists
+7. **Debounce inputs** - Limit expensive operations
+8. **Avoid inline objects** - Define outside or memoize
+9. **Optimize images** - Use lazy loading and optimization
+10. **Monitor bundle size** - Use webpack-bundle-analyzer
+

package/augment-extensions/coding-standards/react/rules/state-management.md

@@ -0,0 +1,265 @@
+# React State Management
+
+Patterns for managing state in React applications.
+
+## Local State (useState)
+
+Use for component-specific state.
+
+```tsx
+// Good - Local UI state
+const SearchInput: React.FC = () => {
+  const [query, setQuery] = useState('');
+  const [isFocused, setIsFocused] = useState(false);
+  
+  return (
+    <input
+      value={query}
+      onChange={(e) => setQuery(e.target.value)}
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
+    />
+  );
+};
+```
+
+## Lifting State Up
+
+Share state between components by moving it to common parent.
+
+```tsx
+// Good - Shared state in parent
+const UserForm: React.FC = () => {
+  const [formData, setFormData] = useState({ name: '', email: '' });
+  
+  return (
+    <>
+      <NameInput 
+        value={formData.name} 
+        onChange={(name) => setFormData(prev => ({ ...prev, name }))} 
+      />
+      <EmailInput 
+        value={formData.email} 
+        onChange={(email) => setFormData(prev => ({ ...prev, email }))} 
+      />
+      <FormPreview data={formData} />
+    </>
+  );
+};
+```
+
+## Context API
+
+Use for global or deeply nested state.
+
+```tsx
+// Good - Context for theme
+interface ThemeContextValue {
+  theme: 'light' | 'dark';
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+  
+  const toggleTheme = useCallback(() => {
+    setTheme(prev => prev === 'light' ? 'dark' : 'light');
+  }, []);
+  
+  const value = useMemo(() => ({ theme, toggleTheme }), [theme, toggleTheme]);
+  
+  return (
+    <ThemeContext.Provider value={value}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) throw new Error('useTheme must be used within ThemeProvider');
+  return context;
+};
+```
+
+## useReducer
+
+Use for complex state logic.
+
+```tsx
+// Good - Complex state with useReducer
+interface State {
+  data: User[];
+  loading: boolean;
+  error: Error | null;
+  page: number;
+}
+
+type Action =
+  | { type: 'FETCH_START' }
+  | { type: 'FETCH_SUCCESS'; payload: User[] }
+  | { type: 'FETCH_ERROR'; payload: Error }
+  | { type: 'SET_PAGE'; payload: number };
+
+const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'FETCH_START':
+      return { ...state, loading: true, error: null };
+    case 'FETCH_SUCCESS':
+      return { ...state, loading: false, data: action.payload };
+    case 'FETCH_ERROR':
+      return { ...state, loading: false, error: action.payload };
+    case 'SET_PAGE':
+      return { ...state, page: action.payload };
+    default:
+      return state;
+  }
+};
+
+const UserList: React.FC = () => {
+  const [state, dispatch] = useReducer(reducer, {
+    data: [],
+    loading: false,
+    error: null,
+    page: 1
+  });
+  
+  useEffect(() => {
+    const fetchUsers = async () => {
+      dispatch({ type: 'FETCH_START' });
+      try {
+        const users = await api.getUsers(state.page);
+        dispatch({ type: 'FETCH_SUCCESS', payload: users });
+      } catch (error) {
+        dispatch({ type: 'FETCH_ERROR', payload: error as Error });
+      }
+    };
+    
+    fetchUsers();
+  }, [state.page]);
+  
+  return (
+    <>
+      {state.loading && <Spinner />}
+      {state.error && <Error message={state.error.message} />}
+      <UserGrid users={state.data} />
+      <Pagination 
+        page={state.page} 
+        onPageChange={(page) => dispatch({ type: 'SET_PAGE', payload: page })} 
+      />
+    </>
+  );
+};
+```
+
+## Zustand (Recommended)
+
+Simple, fast state management library.
+
+```tsx
+// Good - Zustand store
+import create from 'zustand';
+
+interface UserStore {
+  users: User[];
+  loading: boolean;
+  error: Error | null;
+  fetchUsers: () => Promise<void>;
+  addUser: (user: User) => void;
+  removeUser: (id: string) => void;
+}
+
+export const useUserStore = create<UserStore>((set) => ({
+  users: [],
+  loading: false,
+  error: null,
+  
+  fetchUsers: async () => {
+    set({ loading: true, error: null });
+    try {
+      const users = await api.getUsers();
+      set({ users, loading: false });
+    } catch (error) {
+      set({ error: error as Error, loading: false });
+    }
+  },
+  
+  addUser: (user) => set((state) => ({ 
+    users: [...state.users, user] 
+  })),
+  
+  removeUser: (id) => set((state) => ({ 
+    users: state.users.filter(u => u.id !== id) 
+  }))
+}));
+
+// Usage
+const UserList: React.FC = () => {
+  const { users, loading, fetchUsers } = useUserStore();
+  
+  useEffect(() => {
+    fetchUsers();
+  }, [fetchUsers]);
+  
+  return <UserGrid users={users} loading={loading} />;
+};
+```
+
+## React Query
+
+For server state management.
+
+```tsx
+// Good - React Query for data fetching
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+
+const useUsers = () => {
+  return useQuery({
+    queryKey: ['users'],
+    queryFn: () => api.getUsers()
+  });
+};
+
+const useCreateUser = () => {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: (user: CreateUserInput) => api.createUser(user),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['users'] });
+    }
+  });
+};
+
+// Usage
+const UserList: React.FC = () => {
+  const { data: users, isLoading, error } = useUsers();
+  const createUser = useCreateUser();
+  
+  if (isLoading) return <Spinner />;
+  if (error) return <Error message={error.message} />;
+  
+  return (
+    <>
+      <UserGrid users={users} />
+      <CreateUserForm onSubmit={createUser.mutate} />
+    </>
+  );
+};
+```
+
+## Best Practices
+
+1. **Start with local state** - Use useState for component state
+2. **Lift state up** - When multiple components need it
+3. **Use Context sparingly** - For truly global state (theme, auth)
+4. **Use useReducer** - For complex state logic
+5. **Consider Zustand** - For client state management
+6. **Use React Query** - For server state (data fetching)
+7. **Avoid prop drilling** - Use Context or state management
+8. **Keep state minimal** - Derive values when possible
+9. **Normalize data** - Avoid nested state structures
+10. **Type everything** - Use TypeScript for all state
+