diff --git a/docs/customization.md b/docs/customization.md
index d11f7ffa..fbd0ab33 100644
--- a/docs/customization.md
+++ b/docs/customization.md
@@ -52,7 +52,7 @@ class CustomScrollbars extends Component {
     return (
       <Scrollbars
         renderTrackHorizontal={({ style, ...props }) =>
-            <div {...props} style={{ ...style, backgroundColor: 'blue' }}>
+            <div {...props} style={{ ...style, backgroundColor: 'blue' }}/>
         }>
         {this.props.children}
       </Scrollbars>
diff --git a/docs/usage.md b/docs/usage.md
index a1e9b6e6..0157b748 100644
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -44,9 +44,9 @@ class App extends Component {
         // Called when scrolling starts
         onScrollStart={this.handleScrollStart}
         // Called when scrolling stops
-        onScrollStop={this.handlenScrollStop}>
+        onScrollStop={this.handlenScrollStop}
         // Called when ever the component is updated. Runs inside the animation frame
-        onUpdate={this.handleUpdate}
+        onUpdate={this.handleUpdate}>
         <p>Some great content...</p>
       </Scrollbars>
     );
diff --git a/src/Scrollbars/index.js b/src/Scrollbars/index.js
index 19866117..cfc24dca 100644
--- a/src/Scrollbars/index.js
+++ b/src/Scrollbars/index.js
@@ -36,6 +36,25 @@ export default class Scrollbars extends Component {
     constructor(props, ...rest) {
         super(props, ...rest);
 
+        this.getScrollLeft = this.getScrollLeft.bind(this);
+        this.getScrollTop = this.getScrollTop.bind(this);
+        this.getScrollWidth = this.getScrollWidth.bind(this);
+        this.getScrollHeight = this.getScrollHeight.bind(this);
+        this.getClientWidth = this.getClientWidth.bind(this);
+        this.getClientHeight = this.getClientHeight.bind(this);
+        this.getValues = this.getValues.bind(this);
+        this.getThumbHorizontalWidth = this.getThumbHorizontalWidth.bind(this);
+        this.getThumbVerticalHeight = this.getThumbVerticalHeight.bind(this);
+        this.getScrollLeftForOffset = this.getScrollLeftForOffset.bind(this);
+        this.getScrollTopForOffset = this.getScrollTopForOffset.bind(this);
+
+        this.scrollLeft = this.scrollLeft.bind(this);
+        this.scrollTop = this.scrollTop.bind(this);
+        this.scrollToLeft = this.scrollToLeft.bind(this);
+        this.scrollToTop = this.scrollToTop.bind(this);
+        this.scrollToRight = this.scrollToRight.bind(this);
+        this.scrollToBottom = this.scrollToBottom.bind(this);
+
         this.handleTrackMouseEnter = this.handleTrackMouseEnter.bind(this);
         this.handleTrackMouseLeave = this.handleTrackMouseLeave.bind(this);
         this.handleHorizontalTrackMouseDown = this.handleHorizontalTrackMouseDown.bind(this);
@@ -76,37 +95,30 @@ export default class Scrollbars extends Component {
     }
 
     getScrollLeft() {
-        const { view } = this.refs;
-        return view.scrollLeft;
+        return this.view.scrollLeft;
     }
 
     getScrollTop() {
-        const { view } = this.refs;
-        return view.scrollTop;
+        return this.view.scrollTop;
     }
 
     getScrollWidth() {
-        const { view } = this.refs;
-        return view.scrollWidth;
+        return this.view.scrollWidth;
     }
 
     getScrollHeight() {
-        const { view } = this.refs;
-        return view.scrollHeight;
+        return this.view.scrollHeight;
     }
 
     getClientWidth() {
-        const { view } = this.refs;
-        return view.clientWidth;
+        return this.view.clientWidth;
     }
 
     getClientHeight() {
-        const { view } = this.refs;
-        return view.clientHeight;
+        return this.view.clientHeight;
     }
 
     getValues() {
-        const { view } = this.refs;
         const {
             scrollLeft,
             scrollTop,
@@ -114,7 +126,7 @@ export default class Scrollbars extends Component {
             scrollHeight,
             clientWidth,
             clientHeight
-        } = view;
+        } = this.view;
 
         return {
             left: (scrollLeft / (scrollWidth - clientWidth)) || 0,
@@ -130,9 +142,8 @@ export default class Scrollbars extends Component {
 
     getThumbHorizontalWidth() {
         const { thumbSize, thumbMinSize } = this.props;
-        const { view, trackHorizontal } = this.refs;
-        const { scrollWidth, clientWidth } = view;
-        const trackWidth = getInnerWidth(trackHorizontal);
+        const { scrollWidth, clientWidth } = this.view;
+        const trackWidth = getInnerWidth(this.trackHorizontal);
         const width = Math.ceil(clientWidth / scrollWidth * trackWidth);
         if (trackWidth === width) return 0;
         if (thumbSize) return thumbSize;
@@ -141,9 +152,8 @@ export default class Scrollbars extends Component {
 
     getThumbVerticalHeight() {
         const { thumbSize, thumbMinSize } = this.props;
-        const { view, trackVertical } = this.refs;
-        const { scrollHeight, clientHeight } = view;
-        const trackHeight = getInnerHeight(trackVertical);
+        const { scrollHeight, clientHeight } = this.view;
+        const trackHeight = getInnerHeight(this.trackVertical);
         const height = Math.ceil(clientHeight / scrollHeight * trackHeight);
         if (trackHeight === height) return 0;
         if (thumbSize) return thumbSize;
@@ -151,55 +161,47 @@ export default class Scrollbars extends Component {
     }
 
     getScrollLeftForOffset(offset) {
-        const { view, trackHorizontal } = this.refs;
-        const { scrollWidth, clientWidth } = view;
-        const trackWidth = getInnerWidth(trackHorizontal);
+        const { scrollWidth, clientWidth } = this.view;
+        const trackWidth = getInnerWidth(this.trackHorizontal);
         const thumbWidth = this.getThumbHorizontalWidth();
         return offset / (trackWidth - thumbWidth) * (scrollWidth - clientWidth);
     }
 
     getScrollTopForOffset(offset) {
-        const { view, trackVertical } = this.refs;
-        const { scrollHeight, clientHeight } = view;
-        const trackHeight = getInnerHeight(trackVertical);
+        const { scrollHeight, clientHeight } = this.view;
+        const trackHeight = getInnerHeight(this.trackVertical);
         const thumbHeight = this.getThumbVerticalHeight();
         return offset / (trackHeight - thumbHeight) * (scrollHeight - clientHeight);
     }
 
     scrollLeft(left = 0) {
-        const { view } = this.refs;
-        view.scrollLeft = left;
+        this.view.scrollLeft = left;
     }
 
     scrollTop(top = 0) {
-        const { view } = this.refs;
-        view.scrollTop = top;
+        this.view.scrollTop = top;
     }
 
     scrollToLeft() {
-        const { view } = this.refs;
-        view.scrollLeft = 0;
+        this.view.scrollLeft = 0;
     }
 
     scrollToTop() {
-        const { view } = this.refs;
-        view.scrollTop = 0;
+        this.view.scrollTop = 0;
     }
 
     scrollToRight() {
-        const { view } = this.refs;
-        view.scrollLeft = view.scrollWidth;
+        this.view.scrollLeft = this.view.scrollWidth;
     }
 
     scrollToBottom() {
-        const { view } = this.refs;
-        view.scrollTop = view.scrollHeight;
+        this.view.scrollTop = this.view.scrollHeight;
     }
 
     addListeners() {
         /* istanbul ignore if */
         if (typeof document === 'undefined') return;
-        const { view, trackHorizontal, trackVertical, thumbHorizontal, thumbVertical } = this.refs;
+        const { view, trackHorizontal, trackVertical, thumbHorizontal, thumbVertical } = this;
         view.addEventListener('scroll', this.handleScroll);
         if (!getScrollbarWidth()) return;
         trackHorizontal.addEventListener('mouseenter', this.handleTrackMouseEnter);
@@ -216,7 +218,7 @@ export default class Scrollbars extends Component {
     removeListeners() {
         /* istanbul ignore if */
         if (typeof document === 'undefined') return;
-        const { view, trackHorizontal, trackVertical, thumbHorizontal, thumbVertical } = this.refs;
+        const { view, trackHorizontal, trackVertical, thumbHorizontal, thumbVertical } = this;
         view.removeEventListener('scroll', this.handleScroll);
         if (!getScrollbarWidth()) return;
         trackHorizontal.removeEventListener('mouseenter', this.handleTrackMouseEnter);
@@ -274,22 +276,20 @@ export default class Scrollbars extends Component {
 
     handleHorizontalTrackMouseDown(event) {
         event.preventDefault();
-        const { view } = this.refs;
         const { target, clientX } = event;
         const { left: targetLeft } = target.getBoundingClientRect();
         const thumbWidth = this.getThumbHorizontalWidth();
         const offset = Math.abs(targetLeft - clientX) - thumbWidth / 2;
-        view.scrollLeft = this.getScrollLeftForOffset(offset);
+        this.view.scrollLeft = this.getScrollLeftForOffset(offset);
     }
 
     handleVerticalTrackMouseDown(event) {
         event.preventDefault();
-        const { view } = this.refs;
         const { target, clientY } = event;
         const { top: targetTop } = target.getBoundingClientRect();
         const thumbHeight = this.getThumbVerticalHeight();
         const offset = Math.abs(targetTop - clientY) - thumbHeight / 2;
-        view.scrollTop = this.getScrollTopForOffset(offset);
+        this.view.scrollTop = this.getScrollTopForOffset(offset);
     }
 
     handleHorizontalThumbMouseDown(event) {
@@ -333,21 +333,19 @@ export default class Scrollbars extends Component {
     handleDrag(event) {
         if (this.prevPageX) {
             const { clientX } = event;
-            const { view, trackHorizontal } = this.refs;
-            const { left: trackLeft } = trackHorizontal.getBoundingClientRect();
+            const { left: trackLeft } = this.trackHorizontal.getBoundingClientRect();
             const thumbWidth = this.getThumbHorizontalWidth();
             const clickPosition = thumbWidth - this.prevPageX;
             const offset = -trackLeft + clientX - clickPosition;
-            view.scrollLeft = this.getScrollLeftForOffset(offset);
+            this.view.scrollLeft = this.getScrollLeftForOffset(offset);
         }
         if (this.prevPageY) {
             const { clientY } = event;
-            const { view, trackVertical } = this.refs;
-            const { top: trackTop } = trackVertical.getBoundingClientRect();
+            const { top: trackTop } = this.trackVertical.getBoundingClientRect();
             const thumbHeight = this.getThumbVerticalHeight();
             const clickPosition = thumbHeight - this.prevPageY;
             const offset = -trackTop + clientY - clickPosition;
-            view.scrollTop = this.getScrollTopForOffset(offset);
+            this.view.scrollTop = this.getScrollTopForOffset(offset);
         }
         return false;
     }
@@ -388,10 +386,9 @@ export default class Scrollbars extends Component {
     }
 
     showTracks() {
-        const { trackHorizontal, trackVertical } = this.refs;
         clearTimeout(this.hideTracksTimeout);
-        css(trackHorizontal, { opacity: 1 });
-        css(trackVertical, { opacity: 1 });
+        css(this.trackHorizontal, { opacity: 1 });
+        css(this.trackVertical, { opacity: 1 });
     }
 
     hideTracks() {
@@ -399,11 +396,10 @@ export default class Scrollbars extends Component {
         if (this.scrolling) return;
         if (this.trackMouseOver) return;
         const { autoHideTimeout } = this.props;
-        const { trackHorizontal, trackVertical } = this.refs;
         clearTimeout(this.hideTracksTimeout);
         this.hideTracksTimeout = setTimeout(() => {
-            css(trackHorizontal, { opacity: 0 });
-            css(trackVertical, { opacity: 0 });
+            css(this.trackHorizontal, { opacity: 0 });
+            css(this.trackVertical, { opacity: 0 });
         }, autoHideTimeout);
     }
 
@@ -439,9 +435,8 @@ export default class Scrollbars extends Component {
         const { onUpdate, hideTracksWhenNotNeeded } = this.props;
         const values = this.getValues();
         if (getScrollbarWidth()) {
-            const { thumbHorizontal, thumbVertical, trackHorizontal, trackVertical } = this.refs;
             const { scrollLeft, clientWidth, scrollWidth } = values;
-            const trackHorizontalWidth = getInnerWidth(trackHorizontal);
+            const trackHorizontalWidth = getInnerWidth(this.trackHorizontal);
             const thumbHorizontalWidth = this.getThumbHorizontalWidth();
             const thumbHorizontalX = scrollLeft / (scrollWidth - clientWidth) * (trackHorizontalWidth - thumbHorizontalWidth);
             const thumbHorizontalStyle = {
@@ -449,7 +444,7 @@ export default class Scrollbars extends Component {
                 transform: `translateX(${thumbHorizontalX}px)`
             };
             const { scrollTop, clientHeight, scrollHeight } = values;
-            const trackVerticalHeight = getInnerHeight(trackVertical);
+            const trackVerticalHeight = getInnerHeight(this.trackVertical);
             const thumbVerticalHeight = this.getThumbVerticalHeight();
             const thumbVerticalY = scrollTop / (scrollHeight - clientHeight) * (trackVerticalHeight - thumbVerticalHeight);
             const thumbVerticalStyle = {
@@ -463,11 +458,11 @@ export default class Scrollbars extends Component {
                 const trackVerticalStyle = {
                     visibility: scrollHeight > clientHeight ? 'visible' : 'hidden'
                 };
-                css(trackHorizontal, trackHorizontalStyle);
-                css(trackVertical, trackVerticalStyle);
+                css(this.trackHorizontal, trackHorizontalStyle);
+                css(this.trackVertical, trackVerticalStyle);
             }
-            css(thumbHorizontal, thumbHorizontalStyle);
-            css(thumbVertical, thumbVerticalStyle);
+            css(this.thumbHorizontal, thumbHorizontalStyle);
+            css(this.thumbVertical, thumbVerticalStyle);
         }
         if (onUpdate) onUpdate(values);
         if (typeof callback !== 'function') return;
@@ -562,26 +557,26 @@ export default class Scrollbars extends Component {
             })
         };
 
-        return createElement(tagName, { ...props, style: containerStyle, ref: 'container' }, [
+        return createElement(tagName, { ...props, style: containerStyle, ref: (ref) => { this.container = ref; } }, [
             cloneElement(
                 renderView({ style: viewStyle }),
-                { key: 'view', ref: 'view' },
+                { key: 'view', ref: (ref) => { this.view = ref; } },
                 children
             ),
             cloneElement(
                 renderTrackHorizontal({ style: trackHorizontalStyle }),
-                { key: 'trackHorizontal', ref: 'trackHorizontal' },
+                { key: 'trackHorizontal', ref: (ref) => { this.trackHorizontal = ref; } },
                 cloneElement(
                     renderThumbHorizontal({ style: thumbHorizontalStyleDefault }),
-                    { ref: 'thumbHorizontal' }
+                    { ref: (ref) => { this.thumbHorizontal = ref; } }
                 )
             ),
             cloneElement(
                 renderTrackVertical({ style: trackVerticalStyle }),
-                { key: 'trackVertical', ref: 'trackVertical' },
+                { key: 'trackVertical', ref: (ref) => { this.trackVertical = ref; } },
                 cloneElement(
                     renderThumbVertical({ style: thumbVerticalStyleDefault }),
-                    { ref: 'thumbVertical' }
+                    { ref: (ref) => { this.thumbVertical = ref; } }
                 )
             )
         ]);
diff --git a/test/Scrollbars/autoHeight.js b/test/Scrollbars/autoHeight.js
index 1fa2a2d6..3dba5e4a 100644
--- a/test/Scrollbars/autoHeight.js
+++ b/test/Scrollbars/autoHeight.js
@@ -25,13 +25,12 @@ export default function createTests(scrollbarWidth, envScrollbarWidth) {
                     </Scrollbars>
                 ), node, function callback() {
                     const scrollbars = findDOMNode(this);
-                    const view = this.refs.view;
                     expect(scrollbars.style.position).toEqual('relative');
                     expect(scrollbars.style.minHeight).toEqual('0px');
                     expect(scrollbars.style.maxHeight).toEqual('100px');
-                    expect(view.style.position).toEqual('relative');
-                    expect(view.style.minHeight).toEqual(`${scrollbarWidth}px`);
-                    expect(view.style.maxHeight).toEqual(`${100 + scrollbarWidth}px`);
+                    expect(this.view.style.position).toEqual('relative');
+                    expect(this.view.style.minHeight).toEqual(`${scrollbarWidth}px`);
+                    expect(this.view.style.maxHeight).toEqual(`${100 + scrollbarWidth}px`);
                     done();
                 });
             });
@@ -48,8 +47,8 @@ export default function createTests(scrollbarWidth, envScrollbarWidth) {
                     </Scrollbars>
                 ), node, function callback() {
                     const width = `-${scrollbarWidth}px`;
-                    expect(this.refs.view.style.marginRight).toEqual(width);
-                    expect(this.refs.view.style.marginBottom).toEqual(width);
+                    expect(this.view.style.marginRight).toEqual(width);
+                    expect(this.view.style.marginBottom).toEqual(width);
                     done();
                 });
             });
@@ -66,8 +65,8 @@ export default function createTests(scrollbarWidth, envScrollbarWidth) {
                     </Scrollbars>
                 ), node, function callback() {
                     setTimeout(() => {
-                        expect(this.refs.trackVertical.style.display).toEqual('none');
-                        expect(this.refs.trackHorizontal.style.display).toEqual('none');
+                        expect(this.trackVertical.style.display).toEqual('none');
+                        expect(this.trackHorizontal.style.display).toEqual('none');
                         done();
                     }, 100);
                 });
@@ -85,12 +84,10 @@ export default function createTests(scrollbarWidth, envScrollbarWidth) {
                 ), node, function callback() {
                     setTimeout(() => {
                         const scrollbars = findDOMNode(this);
-                        const view = this.refs.view;
-                        const thumbVertical = this.refs.thumbVertical;
                         expect(scrollbars.clientHeight).toEqual(50 + (envScrollbarWidth - scrollbarWidth));
-                        expect(view.clientHeight).toEqual(50);
-                        expect(view.scrollHeight).toEqual(50);
-                        expect(thumbVertical.clientHeight).toEqual(0);
+                        expect(this.view.clientHeight).toEqual(50);
+                        expect(this.view.scrollHeight).toEqual(50);
+                        expect(this.thumbVertical.clientHeight).toEqual(0);
                         done();
                     }, 100);
                 });
@@ -108,14 +105,12 @@ export default function createTests(scrollbarWidth, envScrollbarWidth) {
                 ), node, function callback() {
                     setTimeout(() => {
                         const scrollbars = findDOMNode(this);
-                        const view = this.refs.view;
-                        const thumbVertical = this.refs.thumbVertical;
                         expect(scrollbars.clientHeight).toEqual(100);
-                        expect(view.clientHeight).toEqual(100 - (envScrollbarWidth - scrollbarWidth));
-                        expect(view.scrollHeight).toEqual(200);
+                        expect(this.view.clientHeight).toEqual(100 - (envScrollbarWidth - scrollbarWidth));
+                        expect(this.view.scrollHeight).toEqual(200);
                         if (scrollbarWidth) {
                             // 100 / 200 * 96 = 48
-                            expect(thumbVertical.clientHeight).toEqual(48);
+                            expect(this.thumbVertical.clientHeight).toEqual(48);
                         }
                         done();
                     }, 100);
@@ -135,11 +130,9 @@ export default function createTests(scrollbarWidth, envScrollbarWidth) {
                 ), node, function callback() {
                     setTimeout(() => {
                         const scrollbars = findDOMNode(this);
-                        const view = this.refs.view;
-                        const thumbVertical = this.refs.thumbVertical;
                         expect(scrollbars.clientHeight).toEqual(100);
-                        expect(view.clientHeight).toEqual(100 - (envScrollbarWidth - scrollbarWidth));
-                        expect(thumbVertical.clientHeight).toEqual(0);
+                        expect(this.view.clientHeight).toEqual(100 - (envScrollbarWidth - scrollbarWidth));
+                        expect(this.thumbVertical.clientHeight).toEqual(0);
                         done();
                     }, 100);
                 });
@@ -153,7 +146,7 @@ export default function createTests(scrollbarWidth, envScrollbarWidth) {
                         return (
                             <div style={{ width: 500, height: 500 }}>
                                 <Scrollbars
-                                    ref="scrollbars"
+                                    ref={(ref) => { this.scrollbars = ref; }}
                                     autoHeight
                                     autoHeightMin="50%"
                                     autoHeightMax="100%">
@@ -165,9 +158,8 @@ export default function createTests(scrollbarWidth, envScrollbarWidth) {
                 }
                 render(<Root/>, node, function callback() {
                     setTimeout(() => {
-                        const { scrollbars } = this.refs;
-                        const $scrollbars = findDOMNode(scrollbars);
-                        const view = scrollbars.refs.view;
+                        const $scrollbars = findDOMNode(this.scrollbars);
+                        const view = this.scrollbars.view;
                         expect($scrollbars.clientWidth).toEqual(500);
                         expect($scrollbars.clientHeight).toEqual(250);
                         expect($scrollbars.style.position).toEqual('relative');
@@ -193,13 +185,12 @@ export default function createTests(scrollbarWidth, envScrollbarWidth) {
                     </Scrollbars>
                 ), node, function callback() {
                     const scrollbars = findDOMNode(this);
-                    const view = this.refs.view;
                     expect(scrollbars.style.position).toEqual('relative');
                     expect(scrollbars.style.minHeight).toEqual('10em');
                     expect(scrollbars.style.maxHeight).toEqual('100em');
-                    expect(view.style.position).toEqual('relative');
-                    expect(view.style.minHeight).toEqual(`calc(10em + ${scrollbarWidth}px)`);
-                    expect(view.style.maxHeight).toEqual(`calc(100em + ${scrollbarWidth}px)`);
+                    expect(this.view.style.position).toEqual('relative');
+                    expect(this.view.style.minHeight).toEqual(`calc(10em + ${scrollbarWidth}px)`);
+                    expect(this.view.style.maxHeight).toEqual(`calc(100em + ${scrollbarWidth}px)`);
                     done();
                 });
             });
diff --git a/test/Scrollbars/autoHide.js b/test/Scrollbars/autoHide.js
index 6f688713..30e71b95 100644
--- a/test/Scrollbars/autoHide.js
+++ b/test/Scrollbars/autoHide.js
@@ -25,9 +25,8 @@ export default function createTests(scrollbarWidth) {
                         <div style={{ width: 200, height: 200 }}/>
                     </Scrollbars>
                 ), node, function callback() {
-                    const { trackHorizontal, trackVertical } = this.refs;
-                    expect(trackHorizontal.style.opacity).toEqual('0');
-                    expect(trackVertical.style.opacity).toEqual('0');
+                    expect(this.trackHorizontal.style.opacity).toEqual('0');
+                    expect(this.trackVertical.style.opacity).toEqual('0');
                     done();
                 });
             });
@@ -40,7 +39,7 @@ export default function createTests(scrollbarWidth) {
                             <div style={{ width: 200, height: 200 }}/>
                         </Scrollbars>
                     ), node, function callback() {
-                        const { trackHorizontal: track } = this.refs;
+                        const { trackHorizontal: track } = this;
                         simulant.fire(track, 'mouseenter');
                         expect(track.style.opacity).toEqual('1');
                         done();
@@ -55,7 +54,7 @@ export default function createTests(scrollbarWidth) {
                             <div style={{ width: 200, height: 200 }}/>
                         </Scrollbars>
                     ), node, function callback() {
-                        const { trackHorizontal: track } = this.refs;
+                        const { trackHorizontal: track } = this;
                         simulant.fire(track, 'mouseenter');
                         setTimeout(() => this.hideTracks(), 10);
                         setTimeout(() => {
@@ -76,7 +75,7 @@ export default function createTests(scrollbarWidth) {
                             <div style={{ width: 200, height: 200 }}/>
                         </Scrollbars>
                     ), node, function callback() {
-                        const { trackHorizontal: track } = this.refs;
+                        const { trackHorizontal: track } = this;
                         simulant.fire(track, 'mouseenter');
                         simulant.fire(track, 'mouseleave');
                         setTimeout(() => {
@@ -93,7 +92,7 @@ export default function createTests(scrollbarWidth) {
                             <div style={{ width: 200, height: 200 }}/>
                         </Scrollbars>
                     ), node, function callback() {
-                        const { trackVertical: track } = this.refs;
+                        const { trackVertical: track } = this;
                         simulant.fire(track, 'mouseenter');
                         expect(track.style.opacity).toEqual('1');
                         done();
@@ -108,7 +107,7 @@ export default function createTests(scrollbarWidth) {
                             <div style={{ width: 200, height: 200 }}/>
                         </Scrollbars>
                     ), node, function callback() {
-                        const { trackVertical: track } = this.refs;
+                        const { trackVertical: track } = this;
                         simulant.fire(track, 'mouseenter');
                         setTimeout(() => this.hideTracks(), 10);
                         setTimeout(() => {
@@ -129,7 +128,7 @@ export default function createTests(scrollbarWidth) {
                             <div style={{ width: 200, height: 200 }}/>
                         </Scrollbars>
                     ), node, function callback() {
-                        const { trackVertical: track } = this.refs;
+                        const { trackVertical: track } = this;
                         simulant.fire(track, 'mouseenter');
                         simulant.fire(track, 'mouseleave');
                         setTimeout(() => {
@@ -149,7 +148,7 @@ export default function createTests(scrollbarWidth) {
                 ), node, function callback() {
                     this.scrollTop(50);
                     setTimeout(() => {
-                        const { trackHorizontal, trackVertical } = this.refs;
+                        const { trackHorizontal, trackVertical } = this;
                         expect(trackHorizontal.style.opacity).toEqual('1');
                         expect(trackVertical.style.opacity).toEqual('1');
                         done();
@@ -168,7 +167,7 @@ export default function createTests(scrollbarWidth) {
                 ), node, function callback() {
                     this.scrollTop(50);
                     setTimeout(() => {
-                        const { trackHorizontal, trackVertical } = this.refs;
+                        const { trackHorizontal, trackVertical } = this;
                         expect(trackHorizontal.style.opacity).toEqual('0');
                         expect(trackVertical.style.opacity).toEqual('0');
                         done();
@@ -187,7 +186,7 @@ export default function createTests(scrollbarWidth) {
                     this.scrollTop(50);
                     setTimeout(() => this.hideTracks());
                     setTimeout(() => {
-                        const { trackHorizontal, trackVertical } = this.refs;
+                        const { trackHorizontal, trackVertical } = this;
                         expect(trackHorizontal.style.opacity).toEqual('1');
                         expect(trackVertical.style.opacity).toEqual('1');
                         done();
@@ -206,7 +205,7 @@ export default function createTests(scrollbarWidth) {
                         <div style={{ width: 200, height: 200 }}/>
                     </Scrollbars>
                 ), node, function callback() {
-                    const { thumbHorizontal: thumb, trackHorizontal: track } = this.refs;
+                    const { thumbHorizontal: thumb, trackHorizontal: track } = this;
                     const { left } = thumb.getBoundingClientRect();
                     simulant.fire(thumb, 'mousedown', {
                         target: thumb,
@@ -232,7 +231,7 @@ export default function createTests(scrollbarWidth) {
                         <div style={{ width: 200, height: 200 }}/>
                     </Scrollbars>
                 ), node, function callback() {
-                    const { thumbHorizontal: thumb, trackHorizontal: track } = this.refs;
+                    const { thumbHorizontal: thumb, trackHorizontal: track } = this;
                     const { left } = thumb.getBoundingClientRect();
                     simulant.fire(thumb, 'mousedown', {
                         target: thumb,
@@ -258,7 +257,7 @@ export default function createTests(scrollbarWidth) {
                         </Scrollbars>
                     ), node, function callback() {
                         setTimeout(() => {
-                            const { thumbHorizontal: thumb, trackHorizontal: track } = this.refs;
+                            const { thumbHorizontal: thumb, trackHorizontal: track } = this;
                             const { left } = thumb.getBoundingClientRect();
                             simulant.fire(thumb, 'mousedown', {
                                 target: thumb,
@@ -288,7 +287,7 @@ export default function createTests(scrollbarWidth) {
                         <div style={{ width: 200, height: 200 }}/>
                     </Scrollbars>
                 ), node, function callback() {
-                    const { thumbVertical: thumb, trackVertical: track } = this.refs;
+                    const { thumbVertical: thumb, trackVertical: track } = this;
                     const { top } = thumb.getBoundingClientRect();
                     simulant.fire(thumb, 'mousedown', {
                         target: thumb,
@@ -313,7 +312,7 @@ export default function createTests(scrollbarWidth) {
                         <div style={{ width: 200, height: 200 }}/>
                     </Scrollbars>
                 ), node, function callback() {
-                    const { thumbVertical: thumb, trackVertical: track } = this.refs;
+                    const { thumbVertical: thumb, trackVertical: track } = this;
                     const { top } = thumb.getBoundingClientRect();
                     simulant.fire(thumb, 'mousedown', {
                         target: thumb,
@@ -338,7 +337,7 @@ export default function createTests(scrollbarWidth) {
                         </Scrollbars>
                     ), node, function callback() {
                         setTimeout(() => {
-                            const { thumbVertical: thumb, trackVertical: track } = this.refs;
+                            const { thumbVertical: thumb, trackVertical: track } = this;
                             const { top } = thumb.getBoundingClientRect();
                             simulant.fire(thumb, 'mousedown', {
                                 target: thumb,
@@ -369,7 +368,7 @@ export default function createTests(scrollbarWidth) {
                         </Scrollbars>
                     ), node, function callback() {
                         const spy = spyOn(this, 'showTracks');
-                        const { trackHorizontal: track } = this.refs;
+                        const { trackHorizontal: track } = this;
                         simulant.fire(track, 'mouseenter');
                         expect(spy.calls.length).toEqual(0);
                         done();
@@ -384,7 +383,7 @@ export default function createTests(scrollbarWidth) {
                         </Scrollbars>
                     ), node, function callback() {
                         const spy = spyOn(this, 'hideTracks');
-                        const { trackHorizontal: track } = this.refs;
+                        const { trackHorizontal: track } = this;
                         simulant.fire(track, 'mouseenter');
                         simulant.fire(track, 'mouseleave');
                         setTimeout(() => {
@@ -402,7 +401,7 @@ export default function createTests(scrollbarWidth) {
                         </Scrollbars>
                     ), node, function callback() {
                         const spy = spyOn(this, 'showTracks');
-                        const { trackVertical: track } = this.refs;
+                        const { trackVertical: track } = this;
                         simulant.fire(track, 'mouseenter');
                         expect(spy.calls.length).toEqual(0);
                         done();
@@ -417,7 +416,7 @@ export default function createTests(scrollbarWidth) {
                         </Scrollbars>
                     ), node, function callback() {
                         const spy = spyOn(this, 'hideTracks');
-                        const { trackVertical: track } = this.refs;
+                        const { trackVertical: track } = this;
                         simulant.fire(track, 'mouseenter');
                         simulant.fire(track, 'mouseleave');
                         setTimeout(() => {
diff --git a/test/Scrollbars/clickTrack.js b/test/Scrollbars/clickTrack.js
index ad4de623..e818e4bb 100644
--- a/test/Scrollbars/clickTrack.js
+++ b/test/Scrollbars/clickTrack.js
@@ -25,7 +25,7 @@ export default function createTests(scrollbarWidth) {
                 </Scrollbars>
             ), node, function callback() {
                 setTimeout(() => {
-                    const { view, trackHorizontal: bar } = this.refs;
+                    const { view, trackHorizontal: bar } = this;
                     const { left, width } = bar.getBoundingClientRect();
                     simulant.fire(bar, 'mousedown', {
                         target: bar,
@@ -46,7 +46,7 @@ export default function createTests(scrollbarWidth) {
                 </Scrollbars>
             ), node, function callback() {
                 setTimeout(() => {
-                    const { view, trackVertical: bar } = this.refs;
+                    const { view, trackVertical: bar } = this;
                     const { top, height } = bar.getBoundingClientRect();
                     simulant.fire(bar, 'mousedown', {
                         target: bar,
diff --git a/test/Scrollbars/dragThumb.js b/test/Scrollbars/dragThumb.js
index 85eda6a7..21331c54 100644
--- a/test/Scrollbars/dragThumb.js
+++ b/test/Scrollbars/dragThumb.js
@@ -24,7 +24,7 @@ export default function createTests(scrollbarWidth) {
                 </Scrollbars>
             ), node, function callback() {
                 setTimeout(() => {
-                    const { view, thumbHorizontal: thumb } = this.refs;
+                    const { view, thumbHorizontal: thumb } = this;
                     const { left } = thumb.getBoundingClientRect();
                     simulant.fire(thumb, 'mousedown', {
                         target: thumb,
@@ -47,7 +47,7 @@ export default function createTests(scrollbarWidth) {
                 </Scrollbars>
             ), node, function callback() {
                 setTimeout(() => {
-                    const { thumbHorizontal: thumb } = this.refs;
+                    const { thumbHorizontal: thumb } = this;
                     const { left } = thumb.getBoundingClientRect();
                     simulant.fire(thumb, 'mousedown', {
                         target: thumb,
@@ -70,7 +70,7 @@ export default function createTests(scrollbarWidth) {
                 </Scrollbars>
             ), node, function callback() {
                 setTimeout(() => {
-                    const { view, thumbVertical: thumb } = this.refs;
+                    const { view, thumbVertical: thumb } = this;
                     const { top } = thumb.getBoundingClientRect();
                     simulant.fire(thumb, 'mousedown', {
                         target: thumb,
@@ -93,7 +93,7 @@ export default function createTests(scrollbarWidth) {
                 </Scrollbars>
             ), node, function callback() {
                 setTimeout(() => {
-                    const { thumbVertical: thumb } = this.refs;
+                    const { thumbVertical: thumb } = this;
                     const { top } = thumb.getBoundingClientRect();
                     simulant.fire(thumb, 'mousedown', {
                         target: thumb,
diff --git a/test/Scrollbars/flexbox.js b/test/Scrollbars/flexbox.js
index 1df9c18e..e8576dba 100644
--- a/test/Scrollbars/flexbox.js
+++ b/test/Scrollbars/flexbox.js
@@ -18,7 +18,7 @@ export default function createTests() {
                 render() {
                     return (
                         <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, display: 'flex', flexDirection: 'column' }}>
-                            <Scrollbars ref="scrollbars">
+                            <Scrollbars ref={(ref) => { this.scrollbars = ref; }}>
                                 <div style={{ width: 10000, height: 10000 }}/>
                             </Scrollbars>
                         </div>
@@ -27,9 +27,9 @@ export default function createTests() {
             }
             render(<Root/>, node, function callback() {
                 setTimeout(() => {
-                    const { scrollbars } = this.refs;
+                    const { scrollbars } = this;
                     const $scrollbars = findDOMNode(scrollbars);
-                    const $view = scrollbars.refs.view;
+                    const $view = scrollbars.view;
                     expect($scrollbars.clientHeight).toBeGreaterThan(0);
                     expect($view.clientHeight).toBeGreaterThan(0);
                     done();
diff --git a/test/Scrollbars/hideTracks.js b/test/Scrollbars/hideTracks.js
index 1e3bea71..189f273d 100644
--- a/test/Scrollbars/hideTracks.js
+++ b/test/Scrollbars/hideTracks.js
@@ -26,7 +26,7 @@ export default function createTests(scrollbarWidth) {
                         </Scrollbars>
                     ), node, function callback() {
                         setTimeout(() => {
-                            const { trackHorizontal, trackVertical } = this.refs;
+                            const { trackHorizontal, trackVertical } = this;
                             expect(trackHorizontal.style.visibility).toEqual('visible');
                             expect(trackVertical.style.visibility).toEqual('visible');
                             done();
@@ -44,7 +44,7 @@ export default function createTests(scrollbarWidth) {
                         </Scrollbars>
                     ), node, function callback() {
                         setTimeout(() => {
-                            const { trackHorizontal, trackVertical } = this.refs;
+                            const { trackHorizontal, trackVertical } = this;
                             expect(trackHorizontal.style.visibility).toEqual('hidden');
                             expect(trackVertical.style.visibility).toEqual('hidden');
                             done();
diff --git a/test/Scrollbars/rendering.js b/test/Scrollbars/rendering.js
index a29b989c..c1f436c8 100644
--- a/test/Scrollbars/rendering.js
+++ b/test/Scrollbars/rendering.js
@@ -45,7 +45,7 @@ export default function createTests(scrollbarWidth) {
                         <div style={{ width: 200, height: 200 }}/>
                     </Scrollbars>
                 ), node, function callback() {
-                    expect(this.refs.view).toBeA(Node);
+                    expect(this.view).toBeA(Node);
                     done();
                 });
             });
@@ -75,9 +75,9 @@ export default function createTests(scrollbarWidth) {
                             <div style={{ width: 200, height: 200 }}/>
                         </Scrollbars>
                     ), node, function callback() {
-                        expect(this.refs.view.tagName).toEqual('SECTION');
-                        expect(this.refs.view.style.color).toEqual('red');
-                        expect(this.refs.view.style.position).toEqual('absolute');
+                        expect(this.view.tagName).toEqual('SECTION');
+                        expect(this.view.style.color).toEqual('red');
+                        expect(this.view.style.position).toEqual('absolute');
                         done();
                     });
                 });
@@ -93,8 +93,8 @@ export default function createTests(scrollbarWidth) {
                         </Scrollbars>
                     ), node, function callback() {
                         const width = `-${scrollbarWidth}px`;
-                        expect(this.refs.view.style.marginRight).toEqual(width);
-                        expect(this.refs.view.style.marginBottom).toEqual(width);
+                        expect(this.view.style.marginRight).toEqual(width);
+                        expect(this.view.style.marginBottom).toEqual(width);
                         done();
                     });
                 });
@@ -105,8 +105,8 @@ export default function createTests(scrollbarWidth) {
                             <div style={{ width: 200, height: 200 }}/>
                         </Scrollbars>
                     ), node, function callback() {
-                        expect(this.refs.trackHorizontal).toBeA(Node);
-                        expect(this.refs.trackVertical).toBeA(Node);
+                        expect(this.trackHorizontal).toBeA(Node);
+                        expect(this.trackVertical).toBeA(Node);
                         done();
                     });
                 });
@@ -117,8 +117,8 @@ export default function createTests(scrollbarWidth) {
                             <div style={{ width: 200, height: 200 }}/>
                         </Scrollbars>
                     ), node, function callback() {
-                        expect(this.refs.thumbHorizontal).toBeA(Node);
-                        expect(this.refs.thumbVertical).toBeA(Node);
+                        expect(this.thumbHorizontal).toBeA(Node);
+                        expect(this.thumbVertical).toBeA(Node);
                         done();
                     });
                 });
@@ -131,8 +131,8 @@ export default function createTests(scrollbarWidth) {
                     ), node, function callback() {
                         setTimeout(() => {
                             // 100 / 200 * 96 = 48
-                            expect(this.refs.thumbVertical.style.height).toEqual('48px');
-                            expect(this.refs.thumbHorizontal.style.width).toEqual('48px');
+                            expect(this.thumbVertical.style.height).toEqual('48px');
+                            expect(this.thumbHorizontal.style.width).toEqual('48px');
                             done();
                         }, 100);
                     });
@@ -146,8 +146,8 @@ export default function createTests(scrollbarWidth) {
                     ), node, function callback() {
                         setTimeout(() => {
                             // 100 / 200 * 96 = 48
-                            expect(this.refs.thumbVertical.style.height).toEqual('30px');
-                            expect(this.refs.thumbHorizontal.style.width).toEqual('30px');
+                            expect(this.thumbVertical.style.height).toEqual('30px');
+                            expect(this.thumbHorizontal.style.width).toEqual('30px');
                             done();
                         }, 100);
                     });
@@ -162,8 +162,8 @@ export default function createTests(scrollbarWidth) {
                         ), node, function callback() {
                             setTimeout(() => {
                                 // 100 / 200 * 96 = 48
-                                expect(this.refs.thumbVertical.style.height).toEqual('50px');
-                                expect(this.refs.thumbHorizontal.style.width).toEqual('50px');
+                                expect(this.thumbVertical.style.height).toEqual('50px');
+                                expect(this.thumbHorizontal.style.width).toEqual('50px');
                                 done();
                             }, 100);
                         });
@@ -179,9 +179,9 @@ export default function createTests(scrollbarWidth) {
                                 <div style={{ width: 200, height: 200 }}/>
                             </Scrollbars>
                         ), node, function callback() {
-                            expect(this.refs.trackHorizontal.tagName).toEqual('SECTION');
-                            expect(this.refs.trackHorizontal.style.position).toEqual('absolute');
-                            expect(this.refs.trackHorizontal.style.color).toEqual('red');
+                            expect(this.trackHorizontal.tagName).toEqual('SECTION');
+                            expect(this.trackHorizontal.style.position).toEqual('absolute');
+                            expect(this.trackHorizontal.style.color).toEqual('red');
                             done();
                         });
                     });
@@ -196,9 +196,9 @@ export default function createTests(scrollbarWidth) {
                                 <div style={{ width: 200, height: 200 }}/>
                             </Scrollbars>
                         ), node, function callback() {
-                            expect(this.refs.trackVertical.tagName).toEqual('SECTION');
-                            expect(this.refs.trackVertical.style.position).toEqual('absolute');
-                            expect(this.refs.trackVertical.style.color).toEqual('red');
+                            expect(this.trackVertical.tagName).toEqual('SECTION');
+                            expect(this.trackVertical.style.position).toEqual('absolute');
+                            expect(this.trackVertical.style.color).toEqual('red');
                             done();
                         });
                     });
@@ -213,9 +213,9 @@ export default function createTests(scrollbarWidth) {
                                 <div style={{ width: 200, height: 200 }}/>
                             </Scrollbars>
                         ), node, function callback() {
-                            expect(this.refs.thumbHorizontal.tagName).toEqual('SECTION');
-                            expect(this.refs.thumbHorizontal.style.position).toEqual('relative');
-                            expect(this.refs.thumbHorizontal.style.color).toEqual('red');
+                            expect(this.thumbHorizontal.tagName).toEqual('SECTION');
+                            expect(this.thumbHorizontal.style.position).toEqual('relative');
+                            expect(this.thumbHorizontal.style.color).toEqual('red');
                             done();
                         });
                     });
@@ -230,9 +230,9 @@ export default function createTests(scrollbarWidth) {
                                 <div style={{ width: 200, height: 200 }}/>
                             </Scrollbars>
                         ), node, function callback() {
-                            expect(this.refs.thumbVertical.tagName).toEqual('SECTION');
-                            expect(this.refs.thumbVertical.style.position).toEqual('relative');
-                            expect(this.refs.thumbVertical.style.color).toEqual('red');
+                            expect(this.thumbVertical.tagName).toEqual('SECTION');
+                            expect(this.thumbVertical.style.position).toEqual('relative');
+                            expect(this.thumbVertical.style.color).toEqual('red');
                             done();
                         });
                     });
@@ -244,9 +244,9 @@ export default function createTests(scrollbarWidth) {
                             <div style={{ width: 200, height: 200 }}/>
                         </Scrollbars>
                     ), node, function callback() {
-                        expect(this.refs.view.style.position).toEqual('absolute');
-                        expect(this.refs.view.style.top).toEqual('0px');
-                        expect(this.refs.view.style.left).toEqual('0px');
+                        expect(this.view.style.position).toEqual('absolute');
+                        expect(this.view.style.top).toEqual('0px');
+                        expect(this.view.style.left).toEqual('0px');
                         done();
                     });
                 });
@@ -263,8 +263,8 @@ export default function createTests(scrollbarWidth) {
                         </Scrollbars>
                     ), node, function callback() {
                         setTimeout(() => {
-                            expect(this.refs.trackHorizontal.style.height).toEqual('10px');
-                            expect(this.refs.trackVertical.style.width).toEqual('10px');
+                            expect(this.trackHorizontal.style.height).toEqual('10px');
+                            expect(this.trackVertical.style.width).toEqual('10px');
                             done();
                         }, 100);
                     });
@@ -283,8 +283,8 @@ export default function createTests(scrollbarWidth) {
                             </Scrollbars>
                         ), node, function callback() {
                             setTimeout(() => {
-                                expect(this.refs.thumbHorizontal.style.width).toEqual('0px');
-                                expect(this.refs.thumbVertical.style.height).toEqual('0px');
+                                expect(this.thumbHorizontal.style.width).toEqual('0px');
+                                expect(this.thumbVertical.style.height).toEqual('0px');
                                 done();
                             }, 100);
                         });
@@ -302,8 +302,8 @@ export default function createTests(scrollbarWidth) {
                         </Scrollbars>
                     ), node, function callback() {
                         setTimeout(() => {
-                            expect(this.refs.trackVertical.style.display).toEqual('none');
-                            expect(this.refs.trackHorizontal.style.display).toEqual('none');
+                            expect(this.trackVertical.style.display).toEqual('none');
+                            expect(this.trackHorizontal.style.display).toEqual('none');
                             done();
                         }, 100);
                     });
diff --git a/test/Scrollbars/scrolling.js b/test/Scrollbars/scrolling.js
index b4ca7e25..c48517d9 100644
--- a/test/Scrollbars/scrolling.js
+++ b/test/Scrollbars/scrolling.js
@@ -27,11 +27,11 @@ export default function createTests(scrollbarWidth, envScrollbarWidth) {
                     setTimeout(() => {
                         if (scrollbarWidth) {
                             // 50 / (200 - 100) * (96 - 48) = 24
-                            expect(this.refs.thumbVertical.style.transform).toEqual('translateY(24px)');
-                            expect(this.refs.thumbHorizontal.style.transform).toEqual('translateX(24px)');
+                            expect(this.thumbVertical.style.transform).toEqual('translateY(24px)');
+                            expect(this.thumbHorizontal.style.transform).toEqual('translateX(24px)');
                         } else {
-                            expect(this.refs.thumbVertical.style.transform).toEqual('');
-                            expect(this.refs.thumbHorizontal.style.transform).toEqual('');
+                            expect(this.thumbVertical.style.transform).toEqual('');
+                            expect(this.thumbHorizontal.style.transform).toEqual('');
                         }
                         done();
                     }, 100);
diff --git a/test/Scrollbars/universal.js b/test/Scrollbars/universal.js
index d379fad0..92644acd 100644
--- a/test/Scrollbars/universal.js
+++ b/test/Scrollbars/universal.js
@@ -27,7 +27,7 @@ export default function createTests(scrollbarWidth) {
                             <div style={{ width: 200, height: 200 }}/>
                         </ScrollbarsTest>
                     ), node, function callback() {
-                        const { view, trackHorizontal, trackVertical } = this.refs;
+                        const { view, trackHorizontal, trackVertical } = this;
                         expect(view.style.position).toEqual('absolute');
                         expect(view.style.overflow).toEqual('hidden');
                         expect(view.style.top).toEqual('0px');
@@ -49,7 +49,7 @@ export default function createTests(scrollbarWidth) {
                             <div style={{ width: 200, height: 200 }}/>
                         </Scrollbars>
                     ), node, function callback() {
-                        const { view } = this.refs;
+                        const { view } = this;
                         expect(view.style.overflow).toEqual('scroll');
                         expect(view.style.marginBottom).toEqual(`${-scrollbarWidth}px`);
                         expect(view.style.marginRight).toEqual(`${-scrollbarWidth}px`);
@@ -71,7 +71,7 @@ export default function createTests(scrollbarWidth) {
                             <div style={{ width: 200, height: 200 }}/>
                         </ScrollbarsTest>
                     ), node, function callback() {
-                        const { view, trackHorizontal, trackVertical } = this.refs;
+                        const { view, trackHorizontal, trackVertical } = this;
                         expect(view.style.position).toEqual('relative');
                         expect(view.style.overflow).toEqual('hidden');
                         expect(view.style.marginBottom).toEqual('0px');
@@ -91,7 +91,7 @@ export default function createTests(scrollbarWidth) {
                             <div style={{ width: 200, height: 200 }}/>
                         </Scrollbars>
                     ), node, function callback() {
-                        const { view } = this.refs;
+                        const { view } = this;
                         expect(view.style.overflow).toEqual('scroll');
                         expect(view.style.marginBottom).toEqual(`${-scrollbarWidth}px`);
                         expect(view.style.marginRight).toEqual(`${-scrollbarWidth}px`);