I think I forgot that memo is from "preact/compat". I just added it in. Available in latest repo now. I also modified your memo sample code slightly to be compatible with OneJS/UI Toolkit: ```tsx import { h, render } from "preact" import { memo } from "preact/compat" import { signal, computed } from "preact/signals" const todos = signal([ { text: "Write my first post", completed: true }, { text: "Buy new groceries", completed: false }, { text: "Walk the dog", completed: false }, ]); const completedCount = computed(() => { return todos.value.filter(todo => todo.completed).length }); const newItem = signal("") function addTodo() { todos.value = [...todos.value, { text: newItem.value, completed: false }] newItem.value = "" // Reset input value on add } function removeTodo(index) { todos.value.splice(index, 1) todos.value = [...todos.value] } function areEqual(prevProps, nextProps) { if (prevProps.todo.completed !== nextProps.todo.completed) { return false } if (prevProps.todo.text !== nextProps.todo.text) { return false } if (prevProps.index !== nextProps.index) { return false } return true } const TodoItem = memo(({ todo, index }) => { // log(todo.text); // should only be called for new/changed elements const onCheckboxChange = (event) => { const newTodo = { ...todo, completed: event.target.value } todos.value = [ ...todos.value.slice(0, index), newTodo, ...todos.value.slice(index + 1), ] } return (

{todo.completed ? ~~{todo.text}~~ : todo.text}{" "}

) }, areEqual) function TodoList() { const onInput = event => (newItem.value = event.target.value); const elements = todos.value.map((todo, index) => ( )) return (

{elements}

{`Completed count: ${completedCount.value}`}

) } render(, document.body) ```

I feel their pain though, trying to mesh well between a static and a dynamic language

Similar Threads