fixing line recalc

Author: grantnelson-wf

playground/internal/react/bindings.go

@@ -242,3 +242,12 @@ func UseEffect(effect func(), deps []any) {
 func UseEffectWithCleanup(effect func() func(), deps ...any) {
 	react().Call(`useEffect`, effect, deps)
 }
+
+// UseMemo memoizes the result of a computation function.
+// The computation is only re-run when any of the dependencies change.
+//
+// See: https://react.dev/reference/react/useMemo
+func UseMemo[T any](compute func() T, deps []any) T {
+	r := react().Call(`useMemo`, compute, deps)
+	return r.Interface().(T)
+}

playground/internal/react/codeBox.go

@@ -25,12 +25,22 @@ func codeBoxComponent(props Props) *Element {
 		textAreaRef: UseRef(),
 		lineNumsRef: UseRef(),
 	}
+
 	lineCount := strings.Count(cba.curCode, "\n") + 1
+	lineNumbers := UseMemo(func() string {
+		return getLineNumbers(lineCount)
+	}, []any{lineCount})
 
 	return Div(Props{
 		`id`: `code-box`,
 	},
-		codeLineBox(lineCount, cba.lineNumsRef),
+		TextArea(Props{
+			`id`:       `line-nums`,
+			`ref`:      cba.lineNumsRef,
+			`value`:    lineNumbers,
+			`readOnly`: true,
+			`disable`:  `true`,
+		}),
 		TextArea(Props{
 			`id`:             `code`,
 			`ref`:            cba.textAreaRef,
@@ -47,36 +57,6 @@ func codeBoxComponent(props Props) *Element {
 	)
 }
 
-func codeLineBox(lineCount int, ref *Ref) *Element {
-	return CreateElement(codeLineBoxComponent, Props{
-		`lineCount`: lineCount,
-		`ref`:       ref,
-	})
-}
-
-func codeLineBoxComponent(props Props) *Element {
-	lineCount := int(As[float64](props, `lineCount`))
-	ref := props[`ref`]
-
-	var sb strings.Builder
-	for i := 1; i <= lineCount; i++ {
-		sb.WriteString(strconv.Itoa(i))
-		if i < lineCount {
-			sb.WriteString("\n")
-		}
-	}
-
-	print(lineCount) // TODO(grantnelson-wf): Remove
-
-	return TextArea(Props{
-		`id`:       `line-nums`,
-		`ref`:      ref,
-		`value`:    sb.String(),
-		`readOnly`: true,
-		`disable`:  `true`,
-	})
-}
-
 type codeBoxAssistant struct {
 	curCode     string
 	setCode     func(any)
@@ -318,6 +298,17 @@ func (cba *codeBoxAssistant) findMatchingOpeningBrace(caret int) int {
 	return -1
 }
 
+func getLineNumbers(lineCount int) string {
+	var sb strings.Builder
+	for i := 1; i <= lineCount; i++ {
+		sb.WriteString(strconv.Itoa(i))
+		if i < lineCount {
+			sb.WriteString("\n")
+		}
+	}
+	return sb.String()
+}
+
 func (cba *codeBoxAssistant) getSelection() (int, int) {
 	start := cba.textAreaRef.Get(`selectionStart`).Int()
 	end := cba.textAreaRef.Get(`selectionEnd`).Int()