[Bug] Production build won't re-render if a component has no state or props

[loganvolkers]

Ran into a bug while using @saasquatch/stencilbook -- the component renders in dev mode, but when built for production the component will not re-render when state changes.

Upon deeper investigation the forceUpdate method from @stencil/core is being called, but render never gets called again.

By looking into the source of forceUpdate, it relies on an isUpdateable flag or becomes a no-op:

Deeper introspection shows this telling line:

  cmpMeta.isUpdateable = cmpMeta.hasProp || cmpMeta.hasState;

To reproduce, do a production build on this component:

import { withHooks, useState } from '@saasquatch/stencil-hooks';

@Component({
  tag: 'my-counter',
})
export class Counter {
  constructor() {
    withHooks(this);
  }

  render() {
    const [count, setCount] = useState(0);
    return (
      <div>
        {count} <button onClick={() => setCount(count + 1)}>+1</button>
      </div>
    );
  }

  disconnectedCallback() {
    // required for `useEffect` cleanups to run
  }
}

To fix add any unused prop or state.

import { withHooks, useState } from '@saasquatch/stencil-hooks';

@Component({
  tag: 'my-counter',
})
export class Counter {
   @Prop() unusedButAllowsForceUpdate = true;

   // ... rest of component ...
}

[loganvolkers]

For others that have run into this, the current workaround is to create fake internal state.

   @State() ignore = true;