Avoid premature memoization

Don't automatically reach for useMemo and useCallback for every computation or function. These hooks add complexity and should only be used when there's a measurable performance benefit. Consider the actual cost of the operation and frequency of re-renders before memoizing.

copy reviewer prompt

Prompt

Reviewer Prompt
Deploy Agent

Don’t automatically reach for useMemo and useCallback for every computation or function. These hooks add complexity and should only be used when there’s a measurable performance benefit. Consider the actual cost of the operation and frequency of re-renders before memoizing.

Use memoization when:

  • The computation is expensive (complex calculations, object creation)
  • The component re-renders frequently
  • Dependencies change infrequently

Avoid memoization for:

  • Simple calculations or lightweight operations
  • Operations that run once or rarely
  • When the “optimization” is more complex than the original code

Example of appropriate memoization:

// Good: Component re-renders frequently, URL construction has dependencies
const clineUris = useMemo(() => {
  const base = new URL(clineUser?.appBaseUrl || CLINE_APP_URL)
  const dashboard = new URL("dashboard", base)
  const credits = new URL(activeOrganization ? "/organization" : "/account", dashboard)
  credits.searchParams.set("tab", "credits")
  return { dashboard, credits }
}, [clineUser?.appBaseUrl, activeOrganization])

Remember: “Premature optimization is the root of all evil.” Profile first, optimize second.

Source discussions