Strict TS typing for useResizeObserver (#3859)

* Strict type useResizeObserver

* Release notes

* Fix typecheck error

packages/desktop-client/src/components/budget/BudgetSummaries.tsx

@@ -31,7 +31,7 @@ export function BudgetSummaries({ SummaryComponent }: BudgetSummariesProps) {
     config: { mass: 3, tension: 600, friction: 80 },
   }));
 
-  const containerRef = useResizeObserver(
+  const containerRef = useResizeObserver<HTMLDivElement>(
     useCallback(rect => {
       setWidthState(rect.width);
     }, []),

packages/desktop-client/src/components/sidebar/Sidebar.tsx

@@ -61,7 +61,7 @@ export function Sidebar() {
     dispatch(replaceModal('add-account'));
   };
 
-  const containerRef = useResizeObserver(rect => {
+  const containerRef = useResizeObserver<HTMLDivElement>(rect => {
     setSidebarWidth(rect.width);
   });
 

packages/desktop-client/src/hooks/useResizeObserver.ts

@@ -1,20 +1,19 @@
-// @ts-strict-ignore
 import { useRef, useCallback } from 'react';
 
-export function useResizeObserver(
+export function useResizeObserver<T extends Element>(
   func: (contentRect: DOMRectReadOnly) => void,
-): (el: unknown) => void {
-  const observer = useRef(null);
+): (el: T) => void {
+  const observer = useRef<ResizeObserver | undefined>(undefined);
   if (!observer.current) {
     observer.current = new ResizeObserver(entries => {
       func(entries[0].contentRect);
     });
   }
 
-  const elementRef = useCallback(el => {
-    observer.current.disconnect();
+  const elementRef = useCallback((el: T) => {
+    observer.current?.disconnect();
     if (el) {
-      observer.current.observe(el, { box: 'border-box' });
+      observer.current?.observe(el, { box: 'border-box' });
     }
   }, []);
 

upcoming-release-notes/3859.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Strict TS typing for useResizeObserver.ts