profile
viewpoint

Ask questionsReactjs doing unnecessary renders

Description <!-- A clear and concise description of what the bug is. --> 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 <!-- A clear and concise description of what you expected to happen. --> There should be no re-rendering of the components that use the machine in question.

Actual Result <!-- A clear and concise description of what happened instead. --> Components are being re-rendered.

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

davidkpiano/xstate

Answer questions 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))
  }
})
useful!

Related questions

[Feature] Spawning Actors hot 1
source:https://uonfu.com/
Github User Rank List