From 5c8e4c229047598e44b1c03ccbeb86b8ae65db33 Mon Sep 17 00:00:00 2001
From: Kyle <kyle.script@gmail.com>
Date: Tue, 26 Sep 2023 08:48:48 +0300
Subject: [PATCH] [fix] matchMedia memory leak

---
 packages/emoji-mart/src/components/Picker/Picker.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/emoji-mart/src/components/Picker/Picker.tsx b/packages/emoji-mart/src/components/Picker/Picker.tsx
index cced465b..aa7c5884 100644
--- a/packages/emoji-mart/src/components/Picker/Picker.tsx
+++ b/packages/emoji-mart/src/components/Picker/Picker.tsx
@@ -106,6 +106,7 @@ export default class Picker extends Component {
 
   componentWillUnmount() {
     this.unregister()
+    this.darkMedia?.removeEventListener(this.darkMediaCallback);
   }
 
   async reset(nextState = {}) {
@@ -194,6 +195,11 @@ export default class Picker extends Component {
     }
   }
 
+  darkMediaCallback = () => {
+    if (this.props.theme != 'auto') return
+    this.setState({ theme: this.darkMedia.matches ? 'dark' : 'light' })
+  }
+
   initTheme(theme) {
     if (theme != 'auto') return theme
 
@@ -201,10 +207,7 @@ export default class Picker extends Component {
       this.darkMedia = matchMedia('(prefers-color-scheme: dark)')
       if (this.darkMedia.media.match(/^not/)) return 'light'
 
-      this.darkMedia.addListener(() => {
-        if (this.props.theme != 'auto') return
-        this.setState({ theme: this.darkMedia.matches ? 'dark' : 'light' })
-      })
+      this.darkMedia.addListener(this.darkMediaCallback);
     }
 
     return this.darkMedia.matches ? 'dark' : 'light'