emoji-picker-react 4.5.8 → 4.5.9

package/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",

package/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
   );
 });

package/src/components/context/PickerConfigContext.tsx

@@ -17,7 +17,8 @@ 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}
@@ -25,6 +26,22 @@ export function PickerConfigProvider({ children, ...config }: Props) {
   );
 }
 
+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);
 }