Estoy cargando esta biblioteca del lado del cliente emoji-mart porque requiere un objeto de ventana y luego devuelve un componente, mientras llama, el componente se procesa dos veces para comenzar y luego varias veces a medida que cambia el estado del componente principal.
function EmojiPicker(props = {}) { const ref = useRef() // loading the emojiMart lib clientside coz it requires // window object useEffect(() => { import('emoji-mart').then((EmojiMart) => { new EmojiMart.Picker({ ...props, data, ref }) }) }, []) return <div ref={ref}></div> } function Feed = () => { const[value, setValue] = useState('') return ( ... ... <input value={value} onChange={handleChange}/> ... ... <EmojiPicker/> /* EmojiPicker rendered twice and again and again whenever input state changes */ ) }Puede usar React.memo para evitar una reproducción innecesaria. Es fácil de usar, solo tienes que envolver el componente.
import React from 'react'; const EmojiPicker = React.memo(() => { ... return <div ref={ref}></div> })React.memo evita volver a renderizar si no hay cambios en las variables de accesorios.