emoji-mart rendering duplicate emoji pickers

[klukreativ]

have recently started using this package. Followed instructions but whenever I call on emoji-mart it displays two emoji-pickers instead of one.

import React, { useEffect, useRef } from 'react'
import { render } from 'react-dom'

import data from '@emoji-mart/data'
import { Picker } from 'emoji-mart'

export default function Test() {
    function EmojiPicker(props) {
        const ref = useRef()
      
        useEffect(() => {
          new Picker({ ...props, data, ref })
        }, [])
      
        return <div ref={ref} />
      }

    return(
        <EmojiPicker onEmojiSelect={console.log} />
    )
}

[vadholovin]

The bug occurs in React Strict mode.

[johan-smits]

Is there a workaround available for now?

[bitofbreeze]

Refs keep their value in the mount-unmount-mount pattern in React 18 strict mode so you can do

const executedRef = useRef(false);
useEffect(() => {
  if (executedRef.current) return;
  new Picker({});
  executedRef.current = true;
}, []);

[manhkien198]

Is there a workaround available for now?

[MathiasGilson]

I've fixed it like that

export default ({ onSelect, parentId, darkMode, ...props }) => {
    const ref: any = useRef()

    useEffect(() => {
        if (ref.current) ref.current.innerHTML = "" // clean current emoji picker

        new Picker({
            data: async () => {
                const response = await fetch("https://cdn.jsdelivr.net/npm/@emoji-mart/data")
                return response.json()
            },
            ref,
            onEmojiSelect: onSelect,
            searchPosition: "top",
            previewPosition: "none",
            navPosition: "top",
            autoFocus: true,
            theme: darkMode ? "dark" : "light",
            title: "",
            emoji: "",
            maxFrequentRows: 0,
            sheetSize: 32,
            perLine: 10,
            color: "#4285f4",
            ...props
        })
    }, [parentId]) // update only when parentId changes

    const renderEmojiPickerLoader = () => (
        <EmojiPickerLoader>
            <Skeleton.Button active={true} block={true} />
        </EmojiPickerLoader>
    )

    return (
        <Suspense fallback={renderEmojiPickerLoader()}>
            <div className={props.darkMode ? "dark" : ""} ref={ref} />
        </Suspense>
    )
}