react-best-practices

# React Best Practices ## Component Patterns ### Functional Components Only ```typescript // ✅ Correct interface UserCardProps { user: User onSelect: (id: string) => void } export const UserCard = ({ user, onSelect }: UserCardProps) => { return ( <button onClick={() => onSelect(user.id)} className="..."> {user.name} </button> ) } // ❌ Never use class components class UserCard extends React.Component {} ``` ### Composition Over Props Drilling ```typescript // ✅ Use composition export const Layout = ({ children }: { children: React.ReactNode }) => ( <div className="layout">{children}</div> ) // ✅ Use context for deep data const ThemeContext = createContext<Theme | null>(null) export const useTheme = () => { const theme = useContext(ThemeContext) if (!theme) throw new Error('useTheme must be used within ThemeProvider') return theme } ``` ## Hooks ### Custom Hooks ```typescript // ✅ Extract reusable logic into hooks const useLocalStorage = <T>(key: string, initial: T) => { const [value, setValue] = useState<T>(() => { try { const item = localStorage.getItem(key) return item ? JSON.parse(item) : initial } catch { return initial } }) const set = (val: T) => { setValue(val) localStorage.setItem(key, JSON.stringify(val)) } return [value, set] as const } ``` ### useEffect Rules ```typescript // ✅ Correct — explicit dependencies useEffect(() => { fetchUser(userId) }, [userId]) // ✅ Cleanup w...