4 ms·
Maybe something like this? https://gist.github.com/sebastiaanvisser/72e6bc54baa14abc08ec14196ea26623 https://gist.github.com/sebastiaanvisser/72e6bc54baa14abc0
by sfvisser 8y ago
Maybe something like this?
https://gist.github.com/sebastiaanvisser/72e6bc54baa14abc08ec14196ea26623 https://gist.github.com/sebastiaanvisser/72e6bc54baa14abc08e...
It all seems to boil down to packing and silently composing lifecycle methods. Either with classes, records of functions, or effectful functions, dictionaries.
I can see how the ergonomics of current react hooks are actually great, but I still think they’re weird :) I’ll probably get over it some day.
edit: note how hooks are now parametrized datatypes, probably allowing you to do all kinds of first class composition. Read only hooks are probably a functor and a monad...
- danabramov 8y agoHow would you pass values between two different Hooks? See my two examples in the post (useSpring and useFriendStatus). Note they need to be always up-to-date and not just execute once.
- sfvisser 8y agoWith passing values between hooks do you mean "Make one hook depend on the value of another hook?". Because that seems like the functor 'map', or applicative 'apply'. Note, I don't really know what these springs are, but derived hooks could work like this: class MyComp extends ReactishComponent { fast = this.use(new Spring({ pos: [0, 0], config: "fast" })) // prim hook slow = this.use(this.fast.map(spring => ({ pos: spring.pos, config: "slow" }))) // functor map mid = this.use(combineTwoHooks((fast, slow) => computeMiddle(fast, slow), this.fast, this.slow)) // applicative render() { return ( <> <Point pos={this.fast.get().pos} /> <Point pos={this.slow.get().pos} /> <Point pos={this.mid.get().pos} /> </> ) } } The trick is functions that convert hooks into new hooks.