3 ms·
I don't agree with the author's statement that there are only two (very involved) solutions to the pagination problem (re: section titled "React relies on the
by bcyn 7y ago
I don't agree with the author's statement that there are only two (very involved) solutions to the pagination problem
(re: section titled "React relies on the order in which Hooks are called").
It can easily be solved by just setting the state in the event handler, since the state is included in the dependencies array for the fetch effect:
https://codesandbox.io/s/dependency-array-0u3sc https://codesandbox.io/s/dependency-array-0u3sc
The answer to this question posed by the author?
> On line 23, the useFetch Hook will be called once on the first render. On lines 35 – 38, pagination buttons are rendered but how would we call the useFetch Hook from the event handlers of these buttons?
We can call `useFetch` again by triggering a re-render. This hasn't changed at all with the introduction of hooks: new props or new state still triggers a re-render.
- tylerFowler 7y agoI wondered about this too, in general I think the article misses that updating state is the key to "causing" effects. Rather than latching onto the callback model to explicitly "run" effects. Though I'll admit getting the relationship of state and effects caused by changes to that state can be more difficult to work out mentally, I think it results in a more complete understanding of what a component actually does.
- bcyn 7y agoI agree it's not intuitive at first. As someone pointed out on Twitter (can't find link at the moment): A good mental model is that the second argument to useEffect defines which pieces of state that effect syncs with. useEffect(() => {}, undefined) // Sync with all state useEffect(() => {}, []) // Sync with no state useEffect(() => {}, [a, b]) // Sync with `a` & `b`
- acemarke 7y agoOriginal source was Ryan Florence: https://twitter.com/ryanflorence/status/1125041041063665666 https://twitter.com/ryanflorence/status/1125041041063665666