Enable selective React rendering with useMachine?

[dminkovsky]

Currently, in useMachine, setState is called in the following conditions:

if (currentState.changed || initialStateChanged) {
    setState(currentState);
}

This is a pretty solid heuristic that should apply for almost all use cases, but breaks down when there is an action that updates context and that context change is intended to be read outside the React render loop (eg. rAF).

A concrete example is animation. Suppose you have an event handler that fires anywhere from 4-66hz and provides the progress of an audio track. In my case this event handler updates a reference that is read somewhere else and produces an animation outside the React render cycle. This reference must also be part of machine context, because guards depends on its value. It would be nice if there was a way to block updating React state for actions that just update this reference in context, because otherwise you incur an intense amount of React rendering.

I propose adding a predicate to useMachine settings that, if present, is called instead of currentState.changed || initialStateChanged to decide whether React state should be updated.

[davidkpiano]

Do you have a more complete code example? If there are any actions, state.changed will be true.

Also, this PR for adding a filter option might be of interest: #1514 Would this be applicable?

[dminkovsky]

I could provide a complete code example, but yeah #1514 (https://github.com/davidkpiano/xstate/pull/1514/files#diff-19f47c3f58ef51d8a79a32343f5c32c02d6d7237ecc29f636cb53846d00424d5R209) is exactly what I was looking for, so not sure if it would be useful for you to see. That PR would be much appreciated.

PS. useMachineSelector seems really nice too. The two things seem unrelated, but for some reason I was thinking about that while thinking about filter, too.