diff --git a/src/VisualQueryBuilder/components/LabelFilterItem.tsx b/src/VisualQueryBuilder/components/LabelFilterItem.tsx index 3b76ed6..31d06e7 100644 --- a/src/VisualQueryBuilder/components/LabelFilterItem.tsx +++ b/src/VisualQueryBuilder/components/LabelFilterItem.tsx @@ -1,5 +1,5 @@ import { uniqBy } from 'lodash'; -import React, { useState } from 'react'; +import React, { useRef, useState } from 'react'; import { v4 } from 'uuid'; import { SelectableValue, toOption } from '@grafana/data'; @@ -71,7 +71,7 @@ export function LabelFilterItem({ }; const isConflicting = isConflictingLabelFilter(item, items); - const id = v4(); + const { current: id } = useRef(v4()); return (
diff --git a/src/VisualQueryBuilder/components/OperationEditor.tsx b/src/VisualQueryBuilder/components/OperationEditor.tsx index 62818b4..21d04ba 100644 --- a/src/VisualQueryBuilder/components/OperationEditor.tsx +++ b/src/VisualQueryBuilder/components/OperationEditor.tsx @@ -1,5 +1,5 @@ import { css, cx } from '@emotion/css'; -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { Draggable, DraggableProvided } from 'react-beautiful-dnd'; import { v4 } from 'uuid'; @@ -49,7 +49,7 @@ export function OperationEditor({ }: Props) { const def = queryModeller.getOperationDefinition(operation.id); const shouldFlash = useFlash(flash); - const id = v4(); + const { current: id } = useRef(v4()); const theme = useTheme2(); const isConflicting = isConflictingOperation ? isConflictingOperation(operation, query.operations) : false;