Infinite loop in NextJS client component no matter what I do

[NixBiks]

I've a component that looks like this

"use client";

import { useMachine } from "@xstate/react";
import { setup } from "xstate";

function Component() {
  const [state, dispatch] = useMachine(
    setup({}).createMachine({
      initial: "idle",
      states: {
        idle: {},
      },
    })
  );

  return <div>Hello world!</div>;
}

If I try to render that in my NextJS application then I get

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

What am I doing wrong here?

[Andarist]

You create new machines on each render. Try this:

"use client";

import { useMachine } from "@xstate/react";
import { setup } from "xstate";

const machine = setup({}).createMachine({
  initial: "idle",
  states: {
    idle: {},
  },
})

function Component() {
  const [state, dispatch] = useMachine(machine);

  return <div>Hello world!</div>;
}

[NixBiks]

Gosh of course. But how do you provide actions from other hooks then? Maybe I have a toast action from useToast that I'd like to call on certain events.

Is this example valid solution? Instead of giving a machine to useMachine then a function is given and won't cause rerender?

[Andarist]

You can supply render-dependent actions like this:

function Component() {
  const [state, dispatch] = useMachine(machine.provide({ actions: { doStuff: () => {} } }));

  return <div>Hello world!</div>;
}