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.
let setPokemon = (resource) => startTransition(() => setPokemonResource(resource));
We can compose our suspense-coordinated
fetch request anywhere.
In a real-world app, this would likely happen in a module.
let getPokemon = (id) => suspensify(fetchPokemon(id));
That leaves with a very flexible and terse event handler:
() => setPokemon(getPokemon(id));
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.