diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx index 80d7c8a611360a..4d6615f4347db7 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { useState, useEffect, useMemo, useContext, useCallback } from 'react'; +import React, { useState, useEffect, useMemo, useContext, useCallback, useRef } from 'react'; import classNames from 'classnames'; import { FormattedMessage } from '@kbn/i18n-react'; import { toExpression } from '@kbn/interpreter'; @@ -122,8 +122,6 @@ export const WorkspacePanel = React.memo(function WorkspacePanel(props: Workspac ); }); -let expressionToRender: null | undefined | string; - // Exported for testing purposes only. export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ framePublicAPI, @@ -151,11 +149,7 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ initialRenderComplete: false, }); - useEffect(() => { - return () => { - expressionToRender = null; - }; - }, []); + const expressionToRender = useRef(); const shouldApplyExpression = autoApplyEnabled || !localState.initialRenderComplete || triggerApply; @@ -262,16 +256,19 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ }, [_expression, dispatchLens]); if (shouldApplyExpression) { - expressionToRender = _expression; + expressionToRender.current = _expression; } if (!autoApplyEnabled) { - dispatchLens(setChangesApplied(_expression === expressionToRender)); + dispatchLens(setChangesApplied(_expression === expressionToRender.current)); } - const expressionExists = Boolean(expressionToRender); + const expressionExists = Boolean(expressionToRender.current); // null signals an empty workspace which should count as an initial render - if ((expressionExists || expressionToRender === null) && !localState.initialRenderComplete) { + if ( + (expressionExists || expressionToRender.current === null) && + !localState.initialRenderComplete + ) { setLocalState((s) => ({ ...s, initialRenderComplete: true })); } @@ -375,12 +372,12 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ }; const renderVisualization = () => { - if (expressionToRender === null) { + if (expressionToRender.current === null) { return renderEmptyWorkspace(); } return (