diff --git a/src/__stories__/useLockBodyScroll.story.tsx b/src/__stories__/useLockBodyScroll.story.tsx
index 2c14ff5e83..b701d27d77 100644
--- a/src/__stories__/useLockBodyScroll.story.tsx
+++ b/src/__stories__/useLockBodyScroll.story.tsx
@@ -5,20 +5,34 @@ import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const [locked, toggleLocked] = useToggle(false)
-
   useLockBodyScroll(locked);
 
   return (
     <div style={{height: '200vh'}}>
-      <button onClick={() => toggleLocked()} style={{position: 'fixed', left: 0, right: 0}}>
+      <button onClick={() => toggleLocked()} style={{position: 'fixed', left: 0}}>
         {locked ? 'Unlock' : 'Lock'}
       </button>
     </div>
   );
 };
 
+const AnotherComponent = () => {
+  const [locked, toggleLocked] = useToggle(false)
+  useLockBodyScroll(locked);
+
+  return (
+    <button onClick={() => toggleLocked()} style={{position: 'fixed', left: 0, top: 40}}>
+      {locked ? 'Unlock' : 'Lock'}
+    </button>
+  );
+};
+
 storiesOf('Side effects|useLockBodyScroll', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useLockBodyScroll.md')} />)
-  .add('Demo', () =>
-    <Demo/>
+  .add('Demo', () => <Demo/>)
+  .add('Two hooks on page', () =>
+    <>
+      <AnotherComponent />
+      <Demo />
+    </>
   )
diff --git a/src/useLockBodyScroll.ts b/src/useLockBodyScroll.ts
index d0d2023198..67b2220659 100644
--- a/src/useLockBodyScroll.ts
+++ b/src/useLockBodyScroll.ts
@@ -1,19 +1,30 @@
-import {useRef, useEffect} from 'react';
-import {isClient} from './util';
-import useUnmount from './useUnmount';
+import {useEffect} from 'react';
 
-const useLockBodyScroll = (enabled: boolean = true) => {
-  const originalOverflow = useRef(
-    isClient ? window.getComputedStyle(document.body).overflow : 'visible'
-  );
+let counter = 0;
+let originalOverflow: string | null = null;
+
+const lock = () => {
+  originalOverflow = window.getComputedStyle(document.body).overflow;
+  document.body.style.overflow = 'hidden';
+};
+
+const unlock = () => {
+  document.body.style.overflow = originalOverflow;
+  originalOverflow = null;
+};
 
-  useEffect(() => {
-    document.body.style.overflow = enabled ? "hidden" : originalOverflow.current;
-  }, [enabled]);
+const increment = () => {
+  counter++;
+  if (counter === 1) lock();
+};
 
-  useUnmount(() => {
-    document.body.style.overflow = originalOverflow.current
-  });
+const decrement = () => {
+  counter--;
+  if (counter === 0) unlock();
+};
+
+const useLockBodyScroll = (enabled: boolean = true) => {
+  useEffect(() => enabled ? (increment(), decrement) : undefined, [enabled]);
 }
 
 export default useLockBodyScroll;