memory-journal-mcp 7.0.1 → 7.2.0

package/skills/typescript/references/react-integration.md

@@ -0,0 +1,616 @@
+# React Integration Reference
+
+> **Load when:** User asks about React with TypeScript, typed components, hooks, state management, or React patterns.
+
+Type-safe React development patterns for React 19+.
+
+## Contents
+
+- [Component Patterns](#component-patterns)
+- [Hooks with TypeScript](#hooks-with-typescript)
+- [State Management](#state-management)
+- [Event Handling](#event-handling)
+- [Context API](#context-api)
+
+---
+
+## Component Patterns
+
+### Functional Components
+
+```typescript
+// Basic typed component
+interface GreetingProps {
+  name: string;
+  age?: number;
+}
+
+function Greeting({ name, age }: GreetingProps) {
+  return (
+    <div>
+      Hello, {name}!
+      {age && <span> You are {age} years old.</span>}
+    </div>
+  );
+}
+
+// With React.FC (optional, some prefer explicit return type)
+const GreetingFC: React.FC<GreetingProps> = ({ name, age }) => {
+  return <div>Hello, {name}!</div>;
+};
+
+// Component with children
+interface CardProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+function Card({ title, children }: CardProps) {
+  return (
+    <div className="card">
+      <h2>{title}</h2>
+      <div className="card-body">{children}</div>
+    </div>
+  );
+}
+```
+
+### Generic Components
+
+```typescript
+// Generic list component
+interface ListProps<T> {
+  items: T[];
+  renderItem: (item: T, index: number) => React.ReactNode;
+  keyExtractor: (item: T) => string;
+}
+
+function List<T>({ items, renderItem, keyExtractor }: ListProps<T>) {
+  return (
+    <ul>
+      {items.map((item, index) => (
+        <li key={keyExtractor(item)}>{renderItem(item, index)}</li>
+      ))}
+    </ul>
+  );
+}
+
+// Usage
+interface User {
+  id: string;
+  name: string;
+}
+
+<List<User>
+  items={users}
+  keyExtractor={(user) => user.id}
+  renderItem={(user) => <span>{user.name}</span>}
+/>;
+
+// Generic select component
+interface SelectProps<T> {
+  options: T[];
+  value: T | null;
+  onChange: (value: T) => void;
+  getLabel: (option: T) => string;
+  getValue: (option: T) => string;
+}
+
+function Select<T>({
+  options,
+  value,
+  onChange,
+  getLabel,
+  getValue
+}: SelectProps<T>) {
+  return (
+    <select
+      value={value ? getValue(value) : ""}
+      onChange={(e) => {
+        const selected = options.find((opt) => getValue(opt) === e.target.value);
+        if (selected) onChange(selected);
+      }}
+    >
+      <option value="">Select...</option>
+      {options.map((opt) => (
+        <option key={getValue(opt)} value={getValue(opt)}>
+          {getLabel(opt)}
+        </option>
+      ))}
+    </select>
+  );
+}
+```
+
+### Polymorphic Components
+
+```typescript
+// Component that can render as different elements
+type ButtonProps<T extends React.ElementType> = {
+  as?: T;
+  children: React.ReactNode;
+  variant?: "primary" | "secondary";
+} & Omit<React.ComponentPropsWithoutRef<T>, "as" | "children">;
+
+function Button<T extends React.ElementType = "button">({
+  as,
+  children,
+  variant = "primary",
+  ...props
+}: ButtonProps<T>) {
+  const Component = as || "button";
+  return (
+    <Component className={`btn btn-${variant}`} {...props}>
+      {children}
+    </Component>
+  );
+}
+
+// Usage
+<Button>Click me</Button>
+<Button as="a" href="/about">Link Button</Button>
+<Button as={Link} to="/home">Router Link</Button>
+```
+
+---
+
+## Hooks with TypeScript
+
+### useState
+
+```typescript
+// Basic usage (type inferred)
+const [count, setCount] = useState(0)
+
+// Explicit type (for complex types or initial null)
+const [user, setUser] = useState<User | null>(null)
+
+// With union types
+type Status = 'idle' | 'loading' | 'success' | 'error'
+const [status, setStatus] = useState<Status>('idle')
+
+// Lazy initialization
+const [state, setState] = useState<ExpensiveState>(() => {
+  return computeExpensiveInitialState()
+})
+```
+
+### useRef
+
+```typescript
+// DOM element ref
+const inputRef = useRef<HTMLInputElement>(null)
+
+function focusInput() {
+  inputRef.current?.focus()
+}
+
+// Mutable ref (no initial render)
+const intervalRef = useRef<NodeJS.Timeout | null>(null)
+
+useEffect(() => {
+  intervalRef.current = setInterval(() => {}, 1000)
+  return () => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current)
+    }
+  }
+}, [])
+
+// Ref to store previous value
+function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T | undefined>(undefined)
+
+  useEffect(() => {
+    ref.current = value
+  }, [value])
+
+  return ref.current
+}
+```
+
+### useReducer
+
+```typescript
+// Define state and actions
+interface CounterState {
+  count: number
+  step: number
+}
+
+type CounterAction =
+  | { type: 'increment' }
+  | { type: 'decrement' }
+  | { type: 'setStep'; payload: number }
+  | { type: 'reset' }
+
+function counterReducer(state: CounterState, action: CounterAction): CounterState {
+  switch (action.type) {
+    case 'increment':
+      return { ...state, count: state.count + state.step }
+    case 'decrement':
+      return { ...state, count: state.count - state.step }
+    case 'setStep':
+      return { ...state, step: action.payload }
+    case 'reset':
+      return { count: 0, step: 1 }
+  }
+}
+
+// Usage
+const [state, dispatch] = useReducer(counterReducer, { count: 0, step: 1 })
+
+dispatch({ type: 'increment' })
+dispatch({ type: 'setStep', payload: 5 })
+```
+
+### Custom Hooks
+
+```typescript
+// Async data fetching hook
+interface UseAsyncResult<T> {
+  data: T | null
+  loading: boolean
+  error: Error | null
+  refetch: () => void
+}
+
+function useAsync<T>(
+  asyncFn: () => Promise<T>,
+  deps: React.DependencyList = []
+): UseAsyncResult<T> {
+  const [data, setData] = useState<T | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<Error | null>(null)
+
+  const execute = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const result = await asyncFn()
+      setData(result)
+    } catch (e) {
+      setError(e instanceof Error ? e : new Error(String(e)))
+    } finally {
+      setLoading(false)
+    }
+  }, deps)
+
+  useEffect(() => {
+    execute()
+  }, [execute])
+
+  return { data, loading, error, refetch: execute }
+}
+
+// Usage
+const {
+  data: users,
+  loading,
+  error,
+} = useAsync(() => fetch('/api/users').then((r) => r.json()), [])
+
+// Local storage hook
+function useLocalStorage<T>(
+  key: string,
+  initialValue: T
+): [T, (value: T | ((prev: T) => T)) => void] {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const item = localStorage.getItem(key)
+      return item ? JSON.parse(item) : initialValue
+    } catch {
+      return initialValue
+    }
+  })
+
+  const setValue = (value: T | ((prev: T) => T)) => {
+    const valueToStore = value instanceof Function ? value(storedValue) : value
+    setStoredValue(valueToStore)
+    localStorage.setItem(key, JSON.stringify(valueToStore))
+  }
+
+  return [storedValue, setValue]
+}
+```
+
+---
+
+## State Management
+
+### Zustand with TypeScript
+
+```typescript
+import { create } from 'zustand'
+import { devtools, persist } from 'zustand/middleware'
+
+// Define state interface
+interface AuthState {
+  user: User | null
+  token: string | null
+  isAuthenticated: boolean
+  login: (email: string, password: string) => Promise<void>
+  logout: () => void
+  setUser: (user: User) => void
+}
+
+// Create typed store
+const useAuthStore = create<AuthState>()(
+  devtools(
+    persist(
+      (set) => ({
+        user: null,
+        token: null,
+        isAuthenticated: false,
+
+        login: async (email, password) => {
+          const response = await api.login(email, password)
+          set({
+            user: response.user,
+            token: response.token,
+            isAuthenticated: true,
+          })
+        },
+
+        logout: () => {
+          set({ user: null, token: null, isAuthenticated: false })
+        },
+
+        setUser: (user) => set({ user }),
+      }),
+      { name: 'auth-storage' }
+    )
+  )
+)
+
+// Usage with selectors
+const user = useAuthStore((state) => state.user)
+const login = useAuthStore((state) => state.login)
+
+// Shallow comparison for multiple values
+import { useShallow } from 'zustand/react/shallow'
+
+const { user, isAuthenticated } = useAuthStore(
+  useShallow((state) => ({
+    user: state.user,
+    isAuthenticated: state.isAuthenticated,
+  }))
+)
+```
+
+### Redux Toolkit with TypeScript
+
+```typescript
+import { createSlice, PayloadAction, configureStore } from '@reduxjs/toolkit'
+
+// Define slice state
+interface TodosState {
+  items: Todo[]
+  filter: 'all' | 'active' | 'completed'
+  loading: boolean
+}
+
+const initialState: TodosState = {
+  items: [],
+  filter: 'all',
+  loading: false,
+}
+
+// Create typed slice
+const todosSlice = createSlice({
+  name: 'todos',
+  initialState,
+  reducers: {
+    addTodo: (state, action: PayloadAction<string>) => {
+      state.items.push({
+        id: crypto.randomUUID(),
+        text: action.payload,
+        completed: false,
+      })
+    },
+    toggleTodo: (state, action: PayloadAction<string>) => {
+      const todo = state.items.find((t) => t.id === action.payload)
+      if (todo) {
+        todo.completed = !todo.completed
+      }
+    },
+    setFilter: (state, action: PayloadAction<TodosState['filter']>) => {
+      state.filter = action.payload
+    },
+  },
+})
+
+// Configure store with type inference
+const store = configureStore({
+  reducer: {
+    todos: todosSlice.reducer,
+  },
+})
+
+// Infer types from store
+type RootState = ReturnType<typeof store.getState>
+type AppDispatch = typeof store.dispatch
+
+// Typed hooks
+import { useDispatch, useSelector, TypedUseSelectorHook } from 'react-redux'
+
+const useAppDispatch = () => useDispatch<AppDispatch>()
+const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
+
+// Usage
+const todos = useAppSelector((state) => state.todos.items)
+const dispatch = useAppDispatch()
+dispatch(todosSlice.actions.addTodo('New todo'))
+```
+
+---
+
+## Event Handling
+
+### Common Event Types
+
+```typescript
+// Click events
+function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
+  console.log(event.currentTarget.name)
+}
+
+// Form events
+function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+  event.preventDefault()
+  const formData = new FormData(event.currentTarget)
+}
+
+// Input change
+function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+  const { name, value, checked, type } = event.target
+  const inputValue = type === 'checkbox' ? checked : value
+}
+
+// Keyboard events
+function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    // submit form
+  }
+}
+
+// Focus events
+function handleFocus(event: React.FocusEvent<HTMLInputElement>) {
+  event.target.select()
+}
+
+// Drag events
+function handleDrag(event: React.DragEvent<HTMLDivElement>) {
+  event.dataTransfer.setData('text/plain', 'dragged data')
+}
+```
+
+### Form with TypeScript
+
+```typescript
+interface FormData {
+  name: string;
+  email: string;
+  role: "user" | "admin";
+}
+
+function RegistrationForm() {
+  const [formData, setFormData] = useState<FormData>({
+    name: "",
+    email: "",
+    role: "user"
+  });
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log(formData);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        name="name"
+        value={formData.name}
+        onChange={handleChange}
+      />
+      <input
+        name="email"
+        type="email"
+        value={formData.email}
+        onChange={handleChange}
+      />
+      <select name="role" value={formData.role} onChange={handleChange}>
+        <option value="user">User</option>
+        <option value="admin">Admin</option>
+      </select>
+      <button type="submit">Register</button>
+    </form>
+  );
+}
+```
+
+---
+
+## Context API
+
+### Typed Context
+
+```typescript
+// Define context type
+interface ThemeContextType {
+  theme: "light" | "dark";
+  toggleTheme: () => void;
+}
+
+// Create context with undefined default
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+// Provider component
+function ThemeProvider({ children }: { children: React.ReactNode }) {
+  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>
+  );
+}
+
+// Custom hook with type safety
+function useTheme(): ThemeContextType {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error("useTheme must be used within ThemeProvider");
+  }
+  return context;
+}
+
+// Usage
+function ThemeToggle() {
+  const { theme, toggleTheme } = useTheme();
+  return <button onClick={toggleTheme}>Current: {theme}</button>;
+}
+```
+
+### Generic Context Factory
+
+```typescript
+// Factory function for creating typed contexts
+function createContext<T>(displayName: string) {
+  const Context = React.createContext<T | undefined>(undefined)
+  Context.displayName = displayName
+
+  function useContextHook(): T {
+    const context = React.useContext(Context)
+    if (context === undefined) {
+      throw new Error(`use${displayName} must be used within ${displayName}Provider`)
+    }
+    return context
+  }
+
+  return [Context.Provider, useContextHook] as const
+}
+
+// Usage
+interface AuthContextType {
+  user: User | null
+  login: (credentials: Credentials) => Promise<void>
+  logout: () => void
+}
+
+const [AuthProvider, useAuth] = createContext<AuthContextType>('Auth')
+```