Apparently its been two years since React Hooks were released, and I feel like I can confidently say now that I don't like them

I like it _better_ than what we had before. But looking at frameworks like SwiftUI & Jetpack Compose and how they share view logic I like them better
For awhile with hooks I thought they would give me a lot more power to create really small "units" of component logic. But composing those *really* small units was actually a very frustrating challenge (that requires sooo many refs)
Over time, I've learned it's better not to break your hooks down into those super small units, and it's worth repeating logic sometimes. I've become comfortable with them, but I'm not enjoying that restriction
The couple of times I've reached outside of React into RxJS with Observables, the more I've realized they are the better "super small unit". But then when you have to wrap them with hooks it becomes frustrating (albeit less so)
Observables have their own set of problems. Learning all the Rx operators is more than a little bit overwhelming, and it's easy to create these mega-rx structures that aren't as debuggable as you'd want
I've said on more than one occasion that I want a better programming model around observables. I don't think I would enjoy a framework that is built around "raw" observables. I need a "checkpoint" where I have "normal" code again. Hooks could have been that
I see a lot of people are asking me to review other javascript frameworks. I've seen them, and tbh I've kinda given up on javascript frameworks. I've invested so much into React, if I'm going to redo it I want better benefits than "a better programming model" I want performance
If you want to get an idea of what I'm talking about with swiftui/etc and observable "checkpoints" take a look at https://swiftuipropertywrappers.com/ 

"We need a state" -> State
"We need to react to prop changes" -> Binding

Then with Combine you get what I'm talking about
Let's talk about a real world example. Recently I was building a little drawing app for fun. In my first attempt, I used React directly and quickly had performance problems cause I had tons of state to track that I *needed* in the same component/set of hooks. So I reached for Rx
I built a bunch of observables for this. Here's an example:

observePointer()

This observable gives me the current state of the (primary) pointer (the current position, if its pressing/dragging/offscreen)

ALT: https://gist.github.com/jamiebuilds/8762f9d6fc58b3be3742afad0bb0f3d3
This is *super* flexible, and most importantly I can compose it with other super generic *tiny* observables.

Maybe I want to also keep track of the current state of a couple modifier keys

ALT: https://gist.github.com/jamiebuilds/a57ceea5e48ff5af41e6fab0ab642713
Now it's easy to combine them into a new observable of just the draw events, and now my canvas component can subscribe to *only* the events where a line has been drawn. It doesn't have to worry about any other state that it took to get there

ALT: https://gist.github.com/jamiebuilds/16309e32c83b0c3164395be0651faa67
Now imagine what this would take to do with React Hooks. You'd start with a whole bunch of useState's, then that would cause too many state updates and you'd switch to using refs, and now you're tracking state updates manually without a programming model to help you. It sucks
Instead, this is what my component looks like. A *very* complex state reduced to a simple event emitter.

ALT: https://gist.github.com/jamiebuilds/136eb937fee6690c97b43644af0d27a4
It scales up really well too. Maybe I need to track the size of <canvas/> and normalize the points. I can easily write an observeElementRect(element) and adjust my observeDrawLines() method accordingly

You can't write the equivalent useElementRect() hook without state updates
I went down this path where I created tons of hooks so I could just work with observables all the time because it was just easier. Eventually I realized this would've been better if it had been the paradigm all along and I didn't have to deal with the problems of hooks
(yall keep pushing your own favorite framework like I care to hear it, go away)
You can follow @buildsghost.
Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled:

By continuing to use the site, you are consenting to the use of cookies as explained in our Cookie Policy to improve your experience.