Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Creating a empty signal and updating it make the application stop re-rendering #419

Open
fbzz opened this issue Sep 26, 2023 · 4 comments
Open

Comments

@fbzz
Copy link

fbzz commented Sep 26, 2023

So using react with vite, we can even use the example from preact, the first update will work, and after that it will stop

import { signal, computed } from "@preact/signals-react";


const todos = signal([
]);

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 TodoList() {
  const onInput = event => (newItem.value = event.target.value);

  return (
    <>
      <input type="text" value={newItem.value} onInput={onInput} />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.value.map((todo, index) => {
          return (
            <li>
              <input
                type="checkbox"
                checked={todo.completed}
                onInput={() => {
                  todo.completed = !todo.completed
                  todos.value = [...todos.value];
                }}
              />
              {todo.completed ? <s>{todo.text}</s> : todo.text}{' '}
              <button onClick={() => removeTodo(index)}>❌</button>
            </li>
          );
        })}
      </ul>
      <p>Completed count: {completedCount.value}</p>
    </>
  );
}

@fbzz fbzz changed the title Creating a empty signals and updating it make the application stop re-rendering Creating a empty signal and updating it make the application stop re-rendering Sep 26, 2023
@monaye
Copy link

monaye commented Nov 2, 2023

since you are modifying the original array with the splice, I think signal will trigger the re-render. can you try remove the todos.value = [...todos.value]? or try with toSpliced.

@namtv95
Copy link

namtv95 commented Dec 1, 2023

Same issue here, when you init signal with an empty array

  1. With useSignal([]) syntax, it cannot update value, it shows "Cannot read properties of undefined (reading 'length')" error
  2. With signal([]), it only updates at first time, at second time it won't work

@XantreDev
Copy link
Contributor

Can you provide stackblitz repro to check?

@XantreDev
Copy link
Contributor

Btw, you should not mutate values of signals. Signals doesn't reacting on mutations. Use .toSpliced

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants