Cannot register spotlight action in an effect

What package has an issue

@mantine/spotlight

Describe the bug

If you try to register new actions in an useEffect, this doesn’t work. If you pass spotlight as the useEffect dependency, this is run forever. also if you limit to registerActions and removeActions which probably are incorrectly created and are not callbacks created through useCallback.

The idea is this:

const spotlight = useSpotlight();

  useEffect(() => {
    console.log("register");
    spotlight.registerActions([
      {
        id: "act1",
        title: "Action",
        onTrigger: () => {}
      }
    ]);

    return () => {
      console.log("remove");
      spotlight.removeActions(["act1"]);
    };
    // Try to correctly pass spotlight as dependency here
  }, []);

An use case for this is to register and de-register actions based on external events. e.g. an action to mute/unmute the microphone based on the mute state.

In which browser did the problem occur

Any

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/reverent-leftpad-6i6fkz

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No

Possible fix

This probably happen because everytime the children of SpotlightProvider change, the initial actions are re-set

[ercgrat]

PR #1085 introduced behavior to update the actions whenever the actions prop to SpotlightProvider changes.

@ramiel because you are passing an unmemoized array as the actions prop, when the provider re-renders it thinks your actions have changed and updates actions with the empty array. Dependency checks are always shallow comparisons; the two empty arrays from each re-render are NOT equal. Memoizing the array fixes your sandbox example: https://codesandbox.io/s/vibrant-jennings-ioy752

[rtivital]

Fixed in 5.1.3