Drills Repository
34 Drills · All Belts · rendering
filter before map
filter() creates a new array containing only items matching a condition, which map() can then transform into JSX elements for rendering. Chaining the two produces a filtered, rendered list in a single declarative expression.
React rendering false with &&
JavaScript's && operator returns its left operand when that operand is falsy, so an expression like count && <Badge /> evaluates to 0 rather than false when count is zero. React renders numbers like 0 as visible text, since it only treats false, null, and undefined as empty.
Non-idempotent values in render
React components must be idempotent during render, meaning the same props and state should always produce the same output. Math.random() violates this because it generates a new value on every render even when the inputs remain unchanged.
Multiple renders on the same root
Calling root.render repeatedly on the same root does not necessarily rebuild the entire tree from scratch. React reconciles the new tree against the previous one, preserving matching DOM nodes and component state wherever possible.
Reusing an unmounted root
Calling root.unmount() permanently detaches that root, so it can never be reused for rendering again. A completely new root must be created with createRoot before rendering into that DOM node another time.
Components must be pure
React assumes components behave like pure functions: given the same props, state, and context inputs, they should always produce the same JSX output and avoid modifying external values during rendering. This means a pure component must not mutate preexisting variables, objects, or DOM state as a side effect of rendering.
Same inputs same output
React rendering should never mutate props, state, or context values. These are all considered rendering inputs, and components should only derive JSX from them rather than modifying them directly.
map transforms data into JSX
React commonly uses JavaScript's map() method to transform arrays of data into arrays of JSX elements that can be rendered in the UI. Since JSX cannot use for-loops directly inside markup, map() is the standard mechanism for converting a data array into a corresponding array of elements.
Local mutation during render
Local mutation is safe when the mutated value is created fresh during that render and discarded afterward. React only requires that render stays idempotent and free from externally observable side effects.
Side effects in render vs effects
Updating document.title is a side effect because it changes something outside React's render calculation. Side effects should run after render using useEffect, allowing React to keep rendering pure and repeatable.
React-controlled rendering
React's rendering system can prioritize updates, skip unnecessary work, and preserve component identity because it owns the render process. Direct manual invocation bypasses these optimizations and weakens React's understanding of the component tree.
Missing return in map callback
Arrow functions using curly braces create a block body, which requires an explicit return statement to produce a value. Without return, the callback returns undefined for every item in the list.