Reputation: 4337
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();
}
};
//...
Upvotes: 0
Views: 195