different behavior with componentDidMount than useEffect when using jquery emoji plugin

There is a difference between when componentDidMount and useEffect fires.

From the useEffect docs :

Unlike componentDidMount and componentDidUpdate, the function passed to useEffect fires after layout and paint

The big difference between componentDidMount and useEffect is that useEffect is run after every render, not just the first one. Since your render outputs a new element on each render, after the first render the DOM element you attached the emoji thing to doesn't exist anymore, and a new one with the same ID does.

Options:

• Use componentDidUpdate to handle the subsequent renders. (You'll still need componentDidMount for the first one.)
• Use a callback ref.