[Unexpected warning]: Machine given to useMachine has changed between renders

[github0013]

Description
I am using Next.js dynamic routing. pages/test/[value].tsx.
[value] is predefined as 1 to 100, so I have pages /test/1, /test/2 ... /test/100.

1. Each of the page has a link going to the same route using different [value].
2. Because nextjs doesn't fully reload the same route page, it doesn't run React.useEffect(() => {}, []) to initialize values.
3. I am using useInterpret in the Child component
4. To avoid using the same instance, I am rendering "loading" text on a new value route render.
5. Then after 1sec, I am rendering the same Child component with a new value that will eventually be a value in the machine context.

So by the number 4, useInterpret should be starting fresh. However, I see this warning in the console.

Machine given to useMachine has changed between renders. ...

Expected Result

As I think about it, the Child component is dropped on the route change (new value), useInterpret is starting fresh, so there shouldn't be any warnings in the console.

Actual Result

I get this in the console.

Machine given to useMachine has changed between renders. This is not supported and might lead to unexpected results.
Please make sure that you pass the same Machine as argument each time.

Reproduction

https://codesandbox.io/s/unexpected-warning-machine-given-to-usemachine-has-changed-between-renders-20tee

1. open https://20tee.sse.codesandbox.io/test/1
2. open console
3. follow the link
4. and you will see the warning

If I just toggle ON / OFF the same component, the warning doesn't happen.
https://codesandbox.io/s/unexpected-warning-machine-given-to-usemachine-has-changed-between-renders-20tee?file=/src/pages/toggle.tsx

1. open https://20tee.sse.codesandbox.io/toggle
2. click on the button

Additional context

I am exactly not sure, but #2210 #2023 #995 these are also related?

I found this warning as I was fixing other issue similar to #995 #2023

The issue of mine was my nextjs have a page with links going to the same page (pages/products/[id].tsx) with different parameter ([id]).
The initial page load is fine, but if I click a link going the same page with different parameter, the product info doesn't get refreshed although I can definitely confirm that new data is passed from GetStaticProps.
And I am now thinking this warning is somehow related to this issue?

[davidkpiano]

Similar issue being addressed in #3947

[Andarist]

This was largely addressed by #4436 . However, I still don't recommend "swapping" machines in production code. If you want to reset your component's state with some new initial data then I'd likely recommend changing the React's key on the component that owns the machine.