added use-event

README.md

@@ -75,6 +75,7 @@ import {
   forwardRef,
   Suspense,
   useCallback,
+  useEvent,
   useContext,
   useEffect,
   useError,
@@ -607,6 +608,22 @@ Suitable for memoizing handler functions descending down the component tree:
   );
 ```
 
+#### useEvent
+
+```tsx
+import { useEvent } from '@dark-engine/core';
+```
+
+Similar to useCallback but has no dependencies. Ensures the return of the same function, with the closures always corresponding to the last render. In most cases, it eliminates the need to track dependencies in useCallback.
+
+```tsx
+ const handleClick = useEvent(() => setCount(count + 1));
+
+ return (
+    <button onClick={handleClick}>add</button>
+  );
+```
+
 #### 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.

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dark-engine/core",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "description": "Dark is lightweight (10 Kb gzipped) component-and-hook-based UI rendering engine for javascript apps without dependencies and written in Typescript 💫",
   "author": "AlexPlex",
   "license": "MIT",

packages/core/src/index.ts

@@ -16,6 +16,7 @@ export * from './use-context';
 export * from './use-deferred-value';
 export * from './use-effect';
 export * from './use-error';
+export * from './use-event';
 export * from './use-imperative-handle';
 export * from './use-memo';
 export * from './use-reducer';

packages/core/src/use-callback/use-callback.spec.ts

@@ -21,7 +21,8 @@ test('use-callback works correctly by default', () => {
 
   render(App(), host);
   waitNextIdle();
-  expect(handlers.every(x => x && x === handlers[0])).toBeTruthy();
+  render(App(), host);
+  waitNextIdle();
   render(App(), host);
   waitNextIdle();
   expect(handlers.every(x => x && x === handlers[0])).toBeTruthy();

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

@@ -1,34 +1,9 @@
-import { detectIsUndefined, detectIsDepsDifferent } from '../helpers';
-import { componentFiberHelper } from '../scope';
+import { useMemo } from '../use-memo';
 
 function useCallback<T = Function>(callback: T, deps: Array<any>): T {
-  const fiber = componentFiberHelper.get();
-  const { hook } = fiber;
-  const { idx, values } = hook;
+  const value = useMemo(() => callback, deps);
 
-  if (detectIsUndefined(values[idx])) {
-    values[idx] = {
-      deps,
-      value: callback,
-    };
-
-    hook.idx++;
-
-    return callback;
-  }
-
-  const hookValue = values[idx];
-  const prevDeps = hookValue.deps as Array<any>;
-  const isDepsDifferent = detectIsDepsDifferent(deps, prevDeps);
-
-  if (isDepsDifferent) {
-    hookValue.deps = deps;
-    hookValue.value = callback;
-  }
-
-  hook.idx++;
-
-  return hookValue.value;
+  return value;
 }
 
 export { useCallback };

packages/core/src/use-event/index.ts

@@ -0,0 +1 @@
+export * from './use-event';

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

@@ -0,0 +1,16 @@
+import { useMemo } from '../use-memo';
+import { useCallback } from '../use-callback';
+
+function useEvent<T extends (...args) => any>(fn: T) {
+  const scope = useMemo(() => ({ fn }), []);
+
+  scope.fn = fn;
+
+  const callback = useCallback((...args) => {
+    return scope.fn(...args);
+  }, []);
+
+  return callback as unknown as T;
+}
+
+export { useEvent };

packages/platform-browser/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dark-engine/platform-browser",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "description": "Dark is lightweight (10 Kb gzipped) component-and-hook-based UI rendering engine for javascript apps without dependencies and written in Typescript 💫",
   "author": "AlexPlex",
   "license": "MIT",