diff --git a/ui/src/app/metadata/hoc/MetadataSchema.js b/ui/src/app/metadata/hoc/MetadataSchema.js
index 5de2e3fc5..1e75986e3 100644
--- a/ui/src/app/metadata/hoc/MetadataSchema.js
+++ b/ui/src/app/metadata/hoc/MetadataSchema.js
@@ -23,7 +23,7 @@ export function MetadataSchema({ type, children, wizard = false }) {
 
     const [schema, setSchema] = React.useState();
 
-    async function loadSchema(type) {
+    const loadSchema = React.useCallback(async (type) => {
         const definition = wizard ? getWizard(type) : getDefinition(type);
         setDefinition(definition);
         setKind(type);
@@ -34,11 +34,12 @@ export function MetadataSchema({ type, children, wizard = false }) {
             setSchema(source);
         }
         setLoading(false);
-    }
+    }, [response.ok, get, wizard]);
 
-    React.useState(() => {
+    React.useEffect(() => {
         loadSchema(type);
-    }, [type]);
+        setSchema(null);
+    }, [type, loadSchema]);
 
     return (
         <MetadataDefinitionContext.Provider value={definition}>