fix: out-of-date click handler

package.json

@@ -1,6 +1,6 @@
 {
   "name": "emoji-picker-react",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "description": "Emoji picker component for react applications",
   "main": "dist/index.js",
   "typings": "emoji-picker-react.d.ts",

src/components/EmojiList/index.js

@@ -27,12 +27,12 @@ const createEmojiList = (name, { emojiListRef, searchTerm }) => {
       activeSkinTone,
       filterResult,
       seenGroups = {},
-      onEmojiClick,
       variationMenu,
       failedToLoad = null,
       preload,
     },
     dispatch,
+    onEmojiClick,
   } = useContext(PickerContext);
 
   const unsetEmojiName = useCallback(() => setEmojiName('', emojiListRef));

src/components/RecentlyUsed/index.js

@@ -14,14 +14,9 @@ import Emoji from '../Emoji';
 
 const RecentlyUsed = ({ emojiListRef }) => {
   const {
-    state: {
-      recentlyUsed,
-      groupNames,
-      onEmojiClick,
-      filterResult,
-      failedToLoad = {},
-    },
+    state: { recentlyUsed, groupNames, filterResult, failedToLoad = {} },
     dispatch,
+    onEmojiClick,
   } = useContext(PickerContext);
 
   const unsetEmojiName = useCallback(() => setEmojiName('', emojiListRef));

src/components/VariationsMenu/index.js

@@ -11,7 +11,8 @@ import './style.css';
 
 const VariationsMenu = ({ closeVariations }) => {
   const {
-    state: { variationMenu, activeSkinTone, onEmojiClick },
+    state: { variationMenu, activeSkinTone },
+    onEmojiClick,
   } = useContext(PickerContext);
 
   if (!variationMenu) {

src/index.js

@@ -34,6 +34,9 @@ const EmpojiPicker = ({
 }) => {
   const emojiListRef = useRef(null);
   const isMounted = useRef(true);
+  const onClickRef = useRef(onEmojiClick);
+
+  onClickRef.current = onEmojiClick;
 
   useEffect(
     () => () => {
@@ -45,7 +48,6 @@ const EmpojiPicker = ({
   const [state, useReducerDispatch] = useReducer(reducer, {
     activeSkinTone: skinTone,
     emojiUrl,
-    onEmojiClick: clickHandler(onEmojiClick),
     seenGroups: { [GROUP_NAME_PEOPLE]: true },
     recentlyUsed: getRecentlyUsed(),
     preload,
@@ -74,7 +76,9 @@ const EmpojiPicker = ({
   };
 
   return (
-    <PickerContext.Provider value={{ state, dispatch }}>
+    <PickerContext.Provider
+      value={{ state, dispatch, onEmojiClick: clickHandler(onClickRef) }}
+    >
       <aside
         className="emoji-picker-react"
         onScroll={closeVariations}

src/lib/clickHandler/index.js

@@ -1,15 +1,15 @@
 import { setRecentlyUsed } from '../recentlyUsed';
 import emojiOutput from '../emojiOutput';
 
-const clickHandler = (onEmojiClick = Function.prototype) => (
+const clickHandler = (onClickRef = {}) => (
   e,
   unified,
   emoji,
   activeSkinTone
 ) => {
   const output = emojiOutput(unified, emoji, activeSkinTone);
   setRecentlyUsed(output);
-  return onEmojiClick(e, output);
+  return onClickRef.current && onClickRef.current(e, output);
 };
 
 export default clickHandler;