use-transition-effect - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

dist/use-transition-effect.d.ts

@@ -11,6 +11,4 @@ /**
  * Function that returns effect generator (function*() {})
- *
- * @param shouldYield Function that returns true if the current task takes too long.
  */
-export declare type TransitionEffectCallback = (shouldYield: () => boolean) => TransitionEffectGenerator;
+export declare type TransitionEffectCallback = () => TransitionEffectGenerator;
 export interface StartTransitionEffect {
@@ -17,0 +15,0 @@ /**

dist/use-transition-effect.js

@@ -42,3 +42,3 @@ 'use strict';
         // call generator function to get generator
-        var generator = callback(scheduler.unstable_shouldYield);
+        var generator = callback();
         // define callback to schedule
@@ -45,0 +45,0 @@ var iterate = function () {

package.json

 {
   "name": "use-transition-effect",
   "description": "Run long effects without blocking the main thread",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "license": "MIT",
@@ -35,2 +35,3 @@ "author": "Piotr Oleś",
     "prepare": "husky install",
+    "prepublish": "yarn test && yarn lint && yarn build",
     "size": "size-limit"
@@ -37,0 +38,0 @@ },

README.md

@@ -39,7 +39,4 @@ <div align="center">
 ```typescript
-const [
-  isPending,
-  startTransitionEffect,
-  stopTransitionEffect,
-] = useTransitionEffect();
+const [isPending, startTransitionEffect, stopTransitionEffect] =
+  useTransitionEffect();
 ```
@@ -51,12 +48,9 @@
 `startTransitionEffect` lets you schedule a long-running effect without blocking the main thread. It expects a generator
-function as an argument, so you can yield to unblock the main thread. The generator function receives the `shouldYield` function,
-which returns true if the current task takes too long:
+function as an argument, so you can yield to unblock the main thread:
 
 ```typescript
-startTransitionEffect(function*(shouldYield) {
+startTransitionEffect(function* () {
   for (let item of items) {
     doSomeComplexSideEffects(item);
-    if (shouldYield()) {
-      yield;
-    }
+    yield;
   }
@@ -67,4 +61,5 @@ });
 Additionally, you can yield and return a cleanup function that will run on transition stop (including unmount):
+
 ```typescript
-startTransitionEffect(function*(shouldYield) {
+startTransitionEffect(function* () {
   const cleanup = () => cleanupSideEffects();
@@ -74,5 +69,3 @@
     doSomeComplexSideEffects(item);
-    if (shouldYield()) {
-      yield cleanup;
-    }
+    yield cleanup;
   }
@@ -87,3 +80,3 @@ return cleanup;
 useEffect(() => {
-  startTransitionEffect(function*() {
+  startTransitionEffect(function* () {
     // effect
@@ -100,10 +93,7 @@ });
 function App() {
-  const [
-    isPending,
-    startTransitionEffect,
-    stopTransitionEffect,
-  ] = useTransitionEffect();
+  const [isPending, startTransitionEffect, stopTransitionEffect] =
+    useTransitionEffect();
 
   function handleStartClick() {
-    startTransitionEffect(function*() {
+    startTransitionEffect(function* () {
       // do stuff, for example render something on a canvas
@@ -130,4 +120,39 @@ });
 
+The `scheduler` package exports the `unstable_shouldYield()` function that returns true if the current task takes too long.
+You can use it to decide when to yield:
+
+```typescript
+import { unstable_shouldYield as shouldYield } from "scheduler";
+
+startTransitionEffect(function* () {
+  for (let item of items) {
+    doSomeComplexSideEffects(item);
+    if (shouldYield()) {
+      yield;
+    }
+  }
+});
+```
+
+If you want to update the state during a transition effect, you have to wrap this update with the `unstable_runWithPriority()` function
+from the `scheduler` package (with a priority higher than `IdlePriority`). Otherwise, the state update inside the transition effect will run when the effect ends:
+
+```typescript
+import {
+  unstable_runWithPriority as runWithPriority,
+  unstable_NormalPriority as NormalPriority,
+} from "scheduler";
+
+startTransitionEffect(function* () {
+  for (let item of items) {
+    runWithPriority(NormalPriority, () => {
+      setCount((prevCount) => prevCount + 1);
+    });
+    yield;
+  }
+});
+```
+
 ## License
 
 MIT

src/use-transition-effect.ts

@@ -5,6 +5,5 @@ import { useCallback, useEffect, useRef, useState } from "react";
   unstable_scheduleCallback as scheduleCallback,
-  unstable_shouldYield as shouldYield,
   unstable_runWithPriority as runWithPriority,
+  unstable_IdlePriority as IdlePriority,
   unstable_ImmediatePriority as ImmediatePriority,
-  unstable_IdlePriority as IdlePriority,
   CallbackNode,
@@ -30,8 +29,4 @@ } from "scheduler";
  * Function that returns effect generator (function*() {})
- *
- * @param shouldYield Function that returns true if the current task takes too long.
  */
-export type TransitionEffectCallback = (
-  shouldYield: () => boolean
-) => TransitionEffectGenerator;
+export type TransitionEffectCallback = () => TransitionEffectGenerator;
 
@@ -104,3 +99,3 @@ // use interface for IDE to pick-up js docs
       // call generator function to get generator
-      const generator = callback(shouldYield);
+      const generator = callback();
 
@@ -107,0 +102,0 @@ // define callback to schedule

No alert changes

Improved metrics

Total package byte prevSize

23737

increased by1.98%

Number of lines in readme file

152

increased by19.69%

Worsened metrics

Lines of code

304

decreased by-2.25%

No dependency changes