livedash-node/.opencode/skills/vercel-react-best-practices/rules/js-cache-function-results.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Cache Repeated Function Calls	MEDIUM	avoid redundant computation	javascript, cache, memoization, performance

Cache Repeated Function Calls

Use a module-level Map to cache function results when the same function is called repeatedly with the same inputs during render.

Incorrect (redundant computation):

function ProjectList({ projects }: { projects: Project[] }) {
  return (
    <div>
      {projects.map((project) => {
        // slugify() called 100+ times for same project names
        const slug = slugify(project.name);

        return <ProjectCard key={project.id} slug={slug} />;
      })}
    </div>
  );
}

Correct (cached results):

// Module-level cache
const slugifyCache = new Map<string, string>();

function cachedSlugify(text: string): string {
  if (slugifyCache.has(text)) {
    return slugifyCache.get(text)!;
  }
  const result = slugify(text);
  slugifyCache.set(text, result);
  return result;
}

function ProjectList({ projects }: { projects: Project[] }) {
  return (
    <div>
      {projects.map((project) => {
        // Computed only once per unique project name
        const slug = cachedSlugify(project.name);

        return <ProjectCard key={project.id} slug={slug} />;
      })}
    </div>
  );
}

Simpler pattern for single-value functions:

let isLoggedInCache: boolean | null = null;

function isLoggedIn(): boolean {
  if (isLoggedInCache !== null) {
    return isLoggedInCache;
  }

  isLoggedInCache = document.cookie.includes("auth=");
  return isLoggedInCache;
}

// Clear cache when auth changes
function onAuthChange() {
  isLoggedInCache = null;
}

Use a Map (not a hook) so it works everywhere: utilities, event handlers, not just React components.

Reference: How we made the Vercel Dashboard twice as fast