Fix wrapped refs being called on every render

[felthy]

I noticed that if I do something like this:

setRef = el => {
  if (el) {
    console.log('mounting', el)
  } else {
    console.log('unmounting')
  }
}

render() {
  const { onEnterViewport, onLeaveViewport } = this.props
  <Waypoint onEnter={onEnterViewport} onLeave={onLeaveViewport}>
    <div ref={this.setRef} />
  </Waypoint>
}

I see unmounting followed by mounting in the console every time my component renders. This is happening because the wrapper ref added in #278 changes on every render, so React calls it again (per Caveats with callback refs). This is a problem for me because I’m constructing and destroying a stateful video player in my setRef().

To fix this, I have:

• added unit tests that verify the original behaviour;
• added unit tests that fail in this case;
• moved the ref-wrapping logic into the existing refElement instance method;
• now the failing unit tests pass.