does @preact/signals-react v2 supports class component?

77 Views Asked by At

in the docs of signals react integration https://github.com/preactjs/signals/blob/main/packages/react/README.md#react-integration

it only mentioned integration with functional components

and I tried render a signal value in a class component, but it isn't reactive at all.

/* 
"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "@preact/signals-react": "^2.0.0",
    "@preact/signals-react-transform": "^0.3.0",
}
*/
import React from "react";
import { createRoot } from "react-dom/client";
import { signal } from "@preact/signals-react";
const count = signal(0);
// never re-render
class CountClass extends React.Component {
  render() {
    return (
      <h1
        onClick={() => {
          count.value = Math.random();
        }}
      >
        title{count.value}
      </h1>
    );
  }
}
// can re-render
const CountFunc = () => {
  return (
    <h1
      onClick={() => {
        count.value = Math.random();
      }}
    >
      title{count.value}
    </h1>
  );
};

const App = () => {
  return (
    <div>
      <CountClass />
      <CountFunc />
    </div>
  )
}

createRoot(document.querySelector("#root")).render(<App />);

and I tried to use babel to transform the code above, the output of the class component part doesn't have any signal-related transform

//...
const count = (0, _signalsReact.signal)(0);
// never re-render
class CountClass extends _react.default.Component {
  render() {
    return /*#__PURE__*/_react.default.createElement("h1", {
      onClick: () => {
        count.value = Math.random();
      }
    }, "title", count.value);
  }
}
// can re-render
const CountFunc = () => {
  var _effect = (0, _runtime.useSignals)(1);
  try {
    return /*#__PURE__*/_react.default.createElement("h1", {
      onClick: () => {
        count.value = Math.random();
      }
    }, "title", count.value);
  } finally {
    _effect.f();
  }
};
//...
0

There are 0 best solutions below