Drills Repository
34 Drills · All Belts · rendering
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 treats props, state, and context as the three inputs to a render, and rendering should never mutate any of them, no matter how deeply nested the value is. A component should only read these values to derive the JSX it returns, never write to them directly.
Using array.map() Inside React Rendering
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.
Mutation Rules During Component Render
React only requires that rendering stay pure and idempotent, not that render bodies avoid all mutation. An array created fresh during that render and never exposed elsewhere can be freely mutated before it's returned, since nothing outside that render can observe the change.
Synchronizing Page Title With Product State
Any code that reaches outside React's render output to affect the browser environment is a side effect and belongs in useEffect, not directly in the render body. Since setting document.title mutates something outside React's own output, it must run inside a useEffect keyed to the product value, not during render or via useMemo.
Manual Component Invocation Versus JSX 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.
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.
Using && With a Zero Value in JSX
JavaScript's && operator returns its left operand whenever that operand is falsy, so it evaluates to 0 rather than to false when the left side is the number zero. Here, messageCount evaluates to 0, so the && expression resolves to 0 instead of the New Messages paragraph, and React renders that 0 as visible text.
Math.random() Called During 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.
Calling push() on a Props Array
Props must be treated as read-only inputs to a component. Here, calling stories.push(...) during render mutates data that already existed before this render began, so the change can leak into earlier renders that already used the same array reference.