Add Hooks API

[kossnocorp]

React team just announced new React Hooks API, and I think it will be a worthy addition to Preact.

The RFC: reactjs/rfcs#68
A blog post at React blog: https://reactjs.org/docs/hooks-intro.html

Would pee my pants with happiness!

[developit]

It looks like we're going to be releasing hooks support as an opt-in import, so you only pay for them if you use them. It'll look like this:

import { useState } from 'preact/hooks'

export function Demo(props) {
 const [count, setCount] = useState(0)
 return <button onClick={() => setCount(c => c+1)}>{count}</button>
}

There's been some discussion of this on Twitter - currently we have a working prototype.

[huozhi]

@developit is there a current developing branch for hooks feature now?

[arusanov]

What if all components stuff can also be moved into opt-in import?
Like import { Component } from 'preact/component'
So if you want to use only functional components and hooks you don't pay for component(Will|Did)...
Sure it's a breaking change but maybe someday...

[hugmanrique]

Webpack should already (don't quote me on this) just remove the Component class and all other functions you don't use in your code.

[SolarLiner]

Only with the proper tree shaking plugins? Or is it part of Webpack now and I've just lost touch (last option most likely)?

[hugmanrique]

Webpack 4 does tree shaking in production mode (Source: https://webpack.js.org/guides/tree-shaking/) 😀

[arusanov]

While treeshaking will remove some, It won't be able to remove this code for example:
https://github.com/developit/preact/blob/master/src/vdom/component.js#L27
or this one
https://github.com/developit/preact/blob/master/src/vdom/component.js#L86
or this
https://github.com/developit/preact/blob/master/src/vdom/component.js#L200

[AlexGalays]

Moving components into their own sub-package sounds great, especially since they become useless if one go with hooks exclusively. So most projects could decide whether they want the OO style (/components) or the more FP style (/hooks)

[marvinhagemeister]

@AlexGalays it's unlikely that they'll become "useless" anytime soon. There are a lot of third-party components on npm and it will take a long time for them to change. And that assumes that all the authors do want to change to hooks in the first place.

[AlexGalays]

@AlexGalays it's unlikely that they'll become "useless" anytime soon. There are a lot of third-party components on npm and it will take a long time for them to change. And that assumes that all the authors do want to change to hooks in the first place.

Yes, I never wrote that though.

[marvinhagemeister]

@AlexGalays Oh sorry, my bad. I misread your comment.

[developit]

In order to move Component into a subpackage we'd need to disentangle it from the renderer. Right now it's plumbed directly into the renderer since setState and forceUpdate enqueue rendering. It seems like the only way to remove that direct dependence would be to export a secret member from Preact that can be used to call enqueueRender(). This could potentially be done the same way we do hooks (import {options} from 'preact'; options.enqueueRender()). I'm not sure what the savings would be though.