I think this post has actually pushed me back towards Symbol keys perhaps being a good idea. The useFormInput() example under Flaw 3 seems rather contrived – wouldn’t you just pass a Symbol key to useFormInput and it would then pass the key to useState, solving the supposed flaw? If you had to use useState several times in useFormInput, just use a WeakMap (they’re not that scary) with the keys being the Symbols passe…
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);
},
};
}