For component doesn't rerender children when parent values change

[vpzomtrrfrt]

• Check if updating to the latest version resolves the issue

Environment

• I am using @preact/signals-core
• I am using @preact/signals
• I am using @preact/signals-react
  • I understand usage changed in v2, and I've followed the React Integration instructions

Describe the bug
<For> only renders once for each value in the list, which causes issues when its children reference non-signal values from the parent scope

To Reproduce
Please provide a link to a StackBlitz/CodeSandbox/Codepen project or a GitHub repository that demonstrates the issue.

Steps to reproduce the behavior:

1. Go to https://codesandbox.io/p/sandbox/vz46dt
2. Click "Add Item". A random number should appear in the list.
3. Check "Show Details". Nothing happens.
4. Click "Add Item" again. The new number shows a timestamp.

Expected behavior
I expect checking the "Show Details" box to update the existing list items to show timestamps. Or if this is intentional behaviour, it should at least be mentioned in the documentation

[JoviDeCroock]

While I see what you want to say, a lot of this is trying to dodge the fine-grained reactivity paradigm, rather than using state and passing that down why aren't you using a signal and component?

function App() {
  const showDetails = useSignal(false);

  const onChangeShowDetails = useCallback((evt) => {
    showDetails.value = evt.currentTarget.checked;
  }, []);

  const listSig = useSignal([]);

  const addItem = useCallback(() => {
    listSig.value = [
      ...listSig.value,
      { id: Math.random().toString(), createdAt: new Date() },
    ];
  }, [listSig]);

  return (
    <div>
      <div>
        <label>
          <input
            type="checkbox"
            checked={showDetails}
            onChange={onChangeShowDetails}
          />
          Show Details
        </label>
      </div>
      <div>
        <button onClick={addItem}>Add Item</button>
      </div>
      <ul>
        <For each={listSig}>
          {(item) => {
            return (
               <Item item={item} showDetails={showDetails} />
            );
          }}
        </For>
      </ul>
    </div>
  );
}

function Item({item,showDetails}) {
 return (
    <li>
      {item.id}
      {showDetails.value && (
        <Fragment> - {item.createdAt.toLocaleString()}</Fragment>
      )}
    </li>
  )
}

You can even go further and now use the Show component to even push down rendering further

[vpzomtrrfrt]

It's a bit of a contrived example, but any reference to props would also trigger this. Maybe a lint rule could check for it, as well as the similar case in #753?

[developit]

Yeah this one is tricky: I think a lint rule might be nice, but I suspect that may be all we can do. The second we open For/Show up to re-rendering in response to non-signal changes in any way, they lose their value.