Cursor rule

1---
2alwaysApply: false
3---
4 
5## Cache Repeated Function Calls
6 
7Use a module-level Map to cache function results when the same function is called repeatedly with the same inputs during render.
8 
9**Incorrect (redundant computation):**
10 
11```typescript
12function ProjectList({ projects }: { projects: Project[] }) {
13  return (
14    <div>
15      {projects.map(project => {
16        // slugify() called 100+ times for same project names
17        const slug = slugify(project.name)
18        
19        return <ProjectCard key={project.id} slug={slug} />
20      })}
21    </div>
22  )
23}
24```
25 
26**Correct (cached results):**
27 
28```typescript
29// Module-level cache
30const slugifyCache = new Map<string, string>()
31 
32function cachedSlugify(text: string): string {
33  if (slugifyCache.has(text)) {
34    return slugifyCache.get(text)!
35  }
36  const result = slugify(text)
37  slugifyCache.set(text, result)
38  return result
39}
40 
41function ProjectList({ projects }: { projects: Project[] }) {
42  return (
43    <div>
44      {projects.map(project => {
45        // Computed only once per unique project name
46        const slug = cachedSlugify(project.name)
47        
48        return <ProjectCard key={project.id} slug={slug} />
49      })}
50    </div>
51  )
52}
53```
54 
55**Simpler pattern for single-value functions:**
56 
57```typescript
58let isLoggedInCache: boolean | null = null
59 
60function isLoggedIn(): boolean {
61  if (isLoggedInCache !== null) {
62    return isLoggedInCache
63  }
64  
65  isLoggedInCache = document.cookie.includes('auth=')
66  return isLoggedInCache
67}
68 
69// Clear cache when auth changes
70function onAuthChange() {
71  isLoggedInCache = null
72}
73```
74 
75Use a Map (not a hook) so it works everywhere: utilities, event handlers, not just React components.
76 
77Reference: [How we made the Vercel Dashboard twice as fast](https://vercel.com/blog/how-we-made-the-vercel-dashboard-twice-as-fast)
78