Cursor rule

1---
2alwaysApply: false
3---
4 
5## Never Use && with Potentially Falsy Values
6 
7Never use `{value && <Component />}` when `value` could be an empty string or
8`0`. These are falsy but JSX-renderable—React Native will try to render them as
9text outside a `<Text>` component, causing a hard crash in production.
10 
11**Incorrect (crashes if count is 0 or name is ""):**
12 
13```tsx
14function Profile({ name, count }: { name: string; count: number }) {
15  return (
16    <View>
17      {name && <Text>{name}</Text>}
18      {count && <Text>{count} items</Text>}
19    </View>
20  )
21}
22// If name="" or count=0, renders the falsy value → crash
23```
24 
25**Correct (ternary with null):**
26 
27```tsx
28function Profile({ name, count }: { name: string; count: number }) {
29  return (
30    <View>
31      {name ? <Text>{name}</Text> : null}
32      {count ? <Text>{count} items</Text> : null}
33    </View>
34  )
35}
36```
37 
38**Correct (explicit boolean coercion):**
39 
40```tsx
41function Profile({ name, count }: { name: string; count: number }) {
42  return (
43    <View>
44      {!!name && <Text>{name}</Text>}
45      {!!count && <Text>{count} items</Text>}
46    </View>
47  )
48}
49```
50 
51**Best (early return):**
52 
53```tsx
54function Profile({ name, count }: { name: string; count: number }) {
55  if (!name) return null
56 
57  return (
58    <View>
59      <Text>{name}</Text>
60      {count > 0 ? <Text>{count} items</Text> : null}
61    </View>
62  )
63}
64```
65 
66Early returns are clearest. When using conditionals inline, prefer ternary or
67explicit boolean checks.
68 
69**Lint rule:** Enable `react/jsx-no-leaked-render` from
70[eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-leaked-render.md)
71to catch this automatically.
72