My machine is running Transition without direct call

[hasty tapir]

I don't why by my machine (kind of MIC MUTE\UNMUTE) is running automatically forever in an infinite loop...

[delicate cloud]

Can you share your machine here or in a codesandbox please?

[delicate cloud]

What events are sent to this machine?

[hasty tapir]

Only LOAD to init it

[delicate cloud]

Do you know what states are included in that infinite loop?

[hasty tapir]

This happened after I modified machine and added Retry to Errored state and Load to Data Loaded state.

Before that it worked as expected - auto load in 3 mins

[delicate cloud]

The machine looks fine

[hasty tapir]

I know )))

[delicate cloud]

Can you export the machine and paste the code here please?

Or share a codesandbox that includes that infinite loop?

[hasty tapir]

Let me check how I can do it

After some test I can say what exactly breaks it:

"Data Loaded": {
        after: {
          "180000": "Loading"
        },

        on: {
          Load: "Loading"
        }
      },

the ON property is what starts infinite loop. if I remove it - everything works as expected according to the diagram.

[delicate cloud]

How are you testing it? Do you have a running app that uses this machine?

[hasty tapir]

Running app

[hasty tapir]

Oh... my further experiments showed that's it's more about React then about Xstate

I found with console.log that my component is been mounted 7 times (instead of expected 1 time) and while assignLoadedDataToContext happens only once.
And these 7 mounts do 7 calls of machine.send({ type: 'Load'...
When I removed machine.send({ type: 'Load'... now mounting happens 2 times even (even though react strict mode turned disabled)

What wrong here?

So my component sends maching to Loading state during mount and it happens again and again

[delicate cloud]

I can help more if I could experiment with the running app. Hard to say what's wrong.

[fervent mural]

@hasty tapir I'm guessing you're sending events to the machine in the body of your component to test it out. This means the event will get sent every time the component is rendered.. which will probably result it some infinite rendering kind of behaviour. If you want to send an event to the machine when the component first mounts, you'll need to do it from useEffect or useCallback

This is not so much an xstate thing but a sideeffects in react components thing

[hasty tapir]

How do you recommend to do it with useEffiect, to happen only once?

[fervent mural]

Something like ```js

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

useEffect(() => {
send({type: 'MY_EVENT'});
}, [send]);

[hasty tapir]

why did you put SEND on the dependencies array?

[fervent mural]

Just took it from this example https://xstate.js.org/docs/recipes/react.html#syncing-data-with-useeffect

I think it's just good practice.. not sure if there are any situations where it would actually change though. If send changed it would mean it's a new machine

[hasty tapir]

Oh. thx for the link to the docs
What I dont understand is how we can do SEND inside of USEEFFECT that depends on STATE?

Isn't it a logical infinite loop?

[delicate cloud]

If it’s the send coming from xstate, it’s stable reference so no other reason to put it in dependencies than satisfying the linter.

[delicate cloud]

Why do you care about the state when sending events? That part is stage machine’s responsibility

[fervent mural]

Right that makes sense

[fervent mural]

Might help to just look at a basic example? https://xstate.js.org/docs/tutorials/7guis/counter.html#modeling

This shows how you would display values from the context and then send events triggered by user interactions

[hasty tapir]

Thx for the link. It`s too simple )
Everything gets not that easy when you start using context providers, fetching misc data and so on )

[delicate cloud]

Is it possible for you to share your running app or reproduce this issue in a codesandbox?