From 4e7b3cc8003adfcaf98083a91da4f4b23236d678 Mon Sep 17 00:00:00 2001
From: samuelarbibe <samuel.arbibe@gmail.com>
Date: Fri, 23 Aug 2024 14:15:30 +0300
Subject: [PATCH] fix: store timeframe ref in useState

---
 .../dnd-timeline/src/hooks/useElementRef.tsx  | 31 +++++++++----------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/packages/dnd-timeline/src/hooks/useElementRef.tsx b/packages/dnd-timeline/src/hooks/useElementRef.tsx
index 4389fb3..85a25d1 100644
--- a/packages/dnd-timeline/src/hooks/useElementRef.tsx
+++ b/packages/dnd-timeline/src/hooks/useElementRef.tsx
@@ -1,35 +1,34 @@
-import { useCallback, useRef, useState } from "react";
+import { type MutableRefObject, useCallback, useRef, useState } from "react";
 import ResizeObserver from "resize-observer-polyfill";
 
 export default function useElementRef() {
-	const ref = useRef<HTMLElement | null>(null);
+	const [ref, setRef] = useState<MutableRefObject<HTMLElement | null>>({
+		current: null,
+	});
 	const [width, setWidth] = useState(0);
 	const [direction, setDirection] = useState<CanvasDirection>("ltr");
 
 	const resizeObserver = useRef<ResizeObserver>();
 
-	const setRef = useCallback((element: HTMLElement | null) => {
-		if (element !== ref.current) {
-			resizeObserver.current?.disconnect();
+	const onSetRef = useCallback((element: HTMLElement | null) => {
+		resizeObserver.current?.disconnect();
 
-			if (element) {
-				resizeObserver.current = new ResizeObserver((entries) => {
-					for (const entry of entries) {
-						setWidth(entry.contentRect.width);
-					}
-				});
+		if (element) {
+			resizeObserver.current = new ResizeObserver((entries) => {
+				setWidth(entries[0].contentRect.width);
+			});
 
-				resizeObserver.current.observe(element);
+			resizeObserver.current.observe(element);
 
-				setDirection(getComputedStyle(element).direction as CanvasDirection);
-			}
+			setDirection(getComputedStyle(element).direction as CanvasDirection);
 		}
-		ref.current = element;
+
+		setRef({ current: element });
 	}, []);
 
 	return {
 		ref,
-		setRef,
+		setRef: onSetRef,
 		width,
 		direction,
 	};