Xstate: Reactjs doing unnecessary renders

[ivandotv]

Description

As discussed on spectrum chat.
When sending events to the machine, even when those events don't resolve to a new state transition or context change, reactjs still re-renders components.

Expected Result

There should be no re-rendering of the components that use the machine in question.

Actual Result

Components are being re-rendered.

Reproduction
https://codesandbox.io/s/xstate-react-render-ssnc1

[davidkpiano]

Thinking through this more, this might be part of a bigger story - it's a valid use-case for the function component to be called again (rerender) if actions changed, if something should be done with those actions:

const [state, send] = useMachine(...);

useEffect(() => {
  state.actions.forEach(action => {
    // do something with each action
  });
}, [state.actions]); // should execute effect when only actions change

// ...

But this opens the conversation for supporting some sort of "selector" that will only select and map over each state; something like:

// ⚠️ TENTATIVE API

const [name, send] = useMachine(someMachine, {
  // only care about specific parts of the state
  select: state => state.context.firstName = state.context.lastName
});

// component will only rerender when `firstName` or `lastName` changes

// ...

[Andarist]

it's a valid use-case for the function component to be called again (rerender) if actions changed, if something should be done with those actions:

This is a totally invalid use case in React's world. If one specifies actions to be executed during some transitions we should strive for a guarantee that they will always be executed, which is not the case with the given code. React has a batching mechanism and it's there from the beginning (or close to that 😅 ) so even before hooks this would yield the expected results (if you would just implement handling actions in componentDidMount/componentDidUpdate)

[davidkpiano]

it's a valid use-case for the function component to be called again (rerender) if actions changed, if something should be done with those actions:

This is a totally invalid use case in React's world. If one specifies actions to be executed during some transitions we should strive for a guarantee that they will always be executed, which is not the case with the given code. React has a batching mechanism and it's there from the beginning (or close to that 😅 ) so even before hooks this would yield the expected results (if you would just implement handling actions in componentDidMount/componentDidUpdate)

I'm confused; can you show an example where this guarantee is not being held? Or are you saying that we _should_ deprecate the idea that actions can be handled like my example above?

[Andarist]

I'm confused; can you show an example where this guarantee is not being held?

Take a look: https://codesandbox.io/s/blue-shadow-cnjz2?file=/src/App.js . Notice how barAction is missed.

[davidkpiano]

Ah you're right; so it's an invalid use-case anyway (unfortunate how batching works like that).

Okay, so should we go ahead with preventing rerenders if only actions changed?

[Andarist]

Okay, so should we go ahead with preventing rerenders if only actions changed?

I believe yes - this would be best as their change shouldn't affect the render output in any meaningful way.

[cybervaldez]

Thinking through this more, this might be part of a bigger story - it's a valid use-case for the function component to be called again (rerender) if actions changed, if something should be done with those actions:

const [state, send] = useMachine(...);

useEffect(() => {
  state.actions.forEach(action => {
    // do something with each action
  });
}, [state.actions]); // should execute effect when only actions change

// ...

I believe this can already be done with asEffect

const [current, send]= useMachine(InputMachine, {
  actions: {
     UI_FOCUS : asEffect((context, event)=>setFocus(context.isFocused))
  }
})