#21: Abstracting , 2021
You probably screaming at me for not abstracting our pokemon-fetching, state-setting, transtiion-starting, suspense-coordinating
onClick handler into an easy to remember function name.
In a real app, we don’t want the liability of stringing four calls together ever click. But where do we draw the line?
I see one natural division:
- Functions that must be composed inside the component (the hooks)
- Functions that can be composed anywhere
First, the hooks…
We can compose
setPokemonResource into a single function. And because we’ve named the state updater
setPokemonResource, we can use a more direct name like
setPokemon for our composed event handler.
We can compose our suspense-coordinated
fetch request anywhere.
In a real-world app, this would likely happen in a module.
That leaves with a very flexible and terse event handler:
Now, you could boil it down to a single function, but this is plenty terse for me.
P.S. Open up today’s StackBlitz demo. Add a “Previous” button. And maybe play with boiling these event handlers down even further.