Add useCallback

Author: breadthe

src/routes/(hooks)/useCallback/+page.svelte

@@ -0,0 +1,2 @@
+<script>
+</script>

src/routes/(hooks)/useCallback/+page.ts

@@ -0,0 +1,9 @@
+import type { PageLoad } from "./$types"
+
+export const load = (async ({ params }) => {
+    return {
+        title: "useCallback",
+        react: (await import("./react.jsx?raw")).default,
+        svelte: (await import("./svelte.svelte?raw")).default,
+    }
+}) satisfies PageLoad

src/routes/(hooks)/useCallback/react.jsx

@@ -0,0 +1,8 @@
+// This function (component) is executed on every render
+function Component() {
+    // this event handler is redefined on every render
+    const handleClick = () => alert("hello")
+
+    // because `handleClick` is redefined on every render, `ChildComponent` will be re-rendered too. Because its `onClick` prop is considered changed.
+    return <ChildComponent onClick={handleClick} />
+}

src/routes/(hooks)/useCallback/svelte.svelte

@@ -0,0 +1,5 @@
+<script>
+    // In Svelte this isn't needed, because event handlers are declared inside <script> tags.
+    // They aren't defined in the render path and therefore aren't redefined on every render.
+    // They are defined once per component, so they work similar to how event handlers worked with React.Component.
+</script>

src/routes/+layout.svelte

@@ -12,6 +12,7 @@
 	let tile3Url = "/useMemo"
 	let tile4Url = "/useRef"
 	let tile5Url = "/useReducer"
+	let tile6Url = "/useCallback"
 </script>
 
 <!-- App Shell -->
@@ -88,6 +89,14 @@
 					href={tile5Url}
 					class={tile5Url === $page.url.pathname ? "bg-primary-500" : ""}><Icon icon="code" /></AppRailTile
 				>
+				<AppRailTile
+					label="useCallback"
+					title="useCallback"
+					value={5}
+					tag="a"
+					href={tile6Url}
+					class={tile6Url === $page.url.pathname ? "bg-primary-500" : ""}><Icon icon="code" /></AppRailTile
+				>
 			</svelte:fragment>
 
 			<svelte:fragment slot="trail">