search

vuejs / babel-plugin-jsx

JSX for Vue 3
https://vue-jsx-explorer.netlify.app
MIT License
1.7k stars 143 forks source link

When JSX is used, v-slots cause child component does unnecessary rendering during parent component re-rendering #712

Open yuwu9145 opened 1 month ago

yuwu9145 commented 1 month ago

Vue version

3.4.21

Link to minimal reproduction

https://github.com/yuwu9145/vue-jsx-slot-demo

Steps to reproduce

  1. Load and run the project
  2. Type something in the input to trigger parent App component render function
  3. Check console logs
  4. Then go to src/App.tsx and comment out line 20
  5. Type something again
  6. Check console logs again, see the different results

What is expected?

Only parent App component's onUpdated hook should be triggered, child Test component should not be re-rendered as nothing is changed to trigger child Test render function

What is actually happening?

Both parent App and child Test components are re-rendered

System Info

System:
    OS: macOS 14.2.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 114.45 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    Yarn: 1.19.0 - ~/.nvm/versions/node/v18.19.0/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
  Browsers:
    Chrome: 125.0.6422.141
    Firefox: 124.0.2
    Safari: 17.2.1
  npmPackages:
    vue: ^3.4.27 => 3.4.21

Any additional comments?

No response

uke5tar commented 1 month ago

Hi folks, Is there an expected timeline for resolving this issue? I am waiting eagerly for a fix here because it affects the linked rendering of VTreeview in Vuetify quite significantly. No intend to pressure - just curious as it would affect my planning in a work-around. Thank you!

TheInvoker commented 1 month ago

+1 same for me, same boat