31:T596,# React With Signals This notebook shows how to use React applications with [Preact Signals](https://preactjs.com/blog/introducing-signals/) ([GitHub](https://github.com/preactjs/signals)). The main idea is to use the "`@preact/signals-core`" package and wire it with React using this simple utility method: ```js function useSignals(compute = () => {}) { const f = typeof compute === "function" ? compute : () => compute.value; const [value, setValue] = React.useState(() => f()); React.useEffect(() => signals.effect(() => setValue(f())), []); return value; } ``` Usage: ```js const myMessage = signal("Hello, world!"); function MyComponent() { const msg = useSignals(() => myMessage.value); const updateMessage = (ev) => { myMessage.value = ev.target.value; } return (

{msg}

); } ... const elem = document.querySelector("div#my-app"); const root = ReactDOM.createRoot(elem); root.render(); ``` Interesting point is that we can interact with the same signals directly from Notebooks. This code transforms signals to generators: ```js function* observeSignals(signal) { const f = typeof signal === 'function' ? f : () => signal.value; yield* Generators.observe((notify) => signals.effect(() => notify(f()))); } ``` See the "Imports and Initialization" section below to see more details. 32:[] 2f:{"title":"React With Signals","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"## Example","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"render(jsx`<${MyComponent} />`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"Signal declaration:","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"myMessage = signals.signal(\"Hello world!\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"function MyComponent() {\n const msg = useSignals(() => myMessage.value);\n const updateMessage = (ev) => {\n myMessage.value = ev.target.value;\n };\n return jsx`

${msg}

\n \n

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"Note that in the example above we can use the signal directly as well:\n```js\nfunction MyComponent() {\n const msg = useSignals(myMessage);\n const updateMessage = (ev) => {\n myMessage.value = ev.target.value;\n };\n ...\n}\n```\nBut using functions is a more generic approach.\n","pinned":false,"hidden":false,"mode":"md"},{"id":108,"value":"## Usage in Notebooks","pinned":false,"hidden":false,"mode":"md"},{"id":89,"value":"We can use generators to observe signals:","pinned":false,"hidden":false,"mode":"md"},{"id":86,"value":"observeSignals(myMessage)","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"The same signal can be observed with modifications:","pinned":false,"hidden":false,"mode":"md"},{"id":101,"value":"observeSignals(() => (myMessage.value || \"\").toUpperCase())","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"We can bind an Observable Input (`viewof` instance) to a signal like that:","pinned":false,"hidden":false,"mode":"md"},{"id":149,"value":"inputSignals(Inputs.text({ label: \"Change signal with Inputs:\" }), myMessage)","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"## React Adapters","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"function useSignals(compute = () => {}) {\n const f = typeof compute === \"function\" ? compute : () => compute.value;\n const [value, setValue] = React.useState(f);\n React.useEffect(() => signals.effect(() => setValue(f())), []);\n return value;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"## Observable Adapters","pinned":false,"hidden":false,"mode":"md"},{"id":93,"value":"async function* observeSignals(signal) {\n const f = typeof signal === \"function\" ? signal : () => signal.value;\n yield* Generators.observe((notify) => signals.effect(() => notify(f())));\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"function inputSignals(input, signal) {\n const update = () => (input.value = signal.value);\n const cleanup = signals.effect(update);\n const listener = () => signal.value = input.value;\n input.addEventListener(\"input\", listener);\n Inputs.disposal(input).then(() => {\n input.removeEventListener(\"input\", listener);\n cleanup();\n });\n update();\n return input;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"## Imports and Initialization","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"function render(component) {\n const elem = document.createElement(\"div\");\n const root = ReactDOM.createRoot(elem);\n if (typeof component === \"function\") {\n component = React.createElement(component);\n }\n root.render(component);\n Inputs.disposal(elem).then(() => root.unmount());\n return elem;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"signals = import(\"@preact/signals-core\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"jsx = htm.bind(React.createElement)","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"htm = (await import(\"htm\")).default","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"React = require(\"react@latest/umd/react.development.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"ReactDOM = await require.alias({\n react: React\n})(\"react-dom@latest/umd/react-dom.development.js\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}