.off()

gun.get(key).on(callback).off()

const ref = gun.get('messages').on(function(data){
  console.log('New message:', data)
})

// Later, stop listening
ref.off()

gun.get('status').on(function(data, key, msg, event){
  console.log('Status:', data)
  
  // Unsubscribe from within callback
  if(data.complete){
    event.off()
  }
})

// React example
function MessageList() {
  useEffect(() => {
    const ref = gun.get('messages').map().on((msg) => {
      setMessages(prev => [...prev, msg])
    })
    
    // Cleanup function
    return () => ref.off()
  }, [])
}

Gun.chain.off = function(){
  var gun = this, at = gun._, tmp;
  var cat = at.back;
  if(!cat){ return }
  at.ack = 0; // so can resubscribe.
  if(tmp = cat.next){
    if(tmp[at.get]){
      delete tmp[at.get];
    }
  }
  if (tmp = cat.any) {
    delete cat.any;
    cat.any = {};
  }
  if(tmp = cat.ask){
    delete tmp[at.get];
  }
}

// Good - store reference for cleanup
const subscription = gun.get('data').on(callback)
later: subscription.off()

// Bad - can't unsubscribe
gun.get('data').on(callback)
// No way to call .off() later!

// Vue
export default {
  data() {
    return { subscription: null }
  },
  mounted() {
    this.subscription = gun.get('data').on(this.handleData)
  },
  beforeUnmount() {
    if(this.subscription) {
      this.subscription.off()
    }
  }
}

// Angular
export class MyComponent implements OnDestroy {
  subscription: any;
  
  ngOnInit() {
    this.subscription = gun.get('data').on(data => {
      this.data = data;
    });
  }
  
  ngOnDestroy() {
    if(this.subscription) {
      this.subscription.off();
    }
  }
}

gun.get('task').on(function(task, key, msg, event){
  updateUI(task)
  
  // Stop listening when task is complete
  if(task.status === 'completed'){
    event.off()
    console.log('Task completed, stopped listening')
  }
})

const subs = []

// Subscribe to multiple keys
['user', 'settings', 'preferences'].forEach(key => {
  subs.push(
    gun.get(key).on(data => console.log(key, data))
  )
})

// Unsubscribe from all
function cleanup() {
  subs.forEach(sub => sub.off())
  subs.length = 0
}

let currentSub = null

function subscribeToUser(userId) {
  // Clean up previous subscription
  if(currentSub) {
    currentSub.off()
  }
  
  // Subscribe to new user
  currentSub = gun.get('users').get(userId).on(data => {
    displayUser(data)
  })
}

// Problem: Memory leak
function loadMessages() {
  gun.get('messages').map().on(msg => {
    addToList(msg)
  })
  // No cleanup!
}

// Solution: Store and clean up
let messagesSub = null

function loadMessages() {
  if(messagesSub) messagesSub.off()
  messagesSub = gun.get('messages').map().on(msg => {
    addToList(msg)
  })
}

function cleanup() {
  if(messagesSub) messagesSub.off()
}

// Problem: Subscribing multiple times
button.onclick = () => {
  gun.get('counter').on(updateDisplay) // Creates new subscription each click!
}

// Solution: Track subscription state
let isSubscribed = false

button.onclick = () => {
  if(!isSubscribed) {
    gun.get('counter').on(updateDisplay)
    isSubscribed = true
  }
}