fix(@clayui/core): fixes error when deselecting the indeterminate sta…

…te for pre selected items in the first render

This behavior should only happen when items change, as in React.js, regardless of the first render it will invoke useEffect, in this scenario this ends up breaking the hydrate behavior of the first render for the selected items.

So we prevent this case from being computed on the first rendering and only being called when the items change.

packages/clay-core/src/hooks/index.ts

@@ -4,4 +4,5 @@
  */
 
 export {useIsMounted} from './useIsMounted';
+export {useIsFirstRender} from './useIsFirstRender';
 export {useForwardRef} from './useForwardRef';

packages/clay-core/src/hooks/useIsFirstRender.ts

@@ -0,0 +1,18 @@
+/**
+ * SPDX-FileCopyrightText: © 2023 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {useRef} from 'react';
+
+export function useIsFirstRender(): boolean {
+	const isFirst = useRef(true);
+
+	if (isFirst.current) {
+		isFirst.current = false;
+
+		return true;
+	}
+
+	return isFirst.current;
+}

packages/clay-core/src/tree-view/useMultipleSelection.tsx

@@ -7,6 +7,7 @@ import {useControlledState} from '@clayui/shared';
 import {Key, useCallback, useEffect, useMemo, useRef} from 'react';
 
 import {getKey} from '../collection';
+import {useIsFirstRender} from '../hooks';
 import {ITreeProps, createImmutableTree} from './useTree';
 
 import type {ICollectionProps} from './Collection';
@@ -125,6 +126,8 @@ export function useMultipleSelection<T extends Record<string, any>>(
 		value: props.selectedKeys,
 	});
 
+	const isFirstRender = useIsFirstRender();
+
 	/**
 	 * We are using `useMemo` to do indeterminate state revalidation in the
 	 * render cycle instead of in the `useEffect` which happens after rendering.
@@ -170,11 +173,16 @@ export function useMultipleSelection<T extends Record<string, any>>(
 	}, [selectedKeys]);
 
 	/**
-	 * This useEffect causes useMemo to be called every time the items change which can cause performance issues. We cannot change the useMemo because it is needed in other treeview cases. This should be improved in the future.
+	 * This useEffect causes useMemo to be called every time the items change which
+	 * can cause performance issues. We cannot change the useMemo because it is
+	 * needed in other treeview cases. This should be improved in the future.
 	 */
-
 	useEffect(() => {
-		if (props.selectionMode === 'multiple-recursive' && !isUncontrolled) {
+		if (
+			!isFirstRender &&
+			props.selectionMode === 'multiple-recursive' &&
+			!isUncontrolled
+		) {
 			const newSelectedKeys = new Set(selectedKeys);
 
 			props.layoutKeys.current.forEach((keyMap, key) => {