diff --git a/build/dev-server.js b/build/dev-server.js
index 29ccaef..0ae7c50 100644
--- a/build/dev-server.js
+++ b/build/dev-server.js
@@ -27,7 +27,7 @@ const bundleWrite = (bundle) => {
 }
 
 const startWatch = () => {
-	watch('src', (filename) => {
+	watch('src', {recursive: true}, (evt, filename) => {
 		console.log('[RD]', 'File changed:', filename)
 		rollup({
 			entry,
diff --git a/package-lock.json b/package-lock.json
index 4a7fac0..10a0fe9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "ef.js",
-  "version": "0.3.4-beta.1",
+  "version": "0.3.4-beta.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -777,9 +777,9 @@
       "dev": true
     },
     "eft-parser": {
-      "version": "0.5.8",
-      "resolved": "https://registry.npmjs.org/eft-parser/-/eft-parser-0.5.8.tgz",
-      "integrity": "sha1-bBOkD+0RalQRk10OOjy6teEsN+Y="
+      "version": "0.5.9",
+      "resolved": "https://registry.npmjs.org/eft-parser/-/eft-parser-0.5.9.tgz",
+      "integrity": "sha512-Mj6aPTo5rqwDQfaVrJU86stbVfnSMz1PAvaXaOMUg+2ZXdMXU8hacX1jqd5KX3Nzn32It7SjBjnna526+EQH6g=="
     },
     "emitter-steward": {
       "version": "1.0.0",
@@ -3641,9 +3641,9 @@
       }
     },
     "rollup": {
-      "version": "0.47.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.47.2.tgz",
-      "integrity": "sha512-UDu5SnCHDp3kT/dTuGoIHMqpH6Y0X5ZK9RIAYgWt2WIckC6KJZ0+rvOWsUMYM3JBANithJpqA4LzqVPejiPgqA==",
+      "version": "0.47.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.47.4.tgz",
+      "integrity": "sha512-inBVqr6CRcR+DaWQZncoUK6FGCpjf3ZymXLFW7rbwVM3+kJQ2tFY2nUdnkhbBczDY+Z06pFa7Vxwk5mKPc7IvQ==",
       "dev": true
     },
     "rollup-plugin-buble": {
diff --git a/package.json b/package.json
index d0684ad..c7a5885 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ef.js",
-  "version": "0.3.4-beta.2",
+  "version": "0.3.4-beta.3",
   "description": "(maybe) An elegant HTML template engine & basic framework",
   "main": "dist/ef.min.js",
   "module": "src/ef.js",
@@ -29,7 +29,7 @@
     "browser-sync": "^2.18.13",
     "eslint": "^4.4.1",
     "node-watch": "^0.5.5",
-    "rollup": "^0.47.2",
+    "rollup": "^0.47.4",
     "rollup-plugin-buble": "^0.15.0",
     "rollup-plugin-commonjs": "^8.1.0",
     "rollup-plugin-eslint": "^4.0.0",
@@ -41,6 +41,6 @@
     "shelljs": "^0.7.8"
   },
   "dependencies": {
-    "eft-parser": "^0.5.8"
+    "eft-parser": "^0.5.9"
   }
 }
diff --git a/src/lib/renderer.js b/src/lib/renderer.js
index 682de4f..1f447af 100644
--- a/src/lib/renderer.js
+++ b/src/lib/renderer.js
@@ -27,7 +27,7 @@ const update = function(newState) {
 }
 
 const destroy = function() {
-	const {$element, $avatar} = this
+	const {$element, __EFAVATAR__} = this
 	inform()
 	this.$umount()
 	for (let i in this) {
@@ -36,7 +36,7 @@ const destroy = function() {
 	}
 	queueDom(() => {
 		DOM.remove($element)
-		DOM.remove($avatar)
+		DOM.remove(__EFAVATAR__)
 	})
 	delete this.$element
 	delete this.$avatar
@@ -52,9 +52,6 @@ const destroy = function() {
 	return exec()
 }
 
-// All detatched components will be put in the safe zone zone
-const safeZone = document.createDocumentFragment()
-
 const state = class {
 	constructor (ast) {
 		const children = {}
@@ -70,6 +67,12 @@ const state = class {
 			key: null
 		}
 
+		/* Detatched components will be put in the safe zone
+		 * Split safe zone to each component
+		 * in order to make the component memory recycleable
+		 */
+		const safeZone = document.createDocumentFragment()
+
 		if (ENV !== 'production') nodeInfo.avatar = document.createComment('AVATAR OF COMPONENT')
 
 		const mount = () => {
@@ -88,7 +91,7 @@ const state = class {
 				},
 				configurable: true
 			},
-			$avatar: {
+			__EFAVATAR__: {
 				get() {
 					return nodeInfo.avatar
 				},