Vue 3 - How to prevent re-rendering of child components on parent state change?
I'm dealing with After trying multiple solutions online, I still can't figure this out. I'm experiencing unnecessary re-renders of my child components whenever I update the state in the parent component. I’m using Vue 3 with the Composition API. Here’s a simplified version of my code: ```javascript import { defineComponent, ref } from 'vue'; const ParentComponent = defineComponent({ setup() { const parentState = ref(0); const increment = () => { parentState.value++; }; return { parentState, increment }; }, template: ` <div> <button @click="increment">Increment</button> <ChildComponent :value="parentState" /> </div> ` }); const ChildComponent = defineComponent({ props: { value: Number }, template: `<div>Value: {{ value }}</div>` }); ``` When I click the increment button in `ParentComponent`, I notice that `ChildComponent` re-renders even though the `value` prop hasn’t fundamentally changed in terms of its internal logic. I expect it to only update when the actual data that `ChildComponent` uses changes, but it seems like it’s re-rendering on every state change in the parent, leading to performance issues. I’ve tried using `v-once` and `v-memo` directives in the child component but that didn't resolve the issue. Additionally, I’m utilizing the `shallowReactive` option in some parts of my application, but it doesn’t seem to help in this scenario. Is there a way to efficiently manage this without resorting to manual checks or deep cloning objects? Any suggestions on how to prevent unnecessary re-renders would be greatly appreciated! I'm working on a application that needs to handle this. I'd really appreciate any guidance on this. What's the correct way to implement this? Could this be a known issue?