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.3 KiB
1.3 KiB
title, impact, impactDescription, tags
| title | impact | impactDescription | tags |
|---|---|---|---|
| Destructure Functions Early in Render (React Compiler) | HIGH | stable references, fewer re-renders | rerender, hooks, performance, react-compiler |
Destructure Functions Early in Render
This rule is only applicable if you are using the React Compiler.
Destructure functions from hooks at the top of render scope. Never dot into objects to call functions. Destructured functions are stable references; dotting creates new references and breaks memoization.
Incorrect (dotting into object):
import { useRouter } from 'expo-router';
function SaveButton(props) {
const router = useRouter();
// bad: react-compiler will key the cache on "props" and "router", which are objects that change each render
const handlePress = () => {
props.onSave();
router.push('/success'); // unstable reference
};
return <Button onPress={handlePress}>Save</Button>;
}
Correct (destructure early):
import { useRouter } from 'expo-router';
function SaveButton({ onSave }) {
const { push } = useRouter();
// good: react-compiler will key on push and onSave
const handlePress = () => {
onSave();
push('/success'); // stable reference
};
return <Button onPress={handlePress}>Save</Button>;
}