Fix collectable collection selecting initial items lazily

src/base/collection/hooks/useSelectableCollection.ts

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 export type SelectableCollectionReturnType<Id extends number | string, Key extends string = string> = {
     selectedItemIds: Id[];
@@ -134,6 +134,10 @@ export const useSelectableCollection = <Id extends number | string, Key extends
         setKeyToSelectedItemIds(initialState);
     }, [clearSelection, initialState]);
 
+    useEffect(() => {
+        setKeyToSelectedItemIds(initialState);
+    }, [initialState]);
+
     return {
         selectedItemIds,
         keySelectedItemIds,

src/base/components/settings/CheckboxListSetting.tsx

@@ -50,7 +50,7 @@ export function CheckboxListSetting<Item>({
     const { selectedItemIds, handleSelection, handleSelectAll, reset } = useSelectableCollection(items.length, {
         currentKey: 'default',
         itemIds,
-        initialState: { default: currentSelectedItemIds },
+        initialState: useMemo(() => ({ default: currentSelectedItemIds }), [currentSelectedItemIds]),
     });
 
     const handleCancel = () => {

src/features/category/components/CategorySelect.tsx

@@ -126,10 +126,13 @@ export function CategorySelect(props: CategorySelectProps) {
         'categoriesToAdd' | 'categoriesToRemove'
     >(allCategories.length, {
         currentKey: 'categoriesToAdd',
-        initialState: {
+        initialState: useMemo(
-            categoriesToAdd: [...mangaCategoryIds, ...defaultCategoryIds],
+            () => ({
-            categoriesToRemove: [],
+                categoriesToAdd: [...mangaCategoryIds, ...defaultCategoryIds],
-        },
+                categoriesToRemove: [],
+            }),
+            [mangaCategoryIds, defaultCategoryIds],
+        ),
     });
 
     useEffect(() => {