4 ms·
To be as a long-time react.js user – these examples look like a kinda weird mix of declarative with some bitter imperatives. Like, foo.set depending on foo.get
by gloosx 3y ago
To be as a long-time react.js user – these examples look like a kinda weird mix of declarative with some bitter imperatives. Like, foo.set depending on foo.get and having to manually set element innerText inside the side-effect, eww, I can only imagine how messy it can get for a somewhat more complex application.
React boilerplate for this case looks so much better in my opinion, take a look
```
function Component() {
const [counter, tick] = useReducer(st => st + 1, 0)
useEffect(() => setInterval(tick, 1000))
return counter % 2 ? 'odd' : 'even'
}
```
Three lines, declarative, functional, noice.
- recursive 3y agoFunctional usually means the output can only depend on the input. But this is depending on some external state getting smuggled in through a hook. FWIW some people prefer the alternatives over this.
- gloosx 3y agoThis not really correct, the useReducer hook is not some external state which is smuggled in. It is an actual input for the reconciler which defines an output of this component, so it is perfectly functional even by your definition.
- recursive 3y agoThe value counter changes in subsequent invocations. Maybe react redefined some standard terminology, but this is really straightforward. If useReducer is not pure, and it's not, any function that calls it is impure.
- gloosx 3y agoThis reducer is certainly pure, you are confusing it with `st => st++`
- recursive 3y agoTell me, what's the value `counter` returned by this "pure" function invocation? const [counter, tick] = useReducer(st => st + 1, 0) Answer: It depends. Sometimes 0, sometimes more. Any function that can return different results for the same inputs is impure. Therefore, `useReducer` is impure. It can return different results for the same input. React may have some alternate definition for "function" or "pure", but these words existed prior to react.
- gloosx 3y agoGiven function is pure, for any given input state, it will return state + 1, the state is an accumulated result of all invocations, there are no arguments nor external factors that would cause it to behave differently. There are no side-effects either, it solely relies on it's input state to produce the output, it doesn't mutate any variables outside it's scope, doesn't interact with the outside world, nor modify any global state. Therefore it is perfectly pure by the classic definition of pure, react did not redefine anything in that matter, it is a pure functional renderer by design.
- recursive 3y agoCrucially, the state you're referring to exists outside the function parameters. Invoking the returned reducer function mutates the `memoizedState` property on the component's fiber object. The fiber object is the state external to the function. It's not one of arguments to the function. Here's a function. Is it pure? let current = 0; function getNext() { return current++; } Note that the result is an accumulated result of all invocations. I don't think this is a pure function. Now imagine `current` was a react fiber object, accessed through a hook dispatcher. What exactly is the difference?
- gloosx 3y agoIt all seems right, except the reducer function does not mutate the fiber object. Your function is certainly not pure, it boldly mutates the outside state via increment operator. It is incorrect to extrapolate this on how fiber works. The difference is that React hook, with both state and setter lives inside the dispatcher, and calling the hook setter only enqueues an update which is then handled by dispatcher, so technically speaking the hook does not mutate it's outer state directly, the dispatcher updates it's inner state while processing the queue.