Use proper inputs, fix ResizeObserver setup

Declares the proper inputs to register/deregister the layout effect.

I'm not sure if the `ref` parameter should be expected to change ever (rules of hooks) but use it when generating the callback too.

Also fixes incorrect ResizeObserver `.observe` call if the `ref` was not initialized on initial render (maybe it's in an element that's conditionally rendered).

Author: Jessidhia

index.js

@@ -1,5 +1,5 @@
 'use strict'
-let { useState, useLayoutEffect } = require('react')
+let { useCallback, useState, useLayoutEffect } = require('react')
 
 function getSize(el) {
   if (!el) {
@@ -15,13 +15,18 @@ function getSize(el) {
 function useComponentSize(ref) {
   let [ComponentSize, setComponentSize] = useState(getSize(ref.current))
 
-  function handleResize() {
-    if (ref && ref.current) {
-      setComponentSize(getSize(ref.current))
-    }
-  }
+  const handleResize = useCallback(
+    function handleResize() {
+      if (ref.current) {
+        setComponentSize(getSize(ref.current))
+      }
+    },
+    [ref]
+  )
 
   useLayoutEffect(() => {
+    if (!ref.current) { return }
+
     handleResize()
 
     if (ResizeObserver) {
@@ -40,7 +45,7 @@ function useComponentSize(ref) {
       }
     }
 
-  }, [])
+  }, [ref.current])
 
   return ComponentSize
 }