From a1b94a68ff3ba428f3a31afb3de4cc411c92a18c Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Wed, 18 Sep 2024 16:30:40 +0300
Subject: [PATCH] refactor: inline function

---
 src/common/MultiselectMenu/Dropdown/Option/Option.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/common/MultiselectMenu/Dropdown/Option/Option.tsx b/src/common/MultiselectMenu/Dropdown/Option/Option.tsx
index 4309e766e..68884610f 100644
--- a/src/common/MultiselectMenu/Dropdown/Option/Option.tsx
+++ b/src/common/MultiselectMenu/Dropdown/Option/Option.tsx
@@ -1,6 +1,6 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import classNames from 'classnames';
 import Button from 'stremio/common/Button';
 import styles from './Option.less';
@@ -16,11 +16,15 @@ const Option = ({ option, selectedOption, onSelect }: Props) => {
     // consider using option.id === selectedOption?.id instead
     const selected = useMemo(() => option?.value === selectedOption?.value, [option, selectedOption]);
 
+    const handleClick = useCallback(() => {
+        onSelect(option.value);
+    }, [onSelect, option.value]);
+
     return (
         <Button
             className={classNames(styles['option'], { [styles['selected']]: selected })}
             key={option.id}
-            onClick={() => onSelect(option.value)}
+            onClick={handleClick}
             aria-selected={selected}
         >
             <div className={styles['label']}>{ option.label }</div>