Signals are another way of managing application state. <\/p>\n
You might ask, “well great but we already have hooks like useState<\/em> so what’s the point?”<\/p>\n In answer to the above perfectly valid question, Signals work on a in a more granular way – let’s compare to useState<\/em>. If we create a simple little (and pretty standard) counter component we can immediately see the differences.<\/p>\n Create yourself a React application, I’m using yarn but use your preferred package manager.<\/p>\n Add the signal package using<\/p>\n Now we’ll create a folder named components<\/em> and add a file named CounterState.tsx<\/em> which looks like this<\/p>\n It’s not very pretty but it’s good enough for this demonstration. <\/p>\n Finally create a new file in the components<\/em> folder named CounterSignals.tsx which should look like this<\/p>\n As you can see, the Signals code creates a Signals object instead of the destructuring way used with useState<\/em> and the Signals object will not change, but when we change the value<\/em>, the value within the object changes but does not re-rendering the entire component each time.<\/p>\n Let’s see this by watching the console output in our preferred browser, so just change App.tsx<\/em> to look like this<\/p>\n import React from ‘react’; function App() { ); export default App; Start the application. You might wish to disable React.StrictMode<\/em> in the index.tsx<\/em> as this will double up the console output whilst in DEV mode.<\/p>\n Click the Increment and Decrement buttons and you’ll see our useState<\/em> implementation renders on each click whereas the counter changes for the Signals version but no re-rendering happens.<\/p>\n\r\nyarn create react-app react-with-signals --template typescript\r\n<\/pre>\n
\r\nyarn add @preact\/signals-react\r\n<\/pre>\n
\r\nimport { useState } from "react";\r\n\r\nexport const CounterState = () => {\r\n const [count, setCount] = useState(0);\r\n\r\n console.log("Render CounterState");\r\n\r\n return (\r\n <div>\r\n <div>Current Value {count}<\/div>\r\n <div>\r\n <button onClick={() => setCount(count - 1)}>Decrement<\/button>\r\n <button onClick={() => setCount(count + 1)}>Increment<\/button>\r\n <\/div>\r\n <\/div>\r\n );\r\n}\r\n<\/pre>\n\r\nimport React from 'react';\r\nimport { useSignal } from "@preact\/signals-react";\r\n\r\nexport const CounterSignals = () => {\r\n const count = useSignal(0);\r\n\r\n console.log("Render CounterSignals");\r\n\r\n return (\r\n <div>\r\n <div>Current Value {count}<\/div>\r\n <div>\r\n <button onClick={() => count.value--}>Decrement<\/button>\r\n <button onClick={() => count.value++}>Increment<\/button>\r\n <\/div>\r\n <\/div>\r\n );\r\n}\r\n<\/pre>\n
\nimport { CounterState } from ‘.\/components\/CounterState’;
\nimport { CounterSignals } from ‘.\/components\/CounterSignals’;<\/p>\n
\n return (<\/p>\n
\n
\n}<\/p>\n
\n[\/em]<\/p>\n