title: react-leaflet mouseover/out event and redux
body: <p>I am trying to add mouseover/out events to a <code>&lt;GeoJSON /&gt;</code> component of <code>react-leaflet</code>.
  If I am adding the events like in the code snippet below and <strong>only</strong> add the <code>console.log()</code> everything is working fine (mouseover and mouseout are working).</p>
  
  <p>But i added a redux action (<code>this.props.hoverQuickInfo</code>) to update the css class of an element. Now i can only register mouseover, but mouseout is never called. I tried it without redux and I was using the <code>setState</code> having the same result.</p>
  
  <pre><code>onEachFeature(feature, layer) {
      layer.on({
          'mouseover': (e) =&gt; {
              console.log('over!');
              // this.setState({show: true});
              this.props.hoverQuickInfo(true);
          },
          'mouseout': (e) =&gt; {
              console.log('out!');
              // this.setState({show: false});
              this.props.hoverQuickInfo(false);
          },
      });
  }
  </code></pre>
  
  <p>I read a little bit about it and found that a redux state change will result in a call of <code>shouldComponentUpdate</code> where I tried to 'filter' out any updates to the 'same' GeoJSON element, but i could not figure out how to get it to work and why it happens.</p>
  
  <pre><code>shouldComponentUpdate(nextProps, nextState) {
      if (this.props.ui.showQuickInfo) {
           return false;
      }
      return true;
  }
  </code></pre>
  
  <p>Maybe someone out there is able to help me.</p>