Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Why Do React Hooks Rely on Call Order?

overreacted.io

Post reply on HN
Print view View original

71–80 of 115 posts

Re: Why Do React Hooks Rely on Call Order?

#71

Post by thomasfoster96 »

danabramov wrote: post #64
thomasfoster96 wrote: post #63

Earlier quoted context omitted.

> How are you going to compose Symbols? I would’ve used a WeakMap with Symbol keys that mapped to a list or object containing Symbols. Sorry if I’m just overlooking something obvious, but most of the examples that I’ve seen to explain why Symbol keys aren’t better than the current proposal seem to be just be examples of badly implemented custom hooks, not necessarily flaws with Symbol keys per se.

Can you convert the `useSubscription` example from the "diamond problem" section so we can compare "before" and "after"? A key design goal is that creating a custom Hook is easy. You should be able to literally copy paste part of your component (e.g. a bunch of useState calls and some event handlers) and call it a day. I'm struggling to see how what you're suggesting could be easy for the end user but maybe I'm missi…

Here’s what I mean: https://gist.github.com/thomasfoster96/c4a20053c747196f027fc...

> A key design goal is that creating a custom Hook is easy. You should be able to literally copy paste part of your component (e.g. a bunch of useState calls and some event handlers) and call it a day.

I'd totally understand that reasoning, because the keyed Hooks are more verbose and would generally require two or three parts of a component to be copy-pasted – but the examples under Flaws #3 and #5 didn't make this clear (to me at least), and I hadn’t seen ‘ease of custom Hook implementation’ cited as an argument against keyed hooks before.

I’m really just playing devil’s advocate here, because in my playing around with Hooks I haven’t yet found a case where keyed Hooks are necessary, but I have accidentally put calls to useState() inside a conditional a heap of times.

Edit: Flaw #5, not #7

Re: Why Do React Hooks Rely on Call Order?

#72

Post by asark »

danabramov wrote: post #68
asark wrote: post #65

Earlier quoted context omitted.

It's not a global object—it's an instance of the object for the component you're using. The whole thing's a terrible OOP system in a language that already has a built-in mediocre OOP system, which terrible OOP system is, in the end, just a(n inefficient) pass-through to same built-in mediocre OOP system. The posters here wondering why you can't name them are on to something. I assume it's because then it'd be too obv…

>The posters here wondering why you can't name them are on to something Can’t name what ? Not sure I follow. >I really hope it's not more than one person, it's not hard work, but it probably is We had from 5 to 8 people on the team at different times. Maybe maintaining one of the most popular open source projects isn’t “hard work” for you but we find it challenging. >I'm not sure what other explanation there could be…

>The posters here wondering why you can't name them are on to something

Imprecise phrasing on my part, the discussion here has been around naming hooks with Symbols.

> We had from 5 to 8 people on the team at different times. Maybe maintaining one of the most popular open source projects isn’t “hard work” for you but we find it challenging.

I meant React Hooks specifically, not Redux, which I assume is what you mean here.

> We try to solve problems that product engineers run into. If you have better ideas we’d love to hear them.

Use the built-in OOP system instead of writing a worse new one? Reinventing methods and properties with poor, misleading syntax as a thin layer over the OOP system of the host language is... well, it's helping bloggers, I guess.

Re: Why Do React Hooks Rely on Call Order?

#73

Post by sfvisser »

Sticking to attributes on classes doesn't have this ordering issue, because construction only happens once.

    class Form extends ReactishComponent {
        name = this.useState('Mary')
        surname = this.useState('Poppins');
        width = this.useState(window.innerWidth);
    
        constructor () {
            this.useEffect(() => {
                const handleResize = () => this.width.set(window.innerWidth);
                window.addEventListener('resize', handleResize);
                return () => window.removeEventListener('resize', handleResize);
            })
        }
      
        handleNameChange = e => this.name.set(e.target.value)
        handleSurnameChange = e => this.surname.set(e.target.value)
      
        render () {
            return (
              
                
                
                
Hello, {this.name.get()} {this.surname.get()}

                
Window width: {this.width.get()}

              
            )
        }
    }

Re: Why Do React Hooks Rely on Call Order?

#74

Post by danabramov »

sfvisser wrote: post #73

Sticking to attributes on classes doesn't have this ordering issue, because construction only happens once. class Form extends ReactishComponent { name = this.useState('Mary') surname = this.useState('Poppins'); width = this.useState(window.innerWidth); constructor () { this.useEffect(() => { const handleResize = () => this.width.set(window.innerWidth); window.addEventListener('resize', handleResize); return () => wi…

