From f2ef4691928ed203abbc80f37e26170a32f48c60 Mon Sep 17 00:00:00 2001
From: August Miller <hello@gusmiller.com>
Date: Mon, 7 Mar 2022 10:40:42 -0800
Subject: [PATCH] Revise descriptions and examples based on #2733

Split up the two new sections, and used each to show a more appropriate example, now that `destroy()` has access to component state!
---
 packages/docs/src/en/globals/alpine-data.md | 35 ++++++++++++---------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/packages/docs/src/en/globals/alpine-data.md b/packages/docs/src/en/globals/alpine-data.md
index d43eb3521..1183efffd 100644
--- a/packages/docs/src/en/globals/alpine-data.md
+++ b/packages/docs/src/en/globals/alpine-data.md
@@ -90,34 +90,39 @@ Alpine.data('dropdown', () => ({
 <a name="destroy-functions"></a>
 ## Destroy functions
 
-Like `init()`, Alpine will automatically discover and execute your component's `destroy()` method after cleaning up other reactive properties. This is useful for unbinding anything registered against the global scope, or outside Alpine's own reactivity engine.
+Like `init()`, Alpine will automatically discover and execute your component's `destroy()` method just prior to cleaning up other reactive properties.
 
 ```js
-Alpine.data('dropdown', () => ({
+Alpine.data('timer', (delay = 5000) => ({
+    countdown: null,
+    init () {
+        this.countdown = window.setTimeout(() => {
+            console.log('Time’s up!')
+        }, delay)
+    },
     destroy() {
-        // This code will be executed once Alpine
-        // has finished cleaning up the component.
-        // As a result, reactive data will no
-        // longer be available!
-    }
+        window.clearTimeout(this.countdown)
+    },
 }))
 ```
 
-If you need to maintain a reference to something throughout the entire life of your component, you can declare a variable within the factory function's scope:
+<a name="non-reactive-data">
+## Non-reactive Data
+
+If you need to maintain a reference to something that is a dependency of your component (but not necessarily tracked by or compatible with Alpine’s reactivity engine), you can declare a variable within the factory function’s scope:
 
 ```js
-Alpine.data('blinker', () => {
-    let tick
+Alpine.data('super-dropdown', () => {
+    let superSelectInstance
 
     return {
-        open: false,
         init () {
-            tick = window.setInterval(() => {
-                this.open = !this.open
-            }, 1000)
+            superSelectInstance = new SuperSelect(this.$el)
         },
         destroy() {
-            window.clearInterval(tick)
+            // Supposing the library has its own global
+            // event listeners that need cleanup:
+            superSelectInstance.teardown()
         }
     }
 })