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 needcomponentDidMount
for the first one.) - Use a callback ref.