Unclear example in docs

[Akiyamka]

On page core/signals-and-reactive-functions i see next example

const useDropdownState = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleIsOpen = () => {
    setIsOpen((isOpen) => !isOpen);
  };

  return {
    isOpen,
    toggleIsOpen,
  };
};

export const Dropdown = ({ children }: { children: React.ReactNode }) => {
  const { isOpen, toggleIsOpen } = useDropdownState();

  return (
    <div ref={ref}>
      <button onClick={toggleIsOpen}>Toggle</button>
      {isOpen && <div>{children}</div>}
    </div>
  );
};

Why ref needed here and how we get it?

import { component, reactive, signal } from 'signalium';
import { useState } from 'react';

const getDropdownState = reactive((id: string) => {
  const isOpen = signal(false);

  const setIsOpen = (isOpen: boolean) => {
    isOpen.value = isOpen;
  };

  const toggleIsOpen = () => {
    setIsOpen((isOpen) => !isOpen);
  };
});

let DROPDOWN_ID = 0;

// Note: We'll cover the component helper later on in the React section, for now
// just know that it's a function that makes a React component reactive
export const Dropdown = component(({ children }: { children: React.ReactNode }) => {
  const id = useState(DROPDOWN_ID++);
  const { isOpen, toggleIsOpen } = getDropdownState(id);

  return (
    <div ref={ref}>
      <button onClick={toggleIsOpen}>Toggle</button>
      {isOpen && <div>{children}</div>}
    </div>
  );
});

why reactive declare id: string argument but never use it?
and why it not return anything?

[pzuraq]

the ref={ref} example is a mistake, that should be removed.

The id argument provides a unique parameter for the reactive function. This way, it creates a new instance of the isOpen signal for each dropdown, rather than reusing the same instance for each one. This is one technique that can work, another one would be to use useSignal to declare that signal directly in the component.

The main thing is that you cannot simply add a signal or state to reactive function the same way that you would add a signal to a custom hook. Doing so violates signal purity, because then the state of the function is not based on its arguments, it has its own internal state.

[Akiyamka]

Got it, id it's something like key for component. But I see a problem here with eslint - it will remove unused arguments inside the reaction anyway. Will it broke something?

And question about why reactive not return anything (void) in second example still relevant, it's another babel magic or mistake in example?

[pzuraq]

Ah yes, that is another mistake! Thanks for catching that, I'll get it fixed