fix(@clayui/core): fixes bug when updating the state at render time and the number of table columns when the state changes

Author: matuzalemsteles

packages/clay-core/src/table/Head.tsx

@@ -7,7 +7,7 @@ import Button from '@clayui/button';
 import {ClayToggle as Toggle} from '@clayui/form';
 import Icon from '@clayui/icon';
 import Layout from '@clayui/layout';
-import React, {useMemo} from 'react';
+import React, {useEffect, useLayoutEffect} from 'react';
 
 import {ChildrenFunction, Collection, useCollection} from '../collection';
 import {Item, Menu} from '../drop-down';
@@ -36,6 +36,9 @@ const Header = React.forwardRef<HTMLLIElement, HeaderProps>(
 	}
 );
 
+const useIsomorphicEffect =
+	typeof window === 'undefined' ? useEffect : useLayoutEffect;
+
 type Props<T> = {
 	/**
 	 * Children content to render a dynamic or static content.
@@ -68,12 +71,13 @@ function HeadInner<T extends Record<string, any>>(
 		visibleKeys: new Set(visibleColumns.keys()),
 	});
 
-	useMemo(() => {
+	useIsomorphicEffect(() => {
+		console.log('test');
 		if (visibleColumns.size === 0) {
 			onVisibleColumnsChange(collection.getItems(), 0);
 		}
 		onHeadCellsChange(collection.getSize());
-	}, []);
+	}, [collection.getSize()]);
 
 	return (
 		<thead {...otherProps} ref={ref}>