Support emojis added after initial mount

Author: ealush

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.5.8",
+  "version": "4.5.9",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/EmojiPickerReact.tsx

@@ -26,6 +26,8 @@ function EmojiPicker(props: PickerProps) {
 
 // eslint-disable-next-line complexity
 export default React.memo(EmojiPicker, (prev, next) => {
+  const prevCustomEmojis = prev.customEmojis ?? [];
+  const nextCustomEmojis = next.customEmojis ?? [];
   return (
     prev.emojiVersion === next.emojiVersion &&
     prev.searchPlaceHolder === next.searchPlaceHolder &&
@@ -40,6 +42,7 @@ export default React.memo(EmojiPicker, (prev, next) => {
     prev.height === next.height &&
     prev.width === next.width &&
     prev.searchDisabled === next.searchDisabled &&
-    prev.skinTonePickerLocation === next.skinTonePickerLocation
+    prev.skinTonePickerLocation === next.skinTonePickerLocation &&
+    prevCustomEmojis.length === nextCustomEmojis.length
   );
 });

src/components/context/PickerConfigContext.tsx

@@ -17,14 +17,31 @@ const ConfigContext = React.createContext<PickerConfigInternal>(
 );
 
 export function PickerConfigProvider({ children, ...config }: Props) {
-  const [mergedConfig] = React.useState(() => mergeConfig(config));
+  const mergedConfig = useSetConfig(config);
+
   return (
     <ConfigContext.Provider value={mergedConfig}>
       {children}
     </ConfigContext.Provider>
   );
 }
 
+export function useSetConfig(config: PickerConfig) {
+  const [mergedConfig, setMergedConfig] = React.useState(() =>
+    mergeConfig(config)
+  );
+
+  React.useEffect(() => {
+    if (config.customEmojis?.length !== mergedConfig.customEmojis?.length) {
+      setMergedConfig(mergeConfig(config));
+    }
+    // not gonna...
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config.customEmojis?.length]);
+
+  return mergedConfig;
+}
+
 export function usePickerConfig() {
   return React.useContext(ConfigContext);
 }

stories/picker.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import EmojiPicker, {
   Emoji,
@@ -44,9 +44,21 @@ export const AutoTheme = (args: Props) => (
 );
 
 export const CustomEmojis = (args: Props) => (
-  <Template {...args} customEmojis={  customEmojis} />
+  <Template {...args} customEmojis={customEmojis} />
 );
 
+export const CustomEmojisDeffered = (args: Props) => {
+  const [custom, setCustomEmojis] = useState<any>(undefined);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setCustomEmojis(customEmojis);
+    }, 2000);
+  }, []);
+
+  return <Template {...args} customEmojis={custom} />;
+};
+
 export const SearchDisabled = (args: Props) => (
   <Template {...args} searchDisabled />
 );