3 ms·
Sticking to attributes on classes doesn't have this ordering issue, because construction only happens once. class Form extends ReactishComponent {
by sfvisser 8y ago
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 (
<>
<input value={this.name.get()} onChange={this.handleNameChange} />
<input value={this.surname.get()} onChange={this.handleSurnameChange} />
<p>Hello, {this.name.get()} {this.surname.get()}</p>
<p>Window width: {this.width.get()}</p>
</>
)
}
}
- danabramov 8y agoHow do custom Hooks look in this world?
- linkmotif 8y agoDan, thanks for your work on React and all the new features from you and the team. I love your stewardship of this project. React is fantastic and I’ve loved your choices of features to add. If you could just make docs less verbose...
- danabramov 8y agoThen other people will ask to make them more detailed :-) Thanks for feedback though, we’re listening.
- deleted 8y ago[deleted]
- sfvisser 8y agoMaybe 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.