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