Expression renderer component: Prevent double update

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();
 

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;
     }