I think your example was good, but I disagree with your conclusion. In your example, the hooks version renders the UI based on data/state. In the non-hooks version, the state of the rendered UI depends on ephemeral events and the order they were dispatched. The hooks version is more easily tested and it's easier to reason about as a developer. It conforms to the mental model of a function (props, state) => UI. The non-hooks version would look like (props, state, actionHistory) => UI, where actionHistory is a list of all actions the user has taken since the app was initialized. With that function, we can't reproduce UI, because we don't have actionHistory (since the events triggered by the actions has not been recorded).

And are you sure the data in useEffect is stale? I don't think it is, the documentation[0] seems to suggest that it uses the current closure.

The rest I agree with.

[0] https://reactjs.org/docs/hooks-effect.html#example-using-hoo...