#20: The state of transition, 2021

Transitions are orchestrated thru state hooks.
They only work when paired with hooks like useState and useReducer.

When using transitions with data-fetching, there are four key components:

1. The fetch request
2. The suspense-fetch wrapper (to communicate with boundaries)
3. The state updater
4. The transition

In psuedo-code, they are composed like this:

transition(() =>
  stateUpdater(() => suspenseWrapper(() => fetch()))
)

When creating abstractions, you can split on any of these function lines but all calls must be in place for the transition effect.

Open today’s StackBlitz demo to see what happens when you remove the state updater.
If you’re feeling bold, extract the button as its own component while keeping the same transition effect.

🐦 chantastic