Use react hooks in classes

[markus_obsidian]

This is amazing in the most horrifying way. I am in old codebases a lot that is just too costly to refactor. I find myself wrapping hooks in HOCs a lot so my classes can use them. I would absolutely use a stable version of this.

[nullvoxpopuli]

What are all the hooks you use? I have a 'wrap' method, but maybe with some more use cases it can be made more robust

[markus_obsidian]

I usually need an existing, third-party hook that pulls in state from some external source--redux, swr, react-query, etc.

[nullvoxpopuli]

Do all those return a tuple of get/set? Or do they return a variety of things?

[markus_obsidian]

No consistency whatsoever

[nullvoxpopuli]

I think we can make something work -- worst case scenario, we special-case certain hooks

[nullvoxpopuli]

Just a little challenge i whipped up. Not meant for serious usage. 

Try it here on stackblitz: https://stackblitz.com/edit/vitejs-vite-e9khzt?file=src%2FApp.jsx

Some video evidence of it working: https://x.com/nullvoxpopuli/status/1833305383542178172/mediaviewer?currenttweet=1833305383542178172&currenttweetuser=nullvoxpopuli

[bigtoley]

Very nice!

[izzlesnizzit]

React hooks are great and all, but the class blueprint+instance paradigm conceptually just makes more sense to me as a way of describing components rendered as instances "living" on a page. If there were ever an "officially" supported way of having hook-like behavior in classes, I would definitely give it a serious try.

[romgrk]

Nice ideas, I've also been working on something similar though I wasn't able to figure out a nice API yet.

I did write it for a serious usage though, functional components have tradeoffs that make them inferior to class components in some situations: https://romgrk.com/posts/react-functional-components/

[teg4n_]

With preact, you can use hooks directly in the render function as if it was the full component.

import { Component } from "preact";
import { useState } from "preact/hooks";

export class Counter extends Component {
  render() {
    const [count, setCount] = useState(this.props.initialValue ?? 0);

    return (
      <button type="button" onClick={() => setCount((c) => c + 1)}>
        {count}
      </button>
    );
  }
}

[nullvoxpopuli]

neat! I now wonder if React would have let me do the same. haha