From 2043e73a78ca090cb41fc686baedef6f633cf9a1 Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Thu, 2 Nov 2023 16:12:37 +0100
Subject: [PATCH] fix firefox recoil snapshot bug

---
 .../modules/debug/components/RecoilDebugObserver.tsx  | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/front/src/modules/debug/components/RecoilDebugObserver.tsx b/front/src/modules/debug/components/RecoilDebugObserver.tsx
index 20bb725cf07c..5031c1963f9c 100644
--- a/front/src/modules/debug/components/RecoilDebugObserver.tsx
+++ b/front/src/modules/debug/components/RecoilDebugObserver.tsx
@@ -1,5 +1,4 @@
-import { useEffect } from 'react';
-import { useRecoilSnapshot, useRecoilValue } from 'recoil';
+import { useRecoilTransactionObserver_UNSTABLE, useRecoilValue } from 'recoil';
 
 import { isDebugModeState } from '@/client-config/states/isDebugModeState';
 import { logDebug } from '~/utils/logDebug';
@@ -16,15 +15,12 @@ const formatTitle = (stateName: string) => {
 };
 
 export const RecoilDebugObserverEffect = () => {
-  const snapshot = useRecoilSnapshot();
-
   const isDebugMode = useRecoilValue(isDebugModeState);
 
-  useEffect(() => {
+  useRecoilTransactionObserver_UNSTABLE(({ snapshot }) => {
     if (!isDebugMode) {
       return;
     }
-
     for (const node of Array.from(
       snapshot.getNodes_UNSTABLE({ isModified: true }),
     )) {
@@ -40,7 +36,6 @@ export const RecoilDebugObserverEffect = () => {
 
       console.groupEnd();
     }
-  }, [isDebugMode, snapshot]);
-
+  });
   return null;
 };