disable react custom hook

frontend/src/app.tsx

@@ -5,22 +5,27 @@ import { queryClient } from '@/lib/react-query';
 import { Toaster } from 'react-hot-toast';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { NODE_ENV } from './config';
-import { disableReactDevTools } from '@fvilers/disable-react-devtools';
-
-if (NODE_ENV === 'production') {
-  disableReactDevTools();
-}
+import useDisableReactDevTools from '@/hooks/useDisableReactDevTools';
 
 const App = () => {
+  // Disable React DevTools in production
+  useDisableReactDevTools();
+
   return (
     <QueryClientProvider client={queryClient}>
+      {/* Toaster for showing notifications */}
       <Toaster position="bottom-left" />
+
+      {/* AuthProvider to manage authentication state */}
       <AuthProvider>
+        {/* AppProvider to manage application-specific state */}
         <AppProvider>
+          {/* AppRoute to handle routing */}
           <AppRoute />
         </AppProvider>
       </AuthProvider>
+
+      {/* React Query DevTools for debugging */}
       <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
   );

frontend/src/hooks/useDisableReactDevTools/index.tsx

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+import { disableReactDevTools } from '@fvilers/disable-react-devtools';
+import { NODE_ENV } from '@/config';
+
+const useDisableReactDevTools = () => {
+  useEffect(() => {
+    if (NODE_ENV === 'production') {
+      disableReactDevTools();
+    }
+  }, []);
+};
+
+export default useDisableReactDevTools;