Skip to content

Using template refs makes root component rerender #8733

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

Open
sawmurai opened this issue Jul 6, 2023 · 2 comments
Open

Using template refs makes root component rerender #8733

sawmurai opened this issue Jul 6, 2023 · 2 comments
Labels
has workaround A workaround has been found to avoid the problem 🔩 p2-edge-case

Comments

@sawmurai
Copy link

sawmurai commented Jul 6, 2023

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNqVVU1zmzAQ/SuqLsYzNnSSnqiTps340B7aTNqblQOBta1ESIwkiGcY/ntXEmDsNv3wwUK7j7cfWj1a+rGq4qYGmtKVyTWvLBGZ3F0xag2j10zyslLakpbsF6SALZdwq9AkQdoF0bAlHdlqVZIZksxGuMMEO6Nx4nYuCKPvmWQSDh6DbFkt/DpljVomCTFg6yqaE78hJFfSWGL26mVdcEuuXORomwkDc095xFi12wnoUdE8JY3iBbm6HpiQumeJm0zUgKg3pxYkdLBuJNaYi5ZI5mnIwOPiKQGxULuI0XvQIAvQBBvKqMsqoIa1J9lHs4I3swXZDA7ibDI7s3nrY22tkuholbwVPH9OJ+V1iEeMqTI5my/IzJe8PmRlJWD2MF8cuU42cRxHZx344IlCWp5GaYJh5w8kJZuTl0fYPnLnNT/6HoaKO7fgX+cMqyTMFM4RoQsahmNZZlX8ZJTEmfOHwnoHDlw6HBOjfl5SfNhbW5k0SfJC4msFCN7oWIJNZFUmNwhLdC0tL2FZqPLmMr6M3yUFN3ZqjsGUy0etXgxoJGG0T9yHSdDYgF6GAwT9r2HPXpuGPnP9En5oEjbFGhykLd+dtSTH/nIB+ltlOQ7aSWsyIdTLF2+zuoaxlnwP+fNv7E/mEGq60+Azm9RvM70DG9zr71/hgM+js1RFLfpjeMV5D3gJapdjgH2qZYFpT3A+28/+hLnc/TDrgwVphqJcor4bHu/Pw43Wa6Uf08VuT7o4SMxEx7yETBXsXK1wQCdyddF7glxdODKHYDLoCrdQml54Ni2XEnRK3i7wFr62wSvhbn8gmApFriGz4IMGpZhcE9xgoEogwF0a/K1CcqlPAHXZr4wm6F4lI7ZvgU/7P3swVFhpVbkKgx7fuV20GeP5C95LbB/0HrlCQ4II/6HOi78UukJZGep1iuZY3TfoGIlR0iy3SvcdIFyGI8GPVNu6p9h3vuswBhL47gTS0z51PwGWu0fM

Steps to reproduce

  1. Open the devtools to see the log
  2. Click the "Edit Example" button
  3. See that you have two times the log message for "Rerender App"

What is expected?

The root app is rerendered once

What is actually happening?

The root app is rerenderd twice

System Info

System:
    OS: macOS 13.4
    CPU: (10) arm64 Apple M1 Pro
    Memory: 332.44 MB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - /opt/homebrew/bin/npm
    pnpm: 8.3.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 114.0.5735.198
    Safari: 16.5

Any additional comments?

When you edit Comp2.vue and remove the template ref, the rerender of the root-app does not happen anymore.

@edison1105
Copy link
Member

edison1105 commented Nov 6, 2024

The underlying problem is that the following line has side effects.

isArray(existing) && remove(existing, refValue)

a workaround:

const templateRef = shallowRef() // use shallowRef instead of ref

Similar to #7754

@edison1105 edison1105 added has workaround A workaround has been found to avoid the problem 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. 🔩 p2-edge-case and removed 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Nov 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
has workaround A workaround has been found to avoid the problem 🔩 p2-edge-case
Projects
None yet
Development

No branches or pull requests

3 participants