title: Can too many event handlers impact the performance of a React-app?
body: <p>I have a <strong>Toggler</strong> <code>button</code> which opens a drop-down menu. To add a functionality where if the user clicks anywhere on the screen other than that menu, the drop-down menu should get closed. So, for this, I need to create click handler and keep the record of the node from which the click has happened. If the click has been from outside the drop-down node, the menu should get closed. This is the code:</p>
  
  <pre><code>  state = {
      menuTogglerOpen: false
    }
  
    componentWillMount() {
      document.addEventListener("mousedown", this.handleClick, false)
    }
    componentWillUnmount() {
      document.removeEventListener("mousedown", this.handleClick, false)
    }
  
    handleClick = event =&gt; {
      if (this.togglerNode.contains(event.target)) {
        return
      }
      this.closeMenuTogglerFromOutside()
    }
  
    closeMenuTogglerFromOutside = () =&gt; {
      this.setState({
        menuTogglerOpen: false
      })
    }
  
    handleMenuToggler = () =&gt; {
      this.setState({
        menuTogglerOpen: !this.state.menuTogglerOpen
      })
    }
  </code></pre>
  
  <p>JSX</p>
  
  <pre><code>&lt;Toggler ref={currentNode=&gt; (this.togglerNode = currentNode)}&gt;
    &lt;button onClick={this.handleMenuToggler}&gt;
                  &lt;svg
                    ...button SVG...
                  &lt;/svg&gt;
                &lt;/button&gt;
    {this.state.menuTogglerOpen &amp;&amp; (
    &lt;TogglerDropDown&gt;
      &lt;div className="_dropdown_caret" /&gt;
      &lt;div className="_dropdown"&gt;
        &lt;ul&gt;
          &lt;li&gt;puspender&lt;/li&gt;
          &lt;li&gt;settings&lt;/li&gt;
          &lt;li&gt;help&lt;/li&gt;
          &lt;li&gt;logout&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/TogglerDropDown&gt;
    )}
  &lt;/Toggler&gt;
  &lt;/HeaderGroup&gt;
  &lt;/SiteHeaderRight&gt;   
  </code></pre>
  
  <p>On this approach, every click(anywhere on screen) calls the handleClick method. Could it impact the application performance? If yes, what is the better way to handle such event?      </p>
  
  <p><strong>Update</strong><br>
  As suggested by Alexei, this is the solution I implemented:    </p>
  
  <pre><code>handleClick = event =&gt; {
      if (this.togglerNode.contains(event.target)) {
        return
      }
      this.closeMenuToggler()
    }
  
    openMenuToggler = () =&gt; {
      document.addEventListener("mousedown", this.handleClick, false)
      this.setState({
        menuTogglerOpen: true
      })
    }
  
    closeMenuToggler = () =&gt; {
      document.removeEventListener("mousedown", this.handleClick, false)
      this.setState({
        menuTogglerOpen: false
      })
    }
  
    handleMenuToggler = () =&gt; {
      if (this.state.menuTogglerOpen) {
        this.closeMenuToggler()
      } else {
        this.openMenuToggler()
      }
    }
  </code></pre>