I'm loading this library emoji-mart client side because it requires window object and then returning a component, while calling, the component is rendered twice to start with and then multiple times as parent component state changes.
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 */
)
}
You can use React.memo to prevent unnecessary rerendering.
It's easy to use, only you have to do is to wrap the component.
import React from 'react';
const EmojiPicker = React.memo(() => {
...
return <div ref={ref}></div>
})
React.memo prevent rerender if there's no changes in props variables.