fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
1.8 KiB
1.8 KiB
title, impact, impactDescription, tags
| title | impact | impactDescription | tags |
|---|---|---|---|
| Never Use && with Potentially Falsy Values | CRITICAL | prevents production crash | rendering, conditional, jsx, crash |
Never Use && with Potentially Falsy Values
Never use {value && <Component />} when value could be an empty string or
0. These are falsy but JSX-renderable—React Native will try to render them as
text outside a <Text> component, causing a hard crash in production.
Incorrect (crashes if count is 0 or name is ""):
function Profile({ name, count }: { name: string; count: number }) {
return (
<View>
{name && <Text>{name}</Text>}
{count && <Text>{count} items</Text>}
</View>
);
}
// If name="" or count=0, renders the falsy value → crash
Correct (ternary with null):
function Profile({ name, count }: { name: string; count: number }) {
return (
<View>
{name ? <Text>{name}</Text> : null}
{count ? <Text>{count} items</Text> : null}
</View>
);
}
Correct (explicit boolean coercion):
function Profile({ name, count }: { name: string; count: number }) {
return (
<View>
{!!name && <Text>{name}</Text>}
{!!count && <Text>{count} items</Text>}
</View>
);
}
Best (early return):
function Profile({ name, count }: { name: string; count: number }) {
if (!name) return null;
return (
<View>
<Text>{name}</Text>
{count > 0 ? <Text>{count} items</Text> : null}
</View>
);
}
Early returns are clearest. When using conditionals inline, prefer ternary or explicit boolean checks.
Lint rule: Enable react/jsx-no-leaked-render from
eslint-plugin-react
to catch this automatically.