fix use-memo

README.md

@@ -462,7 +462,12 @@ const App = createComponent(() => {
     }, 1000);
   }, []);
 
-  return [<div>app</div>, <MemoHardComponent />];
+  return (
+    <>
+      <div>app</div>
+      <MemoHardComponent />
+    </>
+  );
 });
 
 render(<App />, document.getElementById('root'));
@@ -518,6 +523,27 @@ Suitable for memoizing handler functions descending down the component tree:
   );
 ```
 
+#### useDeferredValue
+
+Dark under the hood performs all recalculations in asynchronous mode so as not to block the main thread. Due to the task scheduler, you can achieve prioritization of interface updates. For example, make some updates more important than others, and vice versa - less important.
+
+```tsx
+import { useDeferredValue } from '@dark-engine/core';
+```
+This fixes an issue with an unresponsive interface when user input occurs, based on which heavy calculations or heavy rendering is recalculated.
+Returns a delayed value that may lag behind the main value. It can be combined with each other and with useMemo and memo for amazing responsiveness results...
+
+```tsx
+const Items = createComponent(({ items }) => {
+  const deferredItems = useDeferredValue(items);
+  const items = useMemo(() => {
+    return deferredItems.map(item => <li key={item.id}>{item.name}</li>);
+  }, [deferredItems]);
+
+  return <ul>{items}</ul>;
+});
+```
+
 ### Refs
 
 Refs are needed to be able to get a reference to a DOM element or a reference to a component in order to interact with them more subtly.
@@ -709,27 +735,6 @@ const App = createComponent(() => {
 });
 ```
 
-### Concurrent
-
-Dark under the hood performs all recalculations in asynchronous mode so as not to block the main thread. Due to the task scheduler, you can achieve prioritization of interface updates. For example, make some updates more important than others, and vice versa - less important.
-
-```tsx
-import { useDeferredValue } from '@dark-engine/core';
-```
-This fixes an issue with an unresponsive interface when user input occurs, based on which heavy calculations or heavy rendering is recalculated.
-Returns a delayed value that may lag behind the main value. It can be combined with each other and with useMemo and memo for amazing responsiveness results...
-
-```tsx
-const Items = createComponent(({ items }) => {
-  const deferredItems = useDeferredValue(items);
-  const items = useMemo(() => {
-    return deferredItems.map(item => <li key={item.id}>{item.name}</li>);
-  }, [deferredItems.length]);
-
-  return <ul>{items}</ul>;
-});
-```
-
 ### Portals
 
 This is a browser environment-specific ability to redirect the rendering flow to another element in the DOM tree. The main purpose is modal windows, dropdown menus and everything where it is necessary to avoid the possibility of being overlapped by the parent container due to configured css overflow.

examples/deferred.tsx

@@ -0,0 +1,51 @@
+import { h, createComponent, useState, useMemo, useDeferredValue } from '@dark-engine/core';
+import { render } from '@dark-engine/platform-browser';
+
+function generateProducts() {
+  const products: Array<string> = [];
+
+  for (let i = 0; i < 10000; i++) {
+    products.push(`Product ${i + 1}`);
+  }
+  return products;
+}
+
+const dummyProducts = generateProducts();
+
+function filterProducts(filterTerm) {
+  if (!filterTerm) {
+    return dummyProducts;
+  }
+
+  return dummyProducts.filter(product => product.toLowerCase().indexOf(filterTerm.toLowerCase()) !== -1);
+}
+
+type ProductListProps = {
+  products: Array<string>;
+};
+
+const ProductList = createComponent<ProductListProps>(({ products }) => {
+  const deferredProducts = useDeferredValue(products);
+  const items = useMemo(() => {
+    return deferredProducts.map(product => <li key={product}>{product}</li>);
+  }, [deferredProducts]);
+
+  return <ul>{items}</ul>;
+});
+
+const App = createComponent(() => {
+  const [name, setName] = useState('');
+  const deferredName = useDeferredValue(name);
+  const filteredProducts = useMemo(() => filterProducts(deferredName), [deferredName]);
+
+  const handleInput = e => setName(e.target.value);
+
+  return (
+    <div>
+      <input value={name} onInput={handleInput} />
+      <ProductList products={filteredProducts} />
+    </div>
+  );
+});
+
+render(<App />, document.getElementById('root'));

packages/core/src/fiber/fiber.ts

@@ -19,7 +19,6 @@ import {
   getVirtualNodeKey,
   detectIsVirtualNode,
   detectIsVirtualNodeFactory,
-  detectIsEmptyVirtualNode,
 } from '../view';
 import { detectIsMemo } from '../memo';
 import type { Context, ContextProviderValue } from '../context/model';
@@ -366,9 +365,7 @@ function mutateAlternate(options: PerformAlternateOptions) {
       const hasAnyKeys = hasKeys || nextKeys.length > 0;
 
       if (process.env.NODE_ENV === 'development') {
-        const isEmptyNode = alternate.child && detectIsEmptyVirtualNode(alternate.child.instance);
-
-        if (!hasAnyKeys && prevElementsCount !== 0 && !isEmptyNode) {
+        if (!hasAnyKeys && prevElementsCount !== 0 && nextElementsCount !== 0) {
           error(`
             [Dark]: Operation of inserting, adding, replacing elements into list requires to have a unique key for every node (string or number, but not array index)!
           `);

packages/core/src/use-memo/use-memo.ts

@@ -1,14 +1,21 @@
-import { detectIsUndefined, detectIsDepsDifferent } from '../helpers';
+import { type DarkElement } from '../shared';
+import { detectIsUndefined, detectIsArray, detectIsDepsDifferent } from '../helpers';
 import { detectIsComponentFactory, createComponent } from '../component';
-import { detectIsTagVirtualNode } from '../view';
+import { detectIsVirtualNodeFactory } from '../view';
 import { componentFiberHelper } from '../scope';
+import { Fragment } from '../fragment';
 import { $$memo } from '../memo';
 
 const Memo = createComponent(({ slot }) => slot, { token: $$memo });
 
 function wrap<T>(value: T, isDepsDifferent: boolean) {
-  if (detectIsTagVirtualNode(value) || detectIsComponentFactory(value)) {
-    const factory = Memo({ slot: value });
+  const check = (value: T) => detectIsVirtualNodeFactory(value) || detectIsComponentFactory(value);
+
+  if (detectIsArray(value) ? check(value[0]) : check(value)) {
+    const slot = value as unknown as DarkElement;
+    const factory = Memo({
+      slot: Fragment({ slot }),
+    });
 
     factory.shouldUpdate = () => isDepsDifferent;