Merge pull request #493 from preactjs/docs/use-signal-effect

docs: Add mention of `useSignalEffect` hook in integration readmes
preactjs · Jan 8, 2024 · 34c8752 · 34c8752
2 parents 192dbd9 + b373986
commit 34c8752
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/packages/preact/README.md b/packages/preact/README.md
@@ -51,15 +51,19 @@ function CounterValue() {
 
 ### Hooks
 
-If you need to instantiate new signals inside your components, you can use the `useSignal` or `useComputed` hook.
+If 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.
 
 ```js
-import { useSignal, useComputed } from "@preact/signals";
+import { useSignal, useComputed, useSignalEffect } from "@preact/signals";
 
 function Counter() {
 	const count = useSignal(0);
 	const double = useComputed(() => count.value * 2);
 
+	useSignalEffect(() => {
+		console.log(`Value: ${count.value}, value x 2 = ${double.value}`);
+	});
+
 	return (
 		<button onClick={() => count.value++}>
 			Value: {count.value}, value x 2 = {double.value}

diff --git a/packages/react/README.md b/packages/react/README.md
@@ -77,15 +77,19 @@ function CounterValue() {
 
 ### Hooks
 
-If you need to instantiate new signals inside your components, you can use the `useSignal` or `useComputed` hook.
+If 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.
 
 ```js
-import { useSignal, useComputed } from "@preact/signals-react";
+import { useSignal, useComputed, useSignalEffect } from "@preact/signals-react";
 
 function Counter() {
 	const count = useSignal(0);
 	const double = useComputed(() => count.value * 2);
 
+	useSignalEffect(() => {
+		console.log(`Value: ${count.value}, value x 2 = ${double.value}`);
+	});
+
 	return (
 		<button onClick={() => count.value++}>
 			Value: {count.value}, value x 2 = {double.value}