React Best Practices

React Best Practices

Component Patterns

Functional Components Only

// ✅ Correct
interface UserCardProps {
  user: User
  onSelect: (id: string) => void
}

export const UserCard = ({ user, onSelect }: UserCardProps) => {
  return (
     onSelect(user.id)} className="...">
      {user.name}
    
  )
}

// ❌ Never use class components
class UserCard extends React.Component {}

Composition Over Props Drilling

// ✅ Use composition
export const Layout = ({ children }: { children: React.ReactNode }) => (
  {children}
)

// ✅ Use context for deep data
const ThemeContext = createContext(null)
export const useTheme = () => {
  const theme = useContext(ThemeContext)
  if (!theme) throw new Error('useTheme must be used within ThemeProvider')
  return theme
}

Hooks

Custom Hooks

// ✅ Extract reusable logic into hooks
const useLocalStorage = (key: string, initial: T) => {
  const [value, setValue] = useState(() => {
    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

// ✅ Correct — explicit dependencies
useEffect(() => {
  fetchUser(userId)
}, [userId])

// ✅ Cleanup when needed
useEffect(() => {
  const sub = subscribe(channel)
  return () => sub.unsubscribe()
}, [channel])

// ❌ Never ignore the dependency array
useEffect(() => {
  fetchUser(userId)
}) // runs on every render

Performance

Memoization

// ✅ Memoize expensive computations
const sorted = useMemo(
  () => items.sort((a, b) => a.name.localeCompare(b.name)),
  [items]
)

// ✅ Stable callback references
const handleClick = useCallback((id: string) => {
  onSelect(id)
}, [onSelect])

// ✅ Prevent unnecessary re-renders
export const HeavyList = memo(({ items }: { items: Item[] }) => (
  {items.map(item => {item.name})}
))

Code Splitting

// ✅ Lazy load heavy components
const Dashboard = lazy(() => import('./Dashboard'))

export const App = () => (
  }>
    
  
)

Error Handling

// ✅ Error boundaries for UI errors
export class ErrorBoundary extends React.Component {
  state = { hasError: false }
  static getDerivedStateFromError() { return { hasError: true } }
  render() {
    return this.state.hasError ? this.props.fallback : this.props.children
  }
}

Forbidden Patterns

• Class components (use functional)
• any types on props
• Mutating state directly
• Missing key props in lists
• Ignoring cleanup in useEffect
• useEffect for derived state (use useMemo)

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: sabahattink
• Source: sabahattink/antigravity-fullstack-hq
• License: MIT
• Homepage: https://github.com/sabahattink/antigravity-fullstack-hq

Install and usage instructions live in the source repository linked above.