refactor(www): use useSignal() instead of useState() (#2894)

Author: iuioiua

docs/latest/examples/client-side-components-and-libraries.md

@@ -53,7 +53,7 @@ function LeafletProvider(props: { children: ComponentChildren }) {
       <p>Leaflet must be loaded on the client. No children will render</p>
     );
   }
-  const [value, setValue] = useState<typeof Leaflet | null>(null);
+  const value = useSignal<typeof Leaflet | null>(null)
   return (
     <>
       {/* Load Leaflet CSS */}
@@ -65,7 +65,7 @@ function LeafletProvider(props: { children: ComponentChildren }) {
       />
       {/* Load Leaflet JS */}
       <script
-        onLoad={() => setValue(window.L)}
+        onLoad={() => value.value = window.L}
         src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
         integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
         crossorigin=""
@@ -120,8 +120,9 @@ export default function MapIsland() {
 ```tsx MapIsland.tsx
 import * as Leaflet from "https://esm.sh/v135/@types/leaflet@1.9.4/index.d.ts";
 import { IS_BROWSER } from "$fresh/runtime.ts";
-import { useContext, useEffect, useState } from "preact/hooks";
+import { useContext, useEffect } from "preact/hooks";
 import { ComponentChildren, createContext } from "preact";
+import { useSignal } from "@preact/signals";
 
 // Create a context to hold Leaflet data/functions
 const LeafletContext = createContext<typeof Leaflet | null>(null);
@@ -131,7 +132,7 @@ function LeafletProvider(props: { children: ComponentChildren }) {
   if (!IS_BROWSER) {
     return <p>Leaflet must be loaded on the client. No children will render</p>;
   }
-  const [value, setValue] = useState<typeof Leaflet | null>(null);
+  const value = useSignal<typeof Leaflet | null>(null);
   return (
     <>
       {/* Load Leaflet CSS */}
@@ -143,7 +144,7 @@ function LeafletProvider(props: { children: ComponentChildren }) {
       />
       {/* Load Leaflet JS */}
       <script
-        onLoad={() => setValue(window.L)}
+        onLoad={() => value.value = window.L}
         src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
         integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
         crossorigin=""

www/islands/TableOfContents.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useRef, useState } from "preact/hooks";
+import { useEffect, useRef } from "preact/hooks";
 import type { MarkdownHeading } from "../utils/markdown.ts";
+import { useSignal } from "@preact/signals";
 
 export interface TableOfContentsProps {
   headings: MarkdownHeading[];
@@ -33,7 +34,7 @@ function setActiveLink(
 export function TableOfContents({ headings }: TableOfContentsProps) {
   const ref = useRef<HTMLDivElement>(null);
   const refMarker = useRef<HTMLDivElement>(null);
-  const [isOpen, setIsOpen] = useState(false);
+  const isOpen = useSignal(false);
 
   useEffect(() => {
     if (!ref.current) return;
@@ -105,7 +106,7 @@ export function TableOfContents({ headings }: TableOfContentsProps) {
             <button
               type="button"
               id="toc-outline-btn"
-              onClick={() => setIsOpen((v) => !v)}
+              onClick={() => isOpen.value = !isOpen.value}
               class="bg-background-primary py-2 px-4 rounded border border-foreground-secondary/30 flex items-center hover:border-fresh-green/80 transition-colors text-sm"
             >
               On this page

www/islands/ThemeToggle.tsx

@@ -1,19 +1,15 @@
-import { useState } from "preact/hooks";
 import { IS_BROWSER } from "fresh/runtime";
+import { useSignal } from "@preact/signals";
 
 export default function ThemeToggle() {
-  const [theme, setTheme] = useState(() => {
-    if (!IS_BROWSER) return "light";
-    return document.documentElement.dataset.theme ?? "light";
-  });
+  const theme = useSignal(
+    !IS_BROWSER ? "light" : document.documentElement.dataset.theme ?? "light",
+  );
 
   const toggleTheme = () => {
-    setTheme((prev) => {
-      const theme = prev === "light" ? "dark" : "light";
-      document.documentElement.setAttribute("data-theme", theme);
-      localStorage.setItem("theme", theme);
-      return theme;
-    });
+    theme.value = theme.value === "light" ? "dark" : "light";
+    document.documentElement.setAttribute("data-theme", theme.value);
+    localStorage.setItem("theme", theme.value);
   };
 
   return (
@@ -23,7 +19,7 @@ export default function ThemeToggle() {
       class="dark-mode-toggle button p-1 -m-1"
       aria-label="Toggle Theme"
     >
-      {theme === "light"
+      {theme.value === "light"
         ? (
           <svg
             class="fill-foreground-primary hover:fill-fresh w-6 h-6"