title: different behavior with componentDidMount than useEffect when using jquery emoji plugin
body: <p>I’m stuck using a jquery emoji plugin on one of my components until I finish with a custom plugin I’m building.</p>
  
  <p>For some reason, when I call the emoji plugin inside of componentDidMount, everything works <strong>except</strong> the ability to utilize a custom button to show the emoji modal. When I use a custom button, the emoji plugin doesn’t attach the event to the button.</p>
  
  <p>What’s crazy is that I can use the same exact code in useEffect, and it attaches the event listener to the custom button just fine.</p>
  
  <p>I verified that the event listener is not attached by looking in the web console at events attached to the element after the page loaded.</p>
  
  <p>You can easily reproduce this problem by placing this component somewhere in an app (and importing jquery with the <a href="https://github.com/diy/jquery-emojiarea" rel="noreferrer">emoji-area plugin</a>):</p>
  
  <pre><code>import React, {useEffect} from 'react';
  
    export default function CommentInput(props) {
  
      useEffect(() =&gt; {
        const id = props.blurtId,
              $wysiwyg = $('#' + id).emojiarea({
              button: '#emoji-btn' + id
            });
  
  
        $.emojiarea.path = '/js/jquery/emojis/';
        $.emojiarea.icons = {
          ':smile:'     : 'smile.png',
          ':angry:'     : 'angry.png',
          ':flushed:'   : 'flushed.png',
          ':neckbeard:' : 'neckbeard.png',
          ':laughing:'  : 'laughing.png'
        };
  
     }, []); 
  
     return (
       &lt;&gt;
          &lt;textarea id={props.blurtId} className='blurt-comment-input' /&gt;
          &lt;i id={'emoji-btn' + props.blurtId} className='fa fa-smile emoji-btn' /&gt;  
       &lt;/&gt;
     )
  
  }
  </code></pre>
  
  <p>Simply change this to a class component, and you’ll see that within componentDidMount, everything works except the custom button. Any idea what could cause this change in behavior??</p>
  
  <p>Here is the react class component version:</p>
  
  <pre><code>import React, {Component} from 'react';
  
  class CommentInput extends Component {
  
  constructor(props) {
      super(props);
  }
  
  componentDidMount() {
      const id = this.props.blurtId,
            $wysiwyg = $('#' + id).emojiarea({
              button: '#emoji-btn' + id
          });
  
  
      $.emojiarea.path = '/js/jquery/emojis/';
      $.emojiarea.icons = {
          ':smile:'     : 'smile.png',
          ':angry:'     : 'angry.png',
          ':flushed:'   : 'flushed.png',
          ':neckbeard:' : 'neckbeard.png',
          ':laughing:'  : 'laughing.png'
      };
  }; 
  
  render() {
      return (
          &lt;&gt;
              &lt;textarea id={this.props.blurtId} className='blurt-comment-input' /&gt;
              &lt;i id={'emoji-btn' + this.props.blurtId} className='fa fa-smile emoji-btn' /&gt;  
          &lt;/&gt;
        )
      }
  }
  
  export default CommentInput;
  </code></pre>