Stencil: Support React Hooks

[KaboomFox]

Hooks are taking over the react community and it seems like people will be less likely to stencil if it is not supported.

I am hoping the Stencil will reconsider its position.

related to #1202

[manucorporat]

Stencil philosphy is to provide an API that matches 1-to-1 with web standards, class properties, HTML attributes, and DOM events... patterns that will last in time.

We will not add hooks because it's trending today, that would hurt the future-proof design of stencil in some way.

Hooks are causing a react-lookin that developers will pay in the long term, simple functions now are shipping as react-only utilities that will hurt business by making all their code not reusable, this is something we are not up to do with stencil.

However, I am not against hooks per se, i can see how it helps in certain use cases (also makes the code more complex in others).

Adding hooks also means creating a new component model where there are not classes, and while this might look cool today it does not match the Web Component spec, where components are classes (and they will be until the end of the web).

[balupton]

The problem is react hooks are dramatically simpler to reason about and design and code, to the end-user programmer, than the previous technique of multiple class methods for doing one thing.

Because of this, I use lit-html with haunted instead of stencil when I need web components.

[valadas]

@manucorporat I could not agree more, this is why I love Stencil!

[shadowvzs]

The problem is react hooks are dramatically simpler to reason about and design and code, to the end-user programmer, than the previous technique of multiple class methods for doing one thing.

Because of this, I use lit-html with haunted instead of stencil when I need web components.

other side example few state management lib like mobx make more simple then hook + prop propagation etc

[loganvolkers]

It turns out to be relatively easy to connect haunted to Stencil (like 15 lines of code)

import { Component, h } from '@stencil/core';
import { useState } from 'haunted';
import { useHook } from './stencil-hooks';

@Component({
  tag: 'example-hook',
})
export class ExampleHook {
  render = useHook(this, () => {
    const [count,setCount] = useState(0);

    return <div>Child is {count} <button onClick={()=>setCount(count+1}></button></div>;
  });
}

Source: https://gist.github.com/loganvolkers/6ba4335d0835d69a77b0b37b89589513

• I agree with @manucorporat that this doesn't need to be part of the core library
• Maybe it could be a package like stencil-store or stencil-redux (which is the inspiration for the stencil-hooks forceUpdate stuff)

[pvpd]

The problem is react hooks are dramatically simpler to reason about and design and code, to the end-user programmer, than the previous technique of multiple class methods for doing one thing.

Because of this, I use lit-html with haunted instead of stencil when I need web components.

Functionnal programming. We really need this

[loganvolkers]

Version 0.0.4 of @saasquatch/stencil-hooks exists over here: https://github.com/saasquatch/stencil-hooks/tree/prerelease

It works and has tests, but will be getting a bunch more testing before it's fully production ready.

[pvpd]

Hooks in react are functionnal programming. Stencil will always be class based?