Getting "machine... ...has changed between renders" warning with callback function as prop | Stately | Page 1

signal halo Jan 13, 2023, 6:41 PM

#

Hi Stately, I have a callback function I need to pass into our createMachine as a prop to fire on some event. This is cross-platform react-native (web + native) and it's working right as far as I can tell, but I'm getting a warning (only on iOS) that says "Machine given to "useMachine" has changed between renders. This is not supported and might lead to unexpected results". Any words of wisdom for me on this one?

steady drum Jan 13, 2023, 6:51 PM

#

What does the code look like?

signal halo Jan 13, 2023, 7:09 PM

#

closeQuickPayDrawerProp is the callback causing the warning

steady drum Jan 13, 2023, 8:18 PM

#

Didn't think you'd send the entire file.. Basically, you don't want to modify re-create the machine when the callback changes, but rather update the interpreter.

  const quickPayService = useInterpret(() => CreateQuickPayMachine(), {
    devTools: true,
    context: stateContextOverrides,
    actions: {
       closeQuickPayDrawer: closeQuickPayDrawerProp
     }
  });

#

This should give you enough info to know what to change hopefully

signal halo Jan 13, 2023, 10:24 PM

#

Ah sorry Andre my bad. Thanks for taking a look. This is great I'll give it a shot!

#Getting "machine... ...has changed between renders" warning with callback function as prop