hooks: extract element remaining view port height logic into a hook

src/components/Rules.js

@@ -13,6 +13,7 @@ import { FixedSizeList as List, areEqual } from 'react-window';
 import ContentHeader from 'c/ContentHeader';
 import Rule from 'c/Rule';
 import RuleSearch from 'c/RuleSearch';
+import useRemainingViewPortHeight from '../hooks/useRemainingViewPortHeight';
 
 import { getRules, fetchRules, fetchRulesOnce } from 'd/rules';
 
@@ -45,24 +46,10 @@ const Row = memo(({ index, style, data }) => {
 export default function Rules() {
   const { fetchRulesOnce, fetchRules } = useActions(actions);
   const { rules } = useStoreState(mapStateToProps);
-  const refRulesContainer = useRef(null);
-  const [containerHeight, setContainerHeight] = useState(200);
-  function _updateContainerHeight() {
-    const { top } = refRulesContainer.current.getBoundingClientRect();
-    setContainerHeight(window.innerHeight - top - paddingBottom);
-  }
-  const updateContainerHeight = useCallback(_updateContainerHeight, []);
-
   useEffect(() => {
     fetchRulesOnce();
   }, []);
-  useLayoutEffect(() => {
+  const [refRulesContainer, containerHeight] = useRemainingViewPortHeight();
-    updateContainerHeight();
-    window.addEventListener('resize', updateContainerHeight);
-    return () => {
-      window.removeEventListener('resize', updateContainerHeight);
-    };
-  }, []);
 
   return (
     <div>
@@ -70,7 +57,7 @@ export default function Rules() {
       <RuleSearch />
       <div ref={refRulesContainer} style={{ paddingBottom }}>
         <List
-          height={containerHeight}
+          height={containerHeight - paddingBottom}
           width="100%"
           itemCount={rules.length}
           itemSize={80}

src/hooks/useRemainingViewPortHeight.js

@@ -0,0 +1,27 @@
+import { useState, useRef, useLayoutEffect, useCallback } from 'react';
+/**
+ * cosnt [ref, remainingHeight] = useRemainingViewPortHeight();
+ *
+ * return a reference, and the remaining height of the referenced dom node
+ * to the bottom of the view port
+ *
+ */
+export default function useRemainingViewPortHeight() {
+  const refRulesContainer = useRef(null);
+  const [containerHeight, setContainerHeight] = useState(200);
+  function _updateContainerHeight() {
+    const { top } = refRulesContainer.current.getBoundingClientRect();
+    setContainerHeight(window.innerHeight - top);
+  }
+  const updateContainerHeight = useCallback(_updateContainerHeight, []);
+
+  useLayoutEffect(() => {
+    updateContainerHeight();
+    window.addEventListener('resize', updateContainerHeight);
+    return () => {
+      window.removeEventListener('resize', updateContainerHeight);
+    };
+  }, []);
+
+  return [refRulesContainer, containerHeight];
+}