1---
2title: Use shallowRef for Dynamic Component References
3impact: MEDIUM
4impactDescription: Storing components in reactive() or ref() triggers Vue warnings and can cause performance issues
5type: gotcha
6tags: [typescript, shallowRef, dynamic-components, reactivity, performance]
7---
8 
9# Use shallowRef for Dynamic Component References
10 
11**Impact: MEDIUM** - When storing Vue components in reactive state for dynamic rendering, using `ref()` or `reactive()` causes Vue warnings and unnecessary reactivity overhead. Use `shallowRef()` instead.
12 
13## Task Checklist
14 
15- [ ] Use `shallowRef` for storing component references
16- [ ] Use `markRaw` when storing components in reactive objects
17- [ ] Avoid wrapping component definitions with deep reactivity
18- [ ] Check console for "[Vue warn]: Vue received a Component that was made a reactive object"
19 
20## The Problem
21 
22Vue components are objects with internal properties that should not be made reactive. When you store a component in `ref()` or `reactive()`, Vue traverses all properties deeply, which:
23 
241. Triggers a console warning
252. Creates unnecessary reactive proxies
263. Can cause subtle bugs with component identity
274. Impacts performance
28 
29**Incorrect - Using ref() for components:**
30```typescript
31import { ref } from 'vue'
32import ComponentA from './ComponentA.vue'
33import ComponentB from './ComponentB.vue'
34 
35// BAD: Vue will warn about making component reactive
36const currentComponent = ref(ComponentA)
37 
38function switchComponent() {
39  currentComponent.value = ComponentB
40}
41```
42 
43**Console warning:**
44```
45[Vue warn]: Vue received a Component that was made a reactive object.
46This can lead to unnecessary performance overhead and should be avoided
47by marking the component with `markRaw` or using `shallowRef` instead of `ref`.
48```
49 
50## Solution 1: Use shallowRef
51 
52`shallowRef` only makes the `.value` reference reactive, not the contents:
53 
54```typescript
55import { shallowRef, type Component } from 'vue'
56import ComponentA from './ComponentA.vue'
57import ComponentB from './ComponentB.vue'
58 
59// CORRECT: shallowRef doesn't deep-proxy the component
60const currentComponent = shallowRef<Component>(ComponentA)
61 
62function switchComponent() {
63  currentComponent.value = ComponentB
64}
65```
66 
67```vue
68<template>
69  <component :is="currentComponent" />
70</template>
71```
72 
73## Solution 2: Use markRaw in Reactive Objects
74 
75When components are part of a larger reactive object:
76 
77```typescript
78import { reactive, markRaw, type Component } from 'vue'
79import TabHome from './TabHome.vue'
80import TabProfile from './TabProfile.vue'
81import TabSettings from './TabSettings.vue'
82 
83interface Tab {
84  name: string
85  component: Component
86}
87 
88// CORRECT: markRaw prevents reactivity on component objects
89const tabs = reactive<Tab[]>([
90  { name: 'Home', component: markRaw(TabHome) },
91  { name: 'Profile', component: markRaw(TabProfile) },
92  { name: 'Settings', component: markRaw(TabSettings) }
93])
94 
95const activeTab = shallowRef<Tab>(tabs[0])
96```
97 
98```vue
99<template>
100  <div class="tabs">
101    <button
102      v-for="tab in tabs"
103      :key="tab.name"
104      @click="activeTab = tab"
105    >
106      {{ tab.name }}
107    </button>
108  </div>
109  <component :is="activeTab.component" />
110</template>
111```
112 
113## TypeScript Typing
114 
115For proper TypeScript support with dynamic components:
116 
117```typescript
118import { shallowRef, type Component, type DefineComponent } from 'vue'
119 
120// Generic component type
121const currentComponent = shallowRef<Component | null>(null)
122 
123// Or more specific with props
124interface MyComponentProps {
125  title: string
126}
127 
128const currentComponent = shallowRef<DefineComponent<MyComponentProps> | null>(null)
129```
130 
131## Dynamic Import with shallowRef
132 
133When using dynamic imports for code splitting:
134 
135```typescript
136import { shallowRef, defineAsyncComponent, type Component } from 'vue'
137 
138const currentComponent = shallowRef<Component | null>(null)
139 
140async function loadComponent(name: string) {
141  const component = defineAsyncComponent(
142    () => import(`./components/${name}.vue`)
143  )
144  currentComponent.value = component
145}
146```
147 
148## Component Registry Pattern
149 
150For tab systems or wizard-like interfaces:
151 
152```typescript
153import { shallowRef, markRaw, type Component } from 'vue'
154 
155// Type-safe component registry
156const componentRegistry = {
157  home: markRaw(defineAsyncComponent(() => import('./Home.vue'))),
158  about: markRaw(defineAsyncComponent(() => import('./About.vue'))),
159  contact: markRaw(defineAsyncComponent(() => import('./Contact.vue')))
160} as const
161 
162type ComponentKey = keyof typeof componentRegistry
163 
164const currentView = shallowRef<ComponentKey>('home')
165 
166// Computed to get current component
167const currentComponent = computed(() => componentRegistry[currentView.value])
168```
169 
170```vue
171<template>
172  <component :is="currentComponent" />
173</template>
174```
175 
176## When to Use Each Approach
177 
178| Scenario | Solution |
179|----------|----------|
180| Single dynamic component reference | `shallowRef` |
181| Component in reactive array/object | `markRaw` on component |
182| Component map/registry | `markRaw` each component |
183| Async components | `defineAsyncComponent` + `shallowRef` |
184 
185## Common Mistakes
186 
187### Mistake 1: Using computed with ref
188 
189```typescript
190// BAD: Still triggers warning
191const components = ref([ComponentA, ComponentB])
192const current = computed(() => components.value[index.value])
193 
194// GOOD: Use shallowRef for the array
195const components = shallowRef([ComponentA, ComponentB])
196```
197 
198### Mistake 2: Forgetting markRaw in map
199 
200```typescript
201// BAD: Components in map become reactive
202const routes = reactive(new Map([
203  ['home', HomeComponent],
204  ['about', AboutComponent]
205]))
206 
207// GOOD: Mark each component as raw
208const routes = reactive(new Map([
209  ['home', markRaw(HomeComponent)],
210  ['about', markRaw(AboutComponent)]
211]))
212```
213 
214## Reference
215 
216- [Vue.js Reactivity in Depth - Reducing Reactivity Overhead](https://vuejs.org/guide/extras/reactivity-in-depth.html#reducing-reactivity-overhead-for-large-immutable-structures)
217- [Vue.js API - shallowRef](https://vuejs.org/api/reactivity-advanced.html#shallowref)
218- [Vue.js API - markRaw](https://vuejs.org/api/reactivity-advanced.html#markraw)
219