From 71abdb2ee3f5bdb1e029c9f4266f4b797fa960f9 Mon Sep 17 00:00:00 2001
From: Sam Nystrom <sam@samnystrom.dev>
Date: Thu, 14 Mar 2024 00:10:12 +0000
Subject: fix: memoize stuff

---
 src/components/ButtonMenu.tsx  |  6 +++---
 src/components/nodes/Input.tsx | 19 ++++++++++---------
 2 files changed, 13 insertions(+), 12 deletions(-)

(limited to 'src/components')

diff --git a/src/components/ButtonMenu.tsx b/src/components/ButtonMenu.tsx
index 6a2b73e..f4427b3 100644
--- a/src/components/ButtonMenu.tsx
+++ b/src/components/ButtonMenu.tsx
@@ -1,5 +1,5 @@
 import type { ComponentChildren } from 'preact';
-import { useEffect, useRef, useId } from 'preact/hooks';
+import { useEffect, useCallback, useRef, useId } from 'preact/hooks';
 import { useSignal, batch } from '@preact/signals';
 import Button from './Button.tsx';
 import Menu from './Menu.tsx';
@@ -16,12 +16,12 @@ const ButtonMenu = ({ children, label }: ButtonMenuProps) => {
 	const x = useSignal(0);
 	const y = useSignal(0);
 
-	const updateRect = () => batch(() => {
+	const updateRect = useCallback(() => batch(() => {
 		const rect = ref.current?.getBoundingClientRect();
 		if (!rect) return;
 		x.value = rect.x;
 		y.value = rect.y + rect.height + 1;
-	});
+	}), []);
 	useEffect(updateRect, [ref.current]);
 
 	return (
diff --git a/src/components/nodes/Input.tsx b/src/components/nodes/Input.tsx
index 1160f3f..c32b32d 100644
--- a/src/components/nodes/Input.tsx
+++ b/src/components/nodes/Input.tsx
@@ -1,3 +1,4 @@
+import { useCallback } from 'preact/hooks';
 import { InputSocket } from '../../dataflow.ts';
 import { InSocket } from './Socket.tsx';
 import './Input.css';
@@ -37,9 +38,9 @@ export const InputArray = ({ name, label }: Omit<InputProps<any>, 'value'>) => {
 };
 
 const InputNum = (parseFunc: (string) => number) => ({ name, label, value }: InputProps<number>) => {
-	const onInput = (event: InputEvent) => {
+	const onInput = useCallback((event: InputEvent) => {
 		value.value = parseFunc((event.target as HTMLInputElement).value);
-	}
+	}, [value]);
 	return (
 		<Input class={'__InputNum' + (value.link.value ? ' linked' : '')}>
 			<InSocket name={name} />
@@ -53,20 +54,20 @@ export const InputInteger = InputNum(parseInt);
 export const InputNumber = InputNum(parseFloat);
 
 export const InputVector = ({ name, label, value }: InputProps<[number, number, number]>) => {
-	const onInput = (i: 0 | 1 | 2) => (event: InputEvent) => {
+	const onInput = useCallback((i: 0 | 1 | 2, event: InputEvent) => {
 		const newValue: [number, number, number] = [...value.value];
 		newValue[i] = parseFloat((event.target as HTMLInputElement).value);
 		value.value = newValue;
-	};
+	}, [value]);
 	return (
 		<Input class={'__InputVector' + (value.link.value ? ' linked' : '')}>
 			<div>
 				<InSocket name={name} />
 				{label}
 			</div>
-			<input type="number" value={value.value[0]} onInput={onInput(0)} />
-			<input type="number" value={value.value[1]} onInput={onInput(1)} />
-			<input type="number" value={value.value[2]} onInput={onInput(2)} />
+			<input type="number" value={value.value[0]} onInput={e => onInput(0, e)} />
+			<input type="number" value={value.value[1]} onInput={e => onInput(1, e)} />
+			<input type="number" value={value.value[2]} onInput={e => onInput(2, e)} />
 		</Input>
 	);
 };
@@ -76,9 +77,9 @@ export interface InputSelectProps extends InputProps<string> {
 }
 
 export const InputSelect = ({ name, label, value, options }: InputSelectProps) => {
-	const onChange = (event: InputEvent) => {
+	const onChange = useCallback((event: InputEvent) => {
 		value.value = (event.target as HTMLSelectElement).value;
-	}
+	}, [value]);
 	return (
 		<Input class={'__InputSelect' + (value.link.value ? ' linked' : '')}>
 			<InSocket name={name} />
-- 
cgit v1.2.3