Memoize ref function

karma.conf.js

@@ -1,6 +1,6 @@
 process.env.CHROME_BIN = require('puppeteer').executablePath()
 
-module.exports = function(config) {
+module.exports = function (config) {
   config.set({
     frameworks: ['mocha'],
 
@@ -20,6 +20,10 @@ module.exports = function(config) {
     webpack: {
       mode: 'development',
       devtool: 'inline-source-map',
+      node: {
+        fs: 'empty',
+        module: 'empty',
+      },
       module: {
         rules: [
           {

package.json

@@ -60,8 +60,8 @@
     "@babel/preset-typescript": "^7.10.1",
     "@babel/register": "^7.10.1",
     "@testing-library/react": "^10.2.1",
+    "@testing-library/react-hooks": "^3.4.2",
     "@types/debounce": "^1.2.0",
-    "@types/expect": "^24.3.0",
     "@types/lodash-es": "^4.17.3",
     "@types/mocha": "^7.0.2",
     "@types/react": "^16.9.35",
@@ -91,6 +91,7 @@
     "puppeteer": "^3.3.0",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
+    "react-test-renderer": "^17.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.13.1",

src/web/index.spec.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import styled, { createGlobalStyle } from 'styled-components'
 import expect from 'expect'
 import { render, cleanup, RenderResult, fireEvent } from '@testing-library/react'
+import { renderHook } from '@testing-library/react-hooks'
 import Polyfill from 'resize-observer-polyfill'
 
 import useMeasure, { Options } from '.'
@@ -27,8 +28,8 @@ const Wrapper = styled.div`
 `
 
 const Box = styled.div<{ big: boolean }>`
-  width: ${p => (p.big ? 400 : 200)}px;
-  height: ${p => (p.big ? 400 : 200)}px;
+  width: ${(p) => (p.big ? 400 : 200)}px;
+  height: ${(p) => (p.big ? 400 : 200)}px;
   overflow: hidden;
   font-size: 8px;
 `
@@ -38,8 +39,8 @@ const Box = styled.div<{ big: boolean }>`
  */
 
 const getBounds = (tools: RenderResult): ClientRect => JSON.parse(tools.getByTestId('box').innerHTML)
-const nextFrame = () => new Promise(resolve => setTimeout(resolve, 1000 / 60))
-const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
+const nextFrame = () => new Promise((resolve) => setTimeout(resolve, 1000 / 60))
+const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
 
 function ignoreWindowErrors(test: () => void) {
   const onErrorBackup = window.onerror
@@ -210,4 +211,22 @@ describe('useMeasure', () => {
     })
     ;(window as any).ResizeObserver = RO
   })
+
+  it('memoize ref function', () => {
+    const { result, rerender } = renderHook(() => useMeasure())
+    const ref = result.current[0]
+    rerender()
+    expect(ref).toBe(result.current[0])
+  })
+
+  it('create new ref function when prop changed', () => {
+    const { result, rerender } = renderHook(({ scroll }) => useMeasure({ scroll }), {
+      initialProps: {
+        scroll: false,
+      },
+    })
+    const ref = result.current[0]
+    rerender({ scroll: true })
+    expect(ref).not.toBe(result.current[0])
+  })
 })

src/web/index.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef, useMemo } from 'react'
+import { useEffect, useState, useRef, useMemo, useCallback, MutableRefObject } from 'react'
 import { debounce as createDebounce } from 'debounce'
 
 declare type ResizeObserverCallback = (entries: any[], observer: ResizeObserver) => void
@@ -99,52 +99,30 @@ function useMeasure({ debounce, scroll, polyfill }: Options = { debounce: 0, scr
     ]
   }, [set, scrollDebounce, resizeDebounce])
 
-  // cleanup current scroll-listeners / observers
-  function removeListeners() {
-    if (state.current.scrollContainers) {
-      state.current.scrollContainers.forEach((element) => element.removeEventListener('scroll', scrollChange, true))
-      state.current.scrollContainers = null
-    }
-
-    if (state.current.resizeObserver) {
-      state.current.resizeObserver.disconnect()
-      state.current.resizeObserver = null
-    }
-  }
-
-  // add scroll-listeners / observers
-  function addListeners() {
-    if (!state.current.element) return
-    state.current.resizeObserver = new ResizeObserver(scrollChange)
-    state.current.resizeObserver!.observe(state.current.element)
-    if (scroll && state.current.scrollContainers) {
-      state.current.scrollContainers.forEach((scrollContainer) =>
-        scrollContainer.addEventListener('scroll', scrollChange, { capture: true, passive: true })
-      )
-    }
-  }
-
   // the ref we expose to the user
-  const ref = (node: HTMLOrSVGElement | null) => {
-    if (!node || node === state.current.element) return
-    removeListeners()
-    state.current.element = node
-    state.current.scrollContainers = findScrollContainers(node)
-    addListeners()
-  }
+  const ref = useCallback(
+    (node: HTMLOrSVGElement | null) => {
+      if (!node || node === state.current.element) return
+      removeListeners(state, scrollChange)
+      state.current.element = node
+      state.current.scrollContainers = findScrollContainers(node)
+      addListeners(state, scrollChange, scroll)
+    },
+    [scroll, scrollChange]
+  )
 
   // add general event listeners
   useOnWindowScroll(scrollChange, Boolean(scroll))
   useOnWindowResize(resizeChange)
 
   // respond to changes that are relevant for the listeners
   useEffect(() => {
-    removeListeners()
-    addListeners()
+    removeListeners(state, scrollChange)
+    addListeners(state, scrollChange, scroll)
   }, [scroll, scrollChange, resizeChange])
 
   // remove all listeners when the components unmounts
-  useEffect(() => removeListeners, [])
+  useEffect(() => () => removeListeners(state, scrollChange), [])
   return [ref, bounds, forceRefresh]
 }
 
@@ -175,6 +153,31 @@ function findScrollContainers(element: HTMLOrSVGElement | null): HTMLOrSVGElemen
   return [...result, ...findScrollContainers(element.parentElement)]
 }
 
+// cleanup current scroll-listeners / observers
+function removeListeners(state: MutableRefObject<State>, scrollChange: () => void) {
+  if (state.current.scrollContainers) {
+    state.current.scrollContainers.forEach((element) => element.removeEventListener('scroll', scrollChange, true))
+    state.current.scrollContainers = null
+  }
+
+  if (state.current.resizeObserver) {
+    state.current.resizeObserver.disconnect()
+    state.current.resizeObserver = null
+  }
+}
+
+// add scroll-listeners / observers
+function addListeners(state: MutableRefObject<State>, scrollChange: () => void, scroll?: boolean) {
+  if (!state.current.element) return
+  state.current.resizeObserver = new ResizeObserver(scrollChange)
+  state.current.resizeObserver!.observe(state.current.element)
+  if (scroll && state.current.scrollContainers) {
+    state.current.scrollContainers.forEach((scrollContainer) =>
+      scrollContainer.addEventListener('scroll', scrollChange, { capture: true, passive: true })
+    )
+  }
+}
+
 // Checks if element boundaries are equal
 const keys: (keyof RectReadOnly)[] = ['x', 'y', 'top', 'bottom', 'left', 'right', 'width', 'height']
 const areBoundsEqual = (a: RectReadOnly, b: RectReadOnly): boolean => keys.every((key) => a[key] === b[key])