flagd-ui refactor: fixed eslint ignore comment with useCallback (open…

…-telemetry#1923)

* fixed eslint ignore comment with useCallback

* added change to changelog

CHANGELOG.md

@@ -72,6 +72,8 @@ the release.
   ([#1897](https://github.com/open-telemetry/opentelemetry-demo/pull/1897))
 * [frontend-proxy] rename frontendproxy to frontend-proxy
   ([#1910](https://github.com/open-telemetry/opentelemetry-demo/pull/1910))
+* [flagd-ui] fixed eslint ignore comment with useCallback
+  ([#1923](https://github.com/open-telemetry/opentelemetry-demo/pull/1923))
 
 ## 1.12.0
 

src/flagd-ui/src/components/advanced/AdvancedView.tsx

@@ -1,7 +1,7 @@
 // Copyright The OpenTelemetry Authors
 // SPDX-License-Identifier: Apache-2.0
 "use client";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useCallback } from "react";
 import FileEditor from "./FileEditor";
 import Ajv, { AnySchema } from "ajv";
 import { useLoading } from "../Layout";
@@ -17,6 +17,22 @@ export default function AdvancedView() {
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
   const { setIsLoading } = useLoading();
 
+  const requestSchemas = useCallback(async (url: string): Promise<AnySchema | null> => {
+    try {
+      setIsLoading(true);
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+      setIsLoading(false);
+      return data;
+    } catch (error: any) {
+      console.error("There was an error:", error.message);
+    }
+    return null;
+  }, [setIsLoading]);
+
   useEffect(() => {
     const readFile = async (file_name: string) => {
       try {
@@ -56,24 +72,8 @@ export default function AdvancedView() {
       return null;
     }
     loadSchema();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [ajv, requestSchemas]);
 
-  async function requestSchemas(url: string): Promise<AnySchema | null> {
-    try {
-      setIsLoading(true);
-      const response = await fetch(url);
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-      const data = await response.json();
-      setIsLoading(false);
-      return data;
-    } catch (error: any) {
-      console.error("There was an error:", error.message);
-    }
-    return null;
-  }
 
   function parseJSON(): string | null {
     try {