Value: {count.value}
;\n}\n```\n\n### Hooks\n\nIf you need to instantiate new signals or create new side effects on signal changes inside your components, you can use the `useSignal`, `useComputed` and `useSignalEffect` hooks.\n\n```js\nimport { useSignal, useComputed, useSignalEffect } from \"@preact/signals\";\n\nfunction Counter() {\n\tconst count = useSignal(0);\n\tconst double = useComputed(() => count.value * 2);\n\n\tuseSignalEffect(() => {\n\t\tconsole.log(`Value: ${count.value}, value x 2 = ${double.value}`);\n\t});\n\n\treturn (\n\t\t\n\t);\n}\n```\n\n### Rendering optimizations\n\nThe Preact adapter ships with several optimizations it can apply out of the box to skip virtual-dom rendering entirely. If you pass a signal directly into JSX, it will bind directly to the DOM `Text` node that is created and update that whenever the signal changes.\n\n```js\nimport { signal } from \"@preact/signals\";\n\nconst count = signal(0);\n\n// Unoptimized: Will trigger the surrounding\n// component to re-render\nfunction Counter() {\n\treturnValue: {count.value}
;\n}\n\n// Optimized: Will update the text node directly\nfunction Counter() {\n\treturnValue: {count}
;\n}\n```\n\nTo opt into this optimization, simply pass the signal directly instead of accessing the `.value` property.\n\n#### Attribute optimization (experimental)\n\nWe can also pass signals directly as an attribute to an HTML element node.\n\n```js\nimport { signal } from \"@preact/signals\";\n\nconst inputValue = signal(\"foobar\");\n\nfunction Person() {\n\treturn ;\n}\n```\n\nThis way we'll bypass checking the virtual-dom and update the DOM property directly.\n\n### Utility Components and Hooks\n\nThe `@preact/signals/utils` package provides additional utility components and hooks to make working with signals even easier.\n\n#### Show Component\n\nThe `Show` component provides a declarative way to conditionally render content based on a signal's value.\n\n```js\nimport { Show } from \"@preact/signals/utils\";\nimport { signal } from \"@preact/signals\";\n\nconst isVisible = signal(false);\n\nfunction App() {\n\treturn (\n\t\tNow you see me!
\n\t\tThe value is {value}
}