i think the problem with the naive symbol approach is you need to know all the keys the user hook wants to use and pass them all in which is not really scalable. however, instead of using a single symbol you could use an array of symbols which would solve that problem. a user hook would take in an array of symbols from its caller which would define its namespace then it would add a symbol to this namespace to create a new array for each nested call it wants to make.

the example would become something like:

    const nameNamespace = [Symbol()];
    const surnameNamespace = [Symbol()];

    const name = useFormInput(nameNamespace);
    const surname = useFormInput(surnameNamespace);


    const valueKey = Symbol();
 
    function useFormInput(namespace) {
      const [value, setValue] = useState(extendNamespace(namespace, valueKey));
      return {
        value,
        onChange(e) {
          setValue(e.target.value);
        },
      };
    }

there are a lot of drawbacks with doing it like this tho. like it is much less performant because you are creating all these arrays and having to do these comparisons across possibly big chains of symbols. also, there doesn't seem to be any way to easily store these chains in a map like structure for fast lookup except for using nested maps which is a bit weird.