From f341815aba2035b7a6ea581f4c71437f6f2b2d8c Mon Sep 17 00:00:00 2001
From: Juan Cazala <juancazala@gmail.com>
Date: Thu, 27 Apr 2023 18:31:19 -0300
Subject: [PATCH] refactor: use ref instead of state

---
 .../@dcl/inspector/src/hooks/editor/useSnap.ts    | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/@dcl/inspector/src/hooks/editor/useSnap.ts b/packages/@dcl/inspector/src/hooks/editor/useSnap.ts
index 9e5c789b8..286f39760 100644
--- a/packages/@dcl/inspector/src/hooks/editor/useSnap.ts
+++ b/packages/@dcl/inspector/src/hooks/editor/useSnap.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { snapManager } from '../../lib/babylon/decentraland/snap-manager'
 import { GizmoType } from '../../lib/utils/gizmo'
 
@@ -26,16 +26,15 @@ function setSnapValue(value: number, gizmo: GizmoType) {
 
 export const useSnapState = (gizmo: GizmoType) => {
   const [snap, setSnapInternal] = useState<string>(getSnapValue(gizmo).toString())
-  // TODO: useRef, avoid re-renders
-  const [skipSync, setSkipSync] = useState<boolean>(false)
+  const skipSyncRef = useRef(false)
   const setSnap = useCallback((value: string, skipSync = false) => {
-    setSkipSync(skipSync)
+    skipSyncRef.current = skipSync
     setSnapInternal(value)
   }, [])
 
   // send update to snap manager
   useEffect(() => {
-    if (skipSync) return
+    if (skipSyncRef.current) return
     const current = getSnapValue(gizmo)
     const numeric = Number(snap)
     if (snap === '' || isNaN(numeric) || numeric === current || numeric < 0) return
@@ -57,16 +56,16 @@ export const useSnapState = (gizmo: GizmoType) => {
 
 export const useSnapToggle = () => {
   const [isEnabled, setEnabledInternal] = useState<boolean>(snapManager.isEnabled())
-  const [skipSync, setSkipSync] = useState<boolean>(false)
+  const skipSyncRef = useRef(false)
   const setEnabled = useCallback((value: boolean, skipSync = false) => {
-    setSkipSync(skipSync)
+    skipSyncRef.current = skipSync
     setEnabledInternal(value)
   }, [])
   const toggle = useCallback(() => setEnabled(!isEnabled), [isEnabled])
 
   // send update to snap manager
   useEffect(() => {
-    if (skipSync) return
+    if (skipSyncRef.current) return
     snapManager.setEnabled(isEnabled)
   }, [isEnabled])