Cursor rule

1---
2alwaysApply: false
3---
4 
5## List performance callbacks
6 
7**Impact: HIGH (Fewer re-renders and faster lists)**
8 
9When passing callback functions to list items, create a single instance of the
10callback at the root of the list. Items should then call it with a unique
11identifier.
12 
13**Incorrect (creates a new callback on each render):**
14 
15```typescript
16return (
17  <LegendList
18    renderItem={({ item }) => {
19      // bad: creates a new callback on each render
20      const onPress = () => handlePress(item.id)
21      return <Item key={item.id} item={item} onPress={onPress} />
22    }}
23  />
24)
25```
26 
27**Correct (a single function instance passed to each item):**
28 
29```typescript
30const onPress = useCallback(() => handlePress(item.id), [handlePress, item.id])
31 
32return (
33  <LegendList
34    renderItem={({ item }) => (
35      <Item key={item.id} item={item} onPress={onPress} />
36    )}
37  />
38)
39```
40 
41Reference: [Link to documentation or resource](https://example.com)
42