Move state variable from state to ref to prevent infinite loop (#46)

* Update Contributing.md

CONTRIBUTING.md

@@ -16,6 +16,6 @@ Want to install this repo locally?
 
 Ready to release a new version?
 
-- create a pr and update the package.json and changelog to be how you'd like
-- merge the pr, that's it! (get's published to npm via https://github.com/grafana/grafana-aws-sdk-react/blob/main/.github/workflows/publish-npm.yml)
+- create a pr and update the package.json with the new version, as well as the changelog to be how you'd like
+- merge the pr, that's it! (the change in the version triggers a publish to npm via https://github.com/grafana/grafana-aws-sdk-react/blob/main/.github/workflows/publish-npm.yml)
 - a note we don't currently make tags/releases on github, but perhaps in the future we can do so

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/aws-sdk",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "description": "Common AWS features for grafana",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",

src/sql/ResourceSelector.tsx

@@ -1,7 +1,7 @@
 import { SelectableValue } from '@grafana/data';
 import { InlineField, Select, SelectCommonProps } from '@grafana/ui';
 import { isEqual } from 'lodash';
-import React, { useEffect, useMemo, useState, DependencyList } from 'react';
+import React, { useEffect, useMemo, useState, DependencyList, useRef } from 'react';
 
 import { defaultKey } from './types';
 
@@ -25,11 +25,19 @@ export interface ResourceSelectorProps extends SelectCommonProps<string> {
 }
 
 export function ResourceSelector(props: ResourceSelectorProps) {
-  const [resource, setResource] = useState<string | null>(props.value || props.default || null);
-  const [resources, setResources] = useState<Array<string | SelectableValue>>(resource ? [resource] : []);
-  const [dependencies, setDependencies] = useState(props.dependencies);
+  const propsDependencies = props.dependencies;
+  const propsOnChange = props.onChange
+
+  const dependencies = useRef(props.dependencies);
+  const fetched = useRef<boolean>(false);
+  const resource = useRef<string | null>(props.value || props.default || null);
+
+  const [resources, setResources] = useState<Array<string | SelectableValue>>(
+    resource.current ? [resource.current] : []
+  );
   const [isLoading, setIsLoading] = useState(false);
-  const [fetched, setFetched] = useState(false);
+
+
   const defaultOpts = useMemo(() => {
     const opts: Array<SelectableValue<string>> = [
       {
@@ -66,16 +74,16 @@ export function ResourceSelector(props: ResourceSelectorProps) {
 
   useEffect(() => {
     // A change in the dependencies cause a state clean-up
-    if (!isEqual(props.dependencies, dependencies)) {
-      setFetched(false);
-      setResource(null);
-      props.onChange(null);
-      setDependencies(props.dependencies);
+    if (!isEqual(propsDependencies, dependencies.current)) {
+      fetched.current = false;
+      resource.current = null;
+      dependencies.current = propsDependencies
+      propsOnChange(null);
     }
-  }, [props, dependencies]);
+  }, [propsDependencies, propsOnChange]);
 
   const fetch = async () => {
-    if (fetched) {
+    if (fetched.current) {
       return;
     }
     if (props.saveOptions) {
@@ -85,14 +93,14 @@ export function ResourceSelector(props: ResourceSelectorProps) {
       const resources = (await props.fetch?.()) || [];
       setResources(resources);
     } finally {
-      setFetched(true);
+      fetched.current = true;
     }
   };
 
   const onChange = (e: SelectableValue<string>) => {
-    props.onChange(e);
+    propsOnChange(e);
     if (e.value) {
-      setResource(e.value);
+      resource.current = e.value;
     }
   };
   const onClick = async () => {