perf: synchronous updates (#2)

* perf: synchronous updates

This refactors `useTextWidth` to make use of `useMemo` so that updates are synchronous.
Additionally this moves `getTextWidth` and `getContext` to the module scope so that they do not need to be redeclared on every effect call.

* refactor: strict definitions

Signed-off-by: wSedlacek <wsedlacekc@gmail.com>

* feat!: improve options interface

BREAKING CHANGE: This requires `text` OR `ref` to be defined both via the TypeScript interface and at runtime.

Signed-off-by: wSedlacek <wsedlacekc@gmail.com>

* fix: restore memorization deps

Signed-off-by: wSedlacek <wsedlacekc@gmail.com>

* style: fix linting errors

Signed-off-by: wSedlacek <wsedlacekc@gmail.com>

* test: element ref object test

Signed-off-by: wSedlacek <wsedlacekc@gmail.com>

* test: hook updates

Signed-off-by: wSedlacek <wsedlacekc@gmail.com>

* refactor: fix strict mode example

Signed-off-by: wSedlacek <wsedlacekc@gmail.com>

* feat: support undefined text

Signed-off-by: wSedlacek <wsedlacekc@gmail.com>

* chore: version bump 1.1

Signed-off-by: wSedlacek <wsedlacekc@gmail.com>

Author: William Sedlacek

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tag0/use-text-width",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React hook to measure text width",
   "repository": {
     "type": "git",

src/__tests__/useTextWidth.test.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
 import { renderHook } from '@testing-library/react-hooks';
 import useTextWidth from '../useTextWidth';
 
 describe('useTextWidth', () => {
-  const setup = ({ text, font }: { text: string | string[]; font?: string }) =>
-    renderHook(() => useTextWidth({ text, font }));
+  const setup = (initialProps: { text: string | string[]; font?: string }) =>
+    renderHook((initialProps) => useTextWidth(initialProps), { initialProps });
 
   test('calculate text width with default font', () => {
     const { result } = setup({ text: 'Hello world!' });
@@ -20,4 +19,45 @@ describe('useTextWidth', () => {
     const { result } = setup({ text: ['foo', 'Hello world!', 'bar'] });
     expect(result.current).toBe(81);
   });
+
+  test('updates results when inputs are changed', () => {
+    const { result, rerender } = setup({ text: 'bar' });
+    expect(result.current).toBe(20);
+    rerender({ text: 'Hello world!' });
+    expect(result.current).toBe(81);
+  });
+
+  test('calculates text width of existing dom element', () => {
+    const el = document.createElement('span');
+    el.textContent = 'Hello World!';
+    const { result } = renderHook(() => useTextWidth({ ref: { current: el } }));
+    expect(result.current).toBe(54);
+  });
+
+  test('calculates text width of empty element', () => {
+    // Getting an element that returns `null` for `textContent`
+    // isn't easy
+    const proxy = new Proxy(document.createElement('img'), {
+      get(el, p) {
+        if (p === 'textContent') {
+          return null;
+        }
+
+        return el[p as keyof typeof el];
+      }
+    });
+
+    const { result } = renderHook(() => useTextWidth({ ref: { current: proxy } }));
+    expect(result.current).toBe(NaN);
+  });
+
+  test('ref returns NaN when null', () => {
+    const { result } = renderHook(() => useTextWidth({ ref: { current: null } }));
+    expect(result.current).toBe(NaN);
+  });
+
+  test('undefined text returns NaN', () => {
+    const { result } = renderHook(() => useTextWidth({ text: undefined }));
+    expect(result.current).toBe(NaN);
+  });
 });

src/examples/ref.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import useTextWidth from '../useTextWidth';
 
 const App = () => {
-  const ref = useRef();
+  const ref = useRef(null);
   const width = useTextWidth({ ref });
 
   console.log(width);

src/useTextWidth.tsx

@@ -1,44 +1,55 @@
-import React, { useEffect, useState } from 'react';
+import { RefObject, useMemo } from 'react';
+
+export type useTextWidthTextOptions = {
+  text: string | string[] | undefined;
+  font?: string;
+};
+
+export type useTextWidthRefOptions = {
+  ref: RefObject<Element>;
+};
 
 export interface useTextWidthType {
-  ({ text, font, ref }: { text?: string | string[]; font?: string; ref?: any }): number;
+  (options: useTextWidthTextOptions | useTextWidthRefOptions): number;
 }
 
-const useTextWidth: useTextWidthType = ({ text, ref, font = '16px Times' }) => {
-  const [width, setWidth] = useState(-1);
+const getContext = () => {
+  const fragment: DocumentFragment = document.createDocumentFragment();
+  const canvas: HTMLCanvasElement = document.createElement('canvas');
+  fragment.appendChild(canvas);
+  return canvas.getContext('2d') as CanvasRenderingContext2D;
+};
 
-  useEffect(() => {
-    const getContext = () => {
-      const fragment: DocumentFragment = document.createDocumentFragment();
-      const canvas: HTMLCanvasElement = document.createElement('canvas');
-      fragment.appendChild(canvas);
-      return canvas.getContext('2d');
-    };
+const getTextWidth = (currentText: string | string[], font: string) => {
+  const context = getContext();
+  context.font = font;
 
-    const getTextWidth = (currentText: string | string[]) => {
-      const context = getContext();
-      context.font = font;
+  if (Array.isArray(currentText)) {
+    return Math.max(...currentText.map((t) => context.measureText(t).width));
+  } else {
+    const metrics = context.measureText(currentText);
+    return metrics.width;
+  }
+};
 
-      if (Array.isArray(currentText)) {
-        return Math.max(...currentText.map((t) => context.measureText(t).width));
-      } else {
-        const metrics = context.measureText(currentText);
-        return metrics.width;
-      }
-    };
+const useTextWidth: useTextWidthType = (options) => {
+  const textOptions = useMemo(() => ('text' in options ? options : undefined), [options]);
+  const refOptions = useMemo(() => ('ref' in options ? options : undefined), [options]);
 
-    if (ref && ref.current) {
+  return useMemo(() => {
+    if (refOptions?.ref.current?.textContent) {
       const context = getContext();
-      const computedStyles = window.getComputedStyle(ref.current);
+      const computedStyles = window.getComputedStyle(refOptions.ref.current);
       context.font = computedStyles.font;
-      const metrics = context.measureText(ref.current.textContent);
-      setWidth(metrics.width);
-    } else if (text) {
-      setWidth(getTextWidth(text));
+      const metrics = context.measureText(refOptions.ref.current.textContent);
+
+      return metrics.width;
+    } else if (textOptions?.text) {
+      return getTextWidth(textOptions.text, textOptions.font ?? '16px times');
     }
-  }, [font, ref, text]);
 
-  return width;
+    return NaN;
+  }, [textOptions?.text, textOptions?.font, refOptions?.ref]);
 };
 
 export default useTextWidth;

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "strict": true,
     "baseUrl": ".",
     "rootDir": "src",
     "outDir": "dist",