[🐞] Spread Operator in Qwik Does Not Trigger Reactive Updates for Props

[yash-builder]

Which component is affected?

Qwik React

Describe the bug

In Qwik, when spreading an object ({...state.helloProps}) into a component's props, the UI does not update when the object properties change. The workaround requires forcing updates by using a unique key (e.g., JSON.stringify(state.helloProps)) to ensure the component re-renders.

This issue occurs because Qwik does not track object property changes inside the spread operator unless the reference itself changes.

Reproduction

https://qwik.dev/examples/introduction/hello-world/#f=7VZNS8NAEL33VwxFaAJhpRU8rEm9ePKgB%2F9AJZtKaLHiFwnL%2FnffzG7SJo3FSwTBU0OTTd6beTPvHYpmcTGomqT13JP6mXimHmzW0U9ICpbWu921bqKAO5IVJ4ElnsFOopwXLs7IWYU%2FXXou9yG1yaTtqcG2eo8qtLFj9xWfiK%2BaN1fkfibwkEjEDLKWd2ThWKCF4RMeDgvtiE1CNzWWbpm35qJDMRjwniTHKN8GvvJssR00pfIrI5FNeainvGM%2BEEYEj9pDkHIgd0jMOctsVHwmVGyFRTT0MLgUWyVvix1E4cNci6IJPZawP9FWTbP5S0WoZmkICzvfzBL4jTEgqmm%2BSJAwXp%2FKZ02X5NySgsZC52BMQn4Y9jiffoMzPhpKfcGtUqr%2FcaYd1D8igEj0WJj4EIrXaB%2BQNGJERJJJVpuiXtHtw%2F0dCsI6Ldf16SrhQGa7B34dOiYVGQI5jocfg%2BHxQj3fjUIfjb%2F4d6W%2F6kpf

Steps to reproduce

1. Run the provided Qwik component.
2. Type into the input field to update state.helloProps.foo.
3. Observe the different ways Hello receives props:

• The first spread case does not update.
• The spread (deopted) case works because of explicit access to the object.
• The with key JSON.stringify case works because it forces re-render.
• The explicit prop case works correctly.

System Info

System:
    OS: macOS 15.1.1
    CPU: (10) arm64 Apple M4
    Memory: 153.72 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v22.11.0/bin/yarn
    npm: 10.9.0 - ~/.nvm/versions/node/v22.11.0/bin/npm
    Watchman: 2024.12.02.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 134.0.6998.44
    Safari: 18.1.1
  npmPackages:
    @builder.io/qwik: ^1.12.0 => 1.12.0 
    @builder.io/qwik-city: ^1.12.0 => 1.12.0 
    @builder.io/sdk-qwik: link:builder/packages/sdks/output/qwik => 0.18.4 
    typescript: 5.4.5 => 5.4.5 
    undici: * => 7.3.0 
    vite: 5.3.5 => 5.3.5

Additional Information

Expected Behavior:

When spreading state.helloProps into <Hello {...state.helloProps} />, the component should update as soon as state.helloProps.foo changes.

[Varixo]

Should be fixed in v2:

https://qwikdev-build-v2.qwik-8nx.pages.dev/playground/#f=7VdNT4NAFLz3V7w0JoWEYKiJiSvUiycPevAP1LDUkDZi%2FApks%2F%2Fd2bfLFmglesBTTxBgYebtvDdDVzTLC8%2Bnq5rIe%2B5IKplZnhZq1lOPywmKNlV1I9ogoA9EZXLACs9gIlFuxi3W8NoYF3V6zvchtNnM76jErPoIamxiz%2BxrsyK8bt9ck%2F6dvF0eYSvIPOtAwa9AC63HPDTG2QGbiG4bjNwy99YiXDEM4D1Jn8X4zLLFbBCU8pEbIpublp6bCfOJKMJ44j0ELgdSB4ecs0wFxVdExY5ZBMceBpdiF%2FPbQg1J%2BJhnUbSRRxGmJ%2FQvaJG81oRqlpIwrvPtIoLbSAmigpJlhHzx9ly%2BCLokrVfkFOZ2DrbE5I%2FDnubT7%2FDFJ0mpLbiK43j4cUO7H3GnABCwHgsZdqFYjQ4B8UZMiIgTyXpbNGu6e3y4R0GMTstNM14lLMhUf8G%2FQ0enIkEgxZnmR2O4%2F5Wq%2BqkVhmjsyZgnJVedv66%2FeFJv7p0caQpH%2BgY

Please note that version 2 is in alpha phase

[yash-builder]

Thank you @Varixo

Could you please help me understand how this issue was fixed? Also, is there an alternative approach we could consider? Since Qwik plays a crucial role in our SDKs, I want to ensure we explore all possible solutions.

[wmertens]

@yash-builder I believe that the fix was that the v2 optimizer handles spread props way better now.

[Varixo]

Thank you @Varixo

Could you please help me understand how this issue was fixed? Also, is there an alternative approach we could consider? Since Qwik plays a crucial role in our SDKs, I want to ensure we explore all possible solutions.

As Wout said, this works in v2 because of fixes in the optimizer.
I think for now you need the workaround with key and forced rerender :/