2 ms·
Rendering a React component satisfies the f(f(x)) definition, too! We just need to consider the component's props/state to be constant, which is the scenario th
by matchu 11y ago
Rendering a React component satisfies the f(f(x)) definition, too! We just need to consider the component's props/state to be constant, which is the scenario that the article describes.
In general, the act of rendering a React component is a function from (component props, component state, DOM state) to DOM state. But, when the component's props/state are considered constant, the rendering process is simply a function from DOM state to DOM state.
This is an idempotent function over DOM state if and only if the React component's render method always returns the same virtual DOM tree — that is, iff the React component's render method is pure. In that scenario, the internal React renderer will perform the diff, discover that the physical DOM state matches the returned virtual DOM tree, and leave the physical DOM state unchanged.
Turns out, saying that the render process is idempotent is exactly equivalent to saying that the component's render method is pure! Cool!