diff --git a/src/vis/EagerVis.tsx b/src/vis/EagerVis.tsx
index 9ca021797..5c0894970 100644
--- a/src/vis/EagerVis.tsx
+++ b/src/vis/EagerVis.tsx
@@ -204,76 +204,40 @@ export function EagerVis({
 
   const { getVisByType } = useVisProvider();
 
-  // Each time you switch between vis config types, there is one render where the config is inconsistent with the type before the merge functions in the useEffect below can be called.
-  // To ensure that we never render an incosistent config, keep a consistent and a current in the config. Always render the consistent.
   // eslint-disable-next-line @typescript-eslint/naming-convention
-  const [{ consistent: visConfig, current: inconsistentVisConfig }, _setVisConfig] = React.useState<{
-    consistent: BaseVisConfig;
-    current: BaseVisConfig;
-  }>(
-    externalConfig
-      ? { consistent: null, current: externalConfig }
+  const [_visConfig, _setVisConfig] = useUncontrolled({
+    value: externalConfig?.type ? getVisByType(externalConfig?.type)?.mergeConfig(columns, externalConfig) : null,
+    defaultValue: externalConfig
+      ? null
       : columns.filter((c) => c.type === EColumnTypes.NUMERICAL).length > 1
-        ? {
-            consistent: null,
-            current: {
-              type: ESupportedPlotlyVis.SCATTER,
-              numColumnsSelected: [],
-              color: null,
-              numColorScaleType: ENumericalColorScaleType.SEQUENTIAL,
-              shape: null,
-              dragMode: EScatterSelectSettings.RECTANGLE,
-              alphaSliderVal: 0.5,
-            } as BaseVisConfig,
-          }
-        : {
-            consistent: null,
-            current: {
-              type: ESupportedPlotlyVis.BAR,
-              multiples: null,
-              group: null,
-              direction: EBarDirection.HORIZONTAL,
-              display: EBarDisplayType.ABSOLUTE,
-              groupType: EBarGroupingType.STACK,
-              numColumnsSelected: [],
-              catColumnSelected: null,
-              aggregateColumn: null,
-              aggregateType: EAggregateTypes.COUNT,
-            } as BaseVisConfig,
-          },
-  );
-
-  const setExternalConfigRef = useSyncedRef(setExternalConfig);
-  useEffect(() => {
-    setExternalConfigRef.current?.(visConfig);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(visConfig), setExternalConfigRef]);
-
-  const setVisConfig = React.useCallback((newConfig: BaseVisConfig) => {
-    _setVisConfig((oldConfig) => {
-      return {
-        current: newConfig,
-        consistent: oldConfig.current.type !== newConfig.type ? oldConfig.consistent : newConfig,
-      };
-    });
-  }, []);
-
-  React.useEffect(() => {
-    const vis = getVisByType(inconsistentVisConfig?.type);
-    if (vis) {
-      const newConfig = vis.mergeConfig(columns, inconsistentVisConfig);
-      _setVisConfig({ current: newConfig, consistent: newConfig });
-    }
-
-    // DANGER:: this useEffect should only occur when the visConfig.type changes. adding visconfig into the dep array will cause an infinite loop.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [inconsistentVisConfig?.type, getVisByType]);
+        ? ({
+            type: ESupportedPlotlyVis.SCATTER,
+            numColumnsSelected: [],
+            color: null,
+            numColorScaleType: ENumericalColorScaleType.SEQUENTIAL,
+            shape: null,
+            dragMode: EScatterSelectSettings.RECTANGLE,
+            alphaSliderVal: 0.5,
+          } as BaseVisConfig)
+        : ({
+            type: ESupportedPlotlyVis.BAR,
+            multiples: null,
+            group: null,
+            direction: EBarDirection.HORIZONTAL,
+            display: EBarDisplayType.ABSOLUTE,
+            groupType: EBarGroupingType.STACK,
+            numColumnsSelected: [],
+            catColumnSelected: null,
+            aggregateColumn: null,
+            aggregateType: EAggregateTypes.COUNT,
+          } as BaseVisConfig),
+    onChange: setExternalConfig,
+  });
 
-  useEffect(() => {
-    if (externalConfig) {
-      setVisConfig(externalConfig);
-    }
-  }, [externalConfig, setVisConfig]);
+  const setVisConfig = (v: BaseVisConfig) => {
+    const withDefaults = getVisByType(v.type)?.mergeConfig(columns, v);
+    _setVisConfig(withDefaults);
+  };
 
   // Converting the selected list into a map, since searching through the list to find an item is common in the vis components.
   const selectedMap: { [key: string]: boolean } = useMemo(() => {
@@ -309,17 +273,17 @@ export function EagerVis({
     };
   }, [colors]);
 
-  if (!visConfig) {
-    return <div className="tdp-busy" />;
-  }
-
   const commonProps = {
     showSidebar,
     setShowSidebar,
     enableSidebar,
   };
 
-  const Renderer = getVisByType(visConfig?.type)?.renderer;
+  const Renderer = getVisByType(_visConfig?.type)?.renderer;
+
+  if (!_visConfig || !Renderer) {
+    return null;
+  }
 
   return (
     <Group
@@ -341,35 +305,33 @@ export function EagerVis({
       {enableSidebar && !showSidebar ? <VisSidebarOpenButton onClick={() => setShowSidebar(!showSidebar)} /> : null}
 
       <Stack gap={0} style={{ width: '100%', height: '100%', overflow: 'hidden' }} align="stretch" ref={ref}>
-        {Renderer ? (
-          <Renderer
-            config={visConfig}
-            dimensions={dimensions}
-            optionsConfig={{
-              color: {
-                enable: true,
-              },
-            }}
-            showDragModeOptions={showDragModeOptions}
-            shapes={shapes}
-            setConfig={setVisConfig}
-            filterCallback={filterCallback}
-            selectionCallback={selectionCallback}
-            selectedMap={selectedMap}
-            selectedList={selected}
-            columns={columns}
-            scales={scales}
-            showSidebar={showSidebar}
-            showCloseButton={showCloseButton}
-            closeButtonCallback={closeCallback}
-            scrollZoom={scrollZoom}
-            {...commonProps}
-          />
-        ) : null}
+        <Renderer
+          config={_visConfig}
+          dimensions={dimensions}
+          optionsConfig={{
+            color: {
+              enable: true,
+            },
+          }}
+          showDragModeOptions={showDragModeOptions}
+          shapes={shapes}
+          setConfig={setVisConfig}
+          filterCallback={filterCallback}
+          selectionCallback={selectionCallback}
+          selectedMap={selectedMap}
+          selectedList={selected}
+          columns={columns}
+          scales={scales}
+          showSidebar={showSidebar}
+          showCloseButton={showCloseButton}
+          closeButtonCallback={closeCallback}
+          scrollZoom={scrollZoom}
+          {...commonProps}
+        />
       </Stack>
       {showSidebar ? (
-        <VisSidebarWrapper config={visConfig} setConfig={setVisConfig} onClick={() => setShowSidebar(false)}>
-          <VisSidebar config={visConfig} columns={columns} filterCallback={filterCallback} setConfig={setVisConfig} />
+        <VisSidebarWrapper config={_visConfig} setConfig={setVisConfig} onClick={() => setShowSidebar(false)}>
+          <VisSidebar config={_visConfig} columns={columns} filterCallback={filterCallback} setConfig={setVisConfig} />
         </VisSidebarWrapper>
       ) : null}
     </Group>
diff --git a/src/vis/heatmap/HeatmapGrid.tsx b/src/vis/heatmap/HeatmapGrid.tsx
index 40872f2b6..2a5eed012 100644
--- a/src/vis/heatmap/HeatmapGrid.tsx
+++ b/src/vis/heatmap/HeatmapGrid.tsx
@@ -34,11 +34,8 @@ export function HeatmapGrid({
 
   return (
     <Stack align="center" justify="center" style={{ width: '100%', height: '100%' }} p="sm">
-      {status === 'pending' ? (
-        <Loader />
-      ) : !hasAtLeast2CatCols ? (
-        <InvalidCols headerMessage="Invalid settings" bodyMessage="To create a heatmap chart, select at least 2 categorical columns." />
-      ) : (
+      {status === 'pending' && <Loader />}
+      {status === 'success' && hasAtLeast2CatCols && (
         <Heatmap
           column1={allColumns.catColumn[0]}
           column2={allColumns.catColumn[1]}
@@ -50,6 +47,9 @@ export function HeatmapGrid({
           selectionCallback={selectionCallback}
         />
       )}
+      {status === 'success' && !hasAtLeast2CatCols && (
+        <InvalidCols headerMessage="Invalid settings" bodyMessage="To create a heatmap chart, select at least 2 categorical columns." />
+      )}
     </Stack>
   );
 }
diff --git a/src/vis/heatmap/HeatmapText.tsx b/src/vis/heatmap/HeatmapText.tsx
index bfaebadad..182cb7e28 100644
--- a/src/vis/heatmap/HeatmapText.tsx
+++ b/src/vis/heatmap/HeatmapText.tsx
@@ -26,7 +26,7 @@ export function HeatmapText({
   isImmediate: boolean;
 }) {
   const labelSpacing = useMemo(() => {
-    const maxLabelLength = d3.max(yScale.domain().map((m) => m.length));
+    const maxLabelLength = d3.max(yScale.domain().map((m) => m?.length));
 
     return maxLabelLength > 5 ? 35 : maxLabelLength * 7;
   }, [yScale]);