transition state change detection

[akomm]

I often come across the situation where I need to track local state for a server-side result. For example when I have an error returned from an action, I want it to push onto an notification stack (some app state) to be displayed on the screen and then automatically disappear after a period of time.

For that, I need to track the transition state and track whether it changed since last render, so that new errors can potentially appear again.

A naive impl. of adding "stateChanged" to transition, which works for me:

function useTransitionTracking() {
  const transition = useTransition()
  const prevState = useRef(transition.state)

  useEffect(() => {
    prevState.current = transition.state
  }, [transition.state])

  return {
    ...transition,
    stateChangedTo:
      prevState.current === transition.state ? null : transition.state
  }
}

A naive impl. using it, which works and push only once when there is an error, the state has changed and is now "idle":

export default function LoginRoute() {
  const result = useActionData<ActionData>()
  const error = result?.error

  const transition = useTransitionTracking()
  const notify = useNotify()

  useEffect(() => {
    if (error && transition.stateChangedTo === "idle") {
      console.log("pushed")
      notify.push({text: error, severity: "warning", duration: 3000})
    }
  }, [error, notify, transition.stateChangedTo])

  // ...
}

This can sure be improved to something like "useEffectOnTransitionChange" where I just pass the state I want the effect to trigger on and then a callback/effect to run.

I just wonder, if the transition (same for fetcher) shouldn't have the ability to know the state change out of the box.

A note ahead: I could probably solve this without the hook just using expressions in useEffect (e. G. transition.submissin?.key, ...), but this bites with the deps array eslint rule and I don't want to mess with it and make exclusions.

Its important to see the change, because sometimes its impossible in react that a thing, like notify, does not "change" simply by the impl. of the third party library I can not affect. And its basically the intention: when state changes to idle (not simply when its idle)

[jridenbaugh]

I also think it would be beneficial to tie state transition effects to the transition and fetcher state in a more direct way, rather than using a useEffect hook

[akomm]

Transition is external state. If you want to sync your local state to it, you need effect. Or what do you mean?

[jridenbaugh]

I agree that we need an effect

I just wonder, if the transition (same for fetcher) shouldn't have the ability to know the state change out of the box.

Here, I thought you were suggesting the transition or fetcher being more of the owner for that state transition.
To me it seems like a small state machine, and I want effects on those state transition events, and it feels odd for that to be in useEffect

[akomm]

Oh yes, It would be better when you have it out o the box from transition/fetcher. Probably (not sure) would it would have an effect for this "internally".