feat: only renders arrays and blocks once they are initialized

src/admin/components/forms/field-types/Array/Array.tsx

@@ -59,7 +59,7 @@ const ArrayFieldType: React.FC<Props> = (props) => {
 
   const { preferencesKey, preferences } = useDocumentInfo();
   const { setPreference } = usePreferences();
-  const [rows, dispatchRows] = useReducer(reducer, []);
+  const [rows, dispatchRows] = useReducer(reducer, undefined);
   const formContext = useForm();
   const { user } = useAuth();
   const { id } = useDocumentInfo();
@@ -191,7 +191,7 @@ const ArrayFieldType: React.FC<Props> = (props) => {
     }
   }, [rows, setValue]);
 
-  const hasMaxRows = maxRows && rows.length >= maxRows;
+  const hasMaxRows = maxRows && rows?.length >= maxRows;
 
   const classes = [
     'field-type',
@@ -199,6 +199,8 @@ const ArrayFieldType: React.FC<Props> = (props) => {
     className,
   ].filter(Boolean).join(' ');
 
+  if (!rows) return null;
+
   return (
     <DragDropContext onDragEnd={onDragEnd}>
       <div

src/admin/components/forms/field-types/Blocks/Blocks.tsx

@@ -61,7 +61,7 @@ const Blocks: React.FC<Props> = (props) => {
 
   const { preferencesKey, preferences } = useDocumentInfo();
   const { setPreference } = usePreferences();
-  const [rows, dispatchRows] = useReducer(reducer, []);
+  const [rows, dispatchRows] = useReducer(reducer, undefined);
   const formContext = useForm();
   const { user } = useAuth();
   const { id } = useDocumentInfo();
@@ -201,7 +201,7 @@ const Blocks: React.FC<Props> = (props) => {
     }
   }, [rows, setValue]);
 
-  const hasMaxRows = maxRows && rows.length >= maxRows;
+  const hasMaxRows = maxRows && rows?.length >= maxRows;
 
   const classes = [
     'field-type',
@@ -209,6 +209,8 @@ const Blocks: React.FC<Props> = (props) => {
     className,
   ].filter(Boolean).join(' ');
 
+  if (!rows) return null;
+
   return (
     <DragDropContext onDragEnd={onDragEnd}>
       <div

src/admin/components/forms/field-types/rowReducer.tsx

@@ -44,7 +44,7 @@ type MOVE = {
 type Action = SET_ALL | SET_COLLAPSE | SET_ALL_COLLAPSED | ADD | REMOVE | MOVE;
 
 const reducer = (currentState: Row[], action: Action): Row[] => {
-  const stateCopy = [...currentState];
+  const stateCopy = [...currentState || []];
 
   switch (action.type) {
     case 'SET_ALL': {

test/fields/collections/Tabs/index.ts

@@ -9,6 +9,7 @@ const TabsFields: CollectionConfig = {
       tabs: [
         {
           label: 'Tab One',
+          description: 'Here is a description for tab one',
           fields: [
             {
               name: 'array',
@@ -26,6 +27,7 @@ const TabsFields: CollectionConfig = {
         },
         {
           label: 'Tab Two',
+          description: 'Description for tab two',
           fields: [
             {
               name: 'text',
@@ -36,6 +38,7 @@ const TabsFields: CollectionConfig = {
         },
         {
           label: 'Tab Three',
+          description: 'Description for tab three',
           fields: [
             {
               name: 'number',