Inside a React function component you write `const defaultTags = [];` and pass it to a child wrapped in React.memo. Why is that a different array on every render, and what is the simplest way to make it the same array every time?

## The body is a function, not a declaration block Beginners often read a component body as setup code that runs once. It does not. React calls the component function for every render, so every line in the body executes again — including variable declarations. `const` controls **rebinding**, not allocation: it prevents you reassigning the name inside one call, and says nothing across calls. ```jsx function Card({ tags }) { const defaultTags = []; // new array, every render return <Tags tags={tags ?? defaultTags} />; } ``` Each call allocates a new empty array. The arrays are equal in content and different in identity. ## Why identity matters downstream A child wrapped in `React.memo` compares the previous props with the next ones using `Object.is` per prop key, which for arrays and objects is reference identity. Passing a new empty array every render means the comparison fails every render, the memo never bails out, and the optimization is dead weight — the comparison cost with none of the benefit. The same identity check governs hook dependency arrays, so an unstable value in a dependency list makes the effect or memo re-run every render too. ## The simplest fix: module scope Hoist the constant above the component: ```jsx const DEFAULT_TAGS = []; function Card({ tags }) { return <Tags tags={tags ?? DEFAULT_TAGS} />; } ``` The array is now allocated once when the module is first evaluated, and every render of every instance of `Card` passes that same reference. `Object.is` succeeds, the memo bails out, and no hook was needed. Use `SCREAMING_CASE` or another convention to signal that it is shared and must never be mutated — because it *is* shared, mutating it would leak into every consumer. ## When a hook is the right tool instead Module scope only works for values that do not depend on anything render-specific. As soon as the value is derived from props or state, it must be recomputed when those change, and that is what `useMemo` is for: ```jsx const visibleTags = useMemo(() => tags.filter(Boolean), [tags]); ``` `useMemo(() => [], [])` for a literal constant is legal but wasteful: it allocates a hook slot and a dependency array to reproduce what a module constant gives for free. Prefer the constant when the value is truly invariant. `useRef` is a third option — `useRef([]).current` gives one array per component instance rather than one per module — which matters when the value must be per-instance and mutable (a scratch buffer, a set of ids for one component). For a shared read-only default, the module constant is simpler. ## Primitives are not affected `Object.is('', '')` and `Object.is(0, 0)` are `true`, because primitives compare by value rather than by allocation. Writing `const emptyLabel = '';` in the body every render costs nothing in identity terms. This is why flattening an object prop into primitive props sometimes removes an identity problem entirely — `padding={8}` never destabilizes a memo, while `style={{ padding: 8 }}` always does. ## The habit to build When you pass an object, array or function to a memoized child or into a dependency array, ask one question: *where was this value created, and does that place run again on every render?* If the answer is the component body and the value never varies, it belongs above the component.