From 71e5fc2e2392032693bd930aaf2dd3e8fdb55f94 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Mon, 4 Jan 2021 16:40:57 +0100
Subject: [PATCH] prevent double update (#86794) (#87136)

---
 .../public/react_expression_renderer.test.tsx | 29 +++++++++++++++++++
 .../public/react_expression_renderer.tsx      |  5 ++++
 2 files changed, 34 insertions(+)

diff --git a/src/plugins/expressions/public/react_expression_renderer.test.tsx b/src/plugins/expressions/public/react_expression_renderer.test.tsx
index 4ebd626e70fc3..c51640ede4885 100644
--- a/src/plugins/expressions/public/react_expression_renderer.test.tsx
+++ b/src/plugins/expressions/public/react_expression_renderer.test.tsx
@@ -146,6 +146,35 @@ describe('ExpressionRenderer', () => {
     instance.unmount();
   });
 
+  it('should not update twice immediately after rendering', () => {
+    jest.useFakeTimers();
+
+    const refreshSubject = new Subject();
+    const loaderUpdate = jest.fn();
+
+    (ExpressionLoader as jest.Mock).mockImplementation(() => {
+      return {
+        render$: new Subject(),
+        data$: new Subject(),
+        loading$: new Subject(),
+        update: loaderUpdate,
+        destroy: jest.fn(),
+      };
+    });
+
+    const instance = mount(
+      <ReactExpressionRenderer reload$={refreshSubject} expression="" debounce={1000} />
+    );
+
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    expect(loaderUpdate).toHaveBeenCalledTimes(1);
+
+    instance.unmount();
+  });
+
   it('waits for debounce period on other loader option change if specified', () => {
     jest.useFakeTimers();
 
diff --git a/src/plugins/expressions/public/react_expression_renderer.tsx b/src/plugins/expressions/public/react_expression_renderer.tsx
index eac2371ec66d0..b615f1bd7f8c6 100644
--- a/src/plugins/expressions/public/react_expression_renderer.tsx
+++ b/src/plugins/expressions/public/react_expression_renderer.tsx
@@ -91,7 +91,12 @@ export const ReactExpressionRenderer = ({
   );
   const [debouncedExpression, setDebouncedExpression] = useState(expression);
   const [waitingForDebounceToComplete, setDebouncePending] = useState(false);
+  const firstRender = useRef(true);
   useShallowCompareEffect(() => {
+    if (firstRender.current) {
+      firstRender.current = false;
+      return;
+    }
     if (debounce === undefined) {
       return;
     }