How do custom Hooks look in this world?

Re: Why Do React Hooks Rely on Call Order?

#75

Post by danabramov »

Klathmon wrote: post #70
danabramov wrote: post #53

Earlier quoted context omitted.

For debugging, we will show Hook tree in DevTools by capturing and parsing stack traces. https://github.com/facebook/react/pull/14085

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 H…

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...

Re: Why Do React Hooks Rely on Call Order?

#76

Post by danabramov »

k__ wrote: post #69
danabramov wrote: post #59

Earlier quoted context omitted.

Symbols don't solve this without extra closure wrapper and Hook "instantiation" (described in flaw #5). Passing a Symbol to custom Hook from outside also doesn't work because a custom Hook may have more than one state. Try to convert the `useSubscription` example to your proposed API (and don't forget effects would also need "IDs") and you'll see what I mean.

Couldn't a custom hook have a map of maps that keep track of this? The first map gets the symbol that was passed to the custom hook as keys and the maps inside that map would use symbols only the custom hook knows about. I think your solution is superior in that is more concise and I at least think I understand why you went that way. I'm just trying to understand why the symbol approach wouldn't work.

Yeah you could do this but this “breaks copy paste” (one of the flaws). We want creating a custom Hook to feel exactly like extracting a function. It should feel easy and you shouldn’t need to mess with maps and symbols.

Re: Why Do React Hooks Rely on Call Order?

#77

Post by danabramov »

asark wrote: post #72
danabramov wrote: post #68

Earlier quoted context omitted.

>The posters here wondering why you can't name them are on to something Can’t name what ? Not sure I follow. >I really hope it's not more than one person, it's not hard work, but it probably is We had from 5 to 8 people on the team at different times. Maybe maintaining one of the most popular open source projects isn’t “hard work” for you but we find it challenging. >I'm not sure what other explanation there could be…

>The posters here wondering why you can't name them are on to something Imprecise phrasing on my part, the discussion here has been around naming hooks with Symbols. > We had from 5 to 8 people on the team at different times. Maybe maintaining one of the most popular open source projects isn’t “hard work” for you but we find it challenging. I meant React Hooks specifically, not Redux, which I assume is what you mean…

I’d love to hear about your solutions but maybe don’t be so quick to dismiss other people’s hard work as something to “help bloggers”. If we were chatting face to face would you also behave like this?

We’re very open to good technical arguments but this isn’t one.

Re: Why Do React Hooks Rely on Call Order?

#78

Post by Klathmon »

danabramov wrote: post #75
Klathmon wrote: post #70

Earlier quoted context omitted.

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 H…

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...

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!

Re: Why Do React Hooks Rely on Call Order?

#79

Post by k__ »

danabramov wrote: post #76
k__ wrote: post #69

Earlier quoted context omitted.

Couldn't a custom hook have a map of maps that keep track of this? The first map gets the symbol that was passed to the custom hook as keys and the maps inside that map would use symbols only the custom hook knows about. I think your solution is superior in that is more concise and I at least think I understand why you went that way. I'm just trying to understand why the symbol approach wouldn't work.

Yeah you could do this but this “breaks copy paste” (one of the flaws). We want creating a custom Hook to feel exactly like extracting a function. It should feel easy and you shouldn’t need to mess with maps and symbols.

Okay, DX is an important selling factor, so your approach seems reasonable to me.

Re: Why Do React Hooks Rely on Call Order?

#80

Post by RubenSandwich »

danabramov wrote: post #54
fogetti wrote: post #7

Beg to differ, yes, implicit call order will result in huge clusterfucks. React+Redux is already causing Frankenstein apps (which is not implicitly caused by those frameworks (ok, maybe except redux) but when you throw in react-redux, react-router, redux-thunk, etc. in the mix it just deteriorates quickly). Well the NPM report showed us the trends. Every major fad peaks around 5 years in the making in JS land and the…

I'd love to debate the part about persistent call order but the rest of your comment has nothing to do with the content of my article and appears to be a generic rant. Could you help me see how it would result in "huge clusterfucks" with an example? Note React doesn't rely on particular call order. You can move your calls around any way you like. Just that it's persistent between re-renders.

Dan, I've seen this a few times already. I believe people are misunderstanding "persistent call order" to mean that they cannot change call order between versions of their app. I wonder if another name would help people understand this, maybe: "Non-conditional call order."?

That does better highlight that you are worried about conditionals. (It doesn't address the loop issuie though.) Hmm, here is another one. "Static call order"?

I guess what I'm saying and what I'm reading from the parent comment is that they are misunderstanding the name.

Post reply on HN