Twitter | Search | |
Sunil Pai
ok so - I took dan's classes/hooks code from react conf, blacked out the 'unnecessary' bits, then colour coded bits by 'concern'. so much nicer. the effect is amplified in more complex components, where concerns are split and mixed across lifecycle methods.
Reply Retweet Like More
Ricky Oct 28
Replying to @threepointone
So dope Do you think the use* methods should be blacked out on the right?
Reply Retweet Like
Sunil Pai Oct 28
Replying to @rickhanlonii
Thanks! I thought about it, and think it’s essential complexity, just verbose. Just like setState. I could be wrong ofc
Reply Retweet Like
Ricky Oct 28
Replying to @threepointone
Makes sense it's definitely essential, though in my mind they're similar to the lifecycle method names on the left Selfishly if those were blacked out it would drive home a different point I like: Hooks are v close to the lower bound to do this work (i.e. with no extra code)
Reply Retweet Like
Sunil Pai Oct 28
Replying to @rickhanlonii
Yeah I liked the purpling suggestion too. But I’ll probably just black it out next time
Reply Retweet Like
Ryan Florence Oct 28
Replying to @threepointone
I was going to make an animation like this for my talk but couldn’t find a good spot for it. So cool to see here!
Reply Retweet Like
Sunil Pai Oct 28
Replying to @ryanflorence
Thank you! Haha I was thinking of doing an animation too but it seemed like too much work on a Sunday, so ms word it is :)
Reply Retweet Like
MICHAEL JACKS😂N Oct 28
Replying to @threepointone
Love this visualization 😍
Reply Retweet Like
Sunil Pai Oct 28
Replying to @mjackson
Thank you! Been thinking about it for a while and figured I’d just try it with ms word ha
Reply Retweet Like
Drudge Arrowmaker Feb 8
Replying to @threepointone
I think I'd be much more into the concept of hooks if it weren't for the fact that the order in which you declare them matters. Here, for example, we can remember that firstName comes before secondName, but what about a huge function? Real room for bugs.
Reply Retweet Like
Sunil Pai Feb 8
Replying to @spanglewang
hmm, how so? you could switch those 2 useState() around and it'll still work?
Reply Retweet Like
Drudge Arrowmaker Feb 8
Replying to @threepointone
I am only positing that because I've vaguely read about it being the case, such as in the docs: "React assumes that if you call useState many times, you do it in the same order during every render" - am I misunderstanding this?
Reply Retweet Like
Sunil Pai Feb 8
Replying to @spanglewang
What that means, is you can’t conditionally change the order of those calls in every render. The docs go into more detail, and it’s pretty pleasant when you try it out yourself. We also have a lint rule that warns you if you get it wrong. Try it, you might just like it!
Reply Retweet Like
Sunil Pai Feb 8
Replying to @spanglewang
Basically you can’t do this - if(condition){ let [x, setX] = useState() }
Reply Retweet Like
Drudge Arrowmaker Feb 8
Replying to @threepointone
Thanks, that makes more sense. Appreciate it!
Reply Retweet Like
Mehul Kar Oct 28
I don’t use react much, but at first glance, this seems like a much nicer implementation of mixins. Is there an official comparison to mixins (i.e. “they’re kinda sorta the same” or “no this is totally different”)?
Reply Retweet Like
Sunil Pai Oct 28
Replying to @mehulkar @dan_abramov
The blog post and talk go into more detail. It’s trying to solve the same problems as mixins, but a new functional take.
Reply Retweet Like
Paul Henschel Oct 28
Replying to @threepointone
Awesome idea to colorcode concerns! 😃 Should be in the docs in one way or another, this is the clearest visualization of the philosophy behind hooks so far.
Reply Retweet Like
Sunil Pai Oct 28
Replying to @0xca0a
Ha not a bad idea, I’ll try something
Reply Retweet Like
Florian Rival Oct 28
Replying to @threepointone @rauchg
Nice way of seeing things, love it!
Reply Retweet Like
Sunil Pai Oct 28
Replying to @Florianrival @rauchg
🍻
Reply Retweet Like