[yiransheng]

Hooks reminds me of tensorflow scopes a little bit, in python:

    with tf.variable_scope("foo"):
        with tf.variable_scope("bar"):
            v = tf.get_variable("v", [1])
            assert v.name == "foo/bar/v:0"

`v` tensor here will have a generated human readable unique name here: "foo/bar/v:0"

It seems with hooks, react uses call order to derive the unique "leaf" hook id for runtime resolving its implementations. However, it would be nice if react hooks can automatically provide a similar human readable "hook id" (even if only for dev/debug build).

    function useWindowWidth() {
      const [[width, setWidth], stateId] = debug(useState);

      assert(stateId === "useWindowWidth/state/:0");

      useEffect(() => { ... });
      const [_, effId] = debug(useEffect, () => { ... });

      assert(effId === 'useWindowWidth/effect/:1");

      return width;
    }

This will definitely help for nested custom hooks..

[danabramov]

For debugging, we will show Hook tree in DevTools by capturing and parsing stack traces.

https://github.com/facebook/react/pull/14085

[Klathmon]

Could something like this be used to move the "linting" that the react team recommends directly into react itself?

If you can abuse error stack traces to get the call stack, and some trickery to get the string representation of the component function that called the hook (following it through all intermediate custom hooks), you could then have the full text of the function body and know for sure that it's calling a Hook, and from there could run some linting on that internally and scream to the console if a hook is being used incorrectly.

It may have a pretty significant performance and possibly size overhead depending on how much code is needed to inspect the function body and actually do the parsing/linting, but removing the need for a linter ("need" might be too strong of a word?) would make it easier to get started with, and safer to use for developers who, like it or not, don't read docs fully, don't setup or use linters, or just want to throw something together with very little tooling. And obviously it would all be stripped from production builds.

Has the react team explored this idea? and are there reasons that I'm missing that it won't work or isn't ideal?

[danabramov]

Sebastian’s comment (which I linked to throughout the post quite a few times) mentions we will probably do some DEV time validation with similar techniques. I really suggest to read it all — my post wasn’t intended to answer all questions.

https://github.com/reactjs/rfcs/pull/68#issuecomment-4393148...

[Klathmon]

My apologies! I was on mobile when I read it last night and the RFC links don't seem to go directly to the comment on my android device for some reason! (it loads the full list of comments, but never takes me to the correct one, and searching for sebastian didn't show any results, i guess because his username is the only thing that shows up)

Thanks!

[danabramov]

Oh GitHub mobile can be pretty annoying. Glad you found it!