I think the word he's looking for is "pure".
EDIT: I was wrong - apparently "idempotent" can also describe a consistent relationship between the input and some state. In that sense, it's actually a very good description of how the input to a React view affects the DOM.
"In computer science, the term idempotent is used more comprehensively to describe an operation that will produce the same results if executed once or multiple times."
Which is more that f(x) == f(x) == f(x) for the state affected by f.
new_state = f(old_state, x)
f(f(state, x), x) == f(state, x)
draw(draw(fbuf, wnd, x, y), wnd, x, y) == draw(fbuf, wnd, x, y)
If we start in state x, then apply operation f, the resulting state is f(x). If we apply operation f again, we'll be in state f(f(x)). If f is idempotent, then state f(x) and state f(f(x)) are identical.
React views are idempotent. They are not necessarily pure (though they can be).
Mathematical functions can't have side effects so they have the "normal" definition of f(f(x))=f(x).
In computer science, with side effects, since state can change, the passage of time could be though of as similar to composition f(x) ... f(x) ~= (f o f)(x) = f(f(x)). This is the line of thinking that gets to monads where successive calls would in fact be f(f(x)) (or f(x).f())
Am I understanding idempotence/side effects/monads right?
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!
From Wikipedia, which agrees with you...
> A unary operation (or function) is idempotent if, whenever it is applied twice to any value, it gives the same result as if it were applied once; i.e., ƒ(ƒ(x)) ≡ ƒ(x). For example, the absolute value function, where abs(abs(x)) ≡ abs(x).
So is f(x) = x + 1 idempotent?
Under this part: "whenever it is applied twice to any value, it gives the same result as if it were applied once" it would appear so.
f(2) = 3
f(2) still = 3.
But under this part: "ƒ(ƒ(x)) ≡ ƒ(x)"
f(f(x)) == f(f(2)) == f(3) = 4
Where'd I go wrong?
Instead, they're referring to the following sequence of actions:
1. Update the value x according to the operation f.
2. Update the value x according to the operation f.