coding-standardslisted

# Coding Standards - Portfolio Buddy 2 ## React 19 Patterns ### Component Structure ```typescript // Good: Functional component with TypeScript interface MetricsTableProps { data: Metric[] onSelect: (id: string) => void } export function MetricsTable({ data, onSelect }: MetricsTableProps) { // Hooks at top const [selected, setSelected] = useState<Set<string>>(new Set()) // Derived state with useMemo const sortedData = useMemo(() => data.sort((a, b) => b.sharpe - a.sharpe), [data] ) // Event handlers with useCallback const handleSelect = useCallback((id: string) => { setSelected(prev => new Set(prev).add(id)) onSelect(id) }, [onSelect]) // Render return <div>...</div> } ``` ### Hooks Rules 1. **Only at top level** - No hooks in conditionals or loops 2. **Custom hooks start with `use`** - useMetrics, usePortfolio, useSorting 3. **Dependencies array complete** - All deps in useEffect/useMemo/useCallback 4. **Cleanup on unmount** - Return cleanup function from useEffect ### State Management **Portfolio Buddy 2 uses PLAIN REACT HOOKS ONLY:** - **Local UI state** → `useState` - **Derived state** → `useMemo` - **Stable callbacks** → `useCallback` - **DOM/value refs** → `useRef` **NO global state libraries:** - ❌ No TanStack Query - ❌ No Zustand - ❌ No Redux - ❌ No Jotai **Pattern**: Props down, custom hooks for shared logic ```typescript // State management example const [files, setFiles] = useState<File[]>([]) const [dateRange, se