use-next-tick 1.0.0-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 su
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,61 @@
+# [nextTick for React](https://suhaotian.github.io/use-next-tick/) · [![Size](https://deno.bundlejs.com/badge?q=use-next-tick/react&treeshake=[{default}]&config={%22esbuild%22:{%22external%22:[%22react%22,%22react-dom%22,%22react/jsx-runtime%22]}})](https://bundlejs.com/?q=use-next-tick/react&treeshake=%5B%7Bdefault%7D%5D&config=%7B%22esbuild%22:%7B%22external%22:%5B%22react%22,%22react-dom%22,%22react/jsx-runtime%22%5D%7D%7D) [![npm version](https://img.shields.io/npm/v/use-next-tick.svg?style=flat)](https://www.npmjs.com/package/use-next-tick) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/suhaotian/use-next-tick/pulls) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/suhaotian/use-next-tick/blob/main/LICENSE) [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/use-next-tick) ![typescript](https://badgen.net/badge/icon/typescript?icon=typescript&label&color=blue)
+
+**use-next-tick** is a React hook that queues callbacks to run in useLayoutEffect after the next render — similar to Vue's nextTick.
+
+## Installation
+
+```bash
+npm install use-next-tick
+```
+
+## Quick Start
+
+```tsx
+"use client";
+import { useState, useRef } from "react";
+import useNextTick from "use-next-tick";
+
+function MyComponent() {
+  const [count, setCount] = useState(0);
+  const ref = useRef<HTMLSpanElement>(null);
+  const nextTick = useNextTick();
+
+  const handleClick = () => {
+    setCount((c) => c + 1);
+    nextTick(() => {
+      // DOM is already updated here
+      console.log(ref.current?.textContent); // "1"
+    });
+  };
+
+  return <span ref={ref}>{count}</span>;
+}
+```
+
+### API
+
+```ts
+function useNextTick(): (cb: () => void | Promise<void>) => void;
+```
+
+## Development
+
+This project use bun.
+
+```sh
+bun install && bun run build
+```
+
+## Reporting Issues
+
+Found an issue? Please feel free to [create issue](https://github.com/suhaotian/use-next-tick/issues/new)
+
+## Support
+
+If you find this project helpful, consider [buying me a coffee](https://github.com/suhaotian/use-next-tick/stargazers).
+
+## Projects You May Also Be Interested In
+
+- [xior](https://github.com/suhaotian/xior) - Tiny fetch library with plugins support and axios-like API
+- [tsdk](https://github.com/tsdk-monorepo/tsdk) - Type-safe API development CLI tool for TypeScript projects
+- [broad-infinite-list](https://github.com/suhaotian/broad-infinite-list) - ⚡ High performance and Bidirectional infinite scrolling list component for React and Vue3

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export type NextTickCallback = () => void | Promise<void>;
+export default function useNextTick(): (cb: NextTickCallback) => void;

package/dist/index.js

@@ -0,0 +1,4 @@
+import{useState as A,useLayoutEffect as B,useRef as D,useCallback as F}from"react";function G(){let[x,z]=A(0),j=D([]);return B(()=>{if(x===0)return;let v=j.current;j.current=[];for(let w of v)w()},[x]),F((v)=>{j.current.push(v),z((w)=>w+1)},[])}export{G as default};
+
+//# debugId=91B7EB10381DE00564756E2164756E21
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": [
+    "import { useState, useLayoutEffect, useRef, useCallback } from \"react\";\n\nexport type NextTickCallback = () => void | Promise<void>;\n\nexport default function useNextTick(): (cb: NextTickCallback) => void {\n  const [tick, setTick] = useState(0);\n  const callbacksRef = useRef<NextTickCallback[]>([]);\n\n  useLayoutEffect(() => {\n    // Skip the initial mount — nothing is queued yet.\n    if (tick === 0) return;\n\n    const pending = callbacksRef.current;\n    callbacksRef.current = [];\n    for (const cb of pending) {\n      cb();\n    }\n  }, [tick]);\n\n  const nextTick = useCallback((cb: NextTickCallback) => {\n    callbacksRef.current.push(cb);\n    setTick((c) => c + 1);\n  }, []);\n\n  return nextTick;\n}\n"
+  ],
+  "mappings": "AAAA,mBAAS,qBAAU,YAAiB,iBAAQ,cAI5C,SAAwB,CAAW,EAAmC,CACpE,IAAO,EAAM,GAAW,EAAS,CAAC,EAC5B,EAAe,EAA2B,CAAC,CAAC,EAkBlD,OAhBA,EAAgB,IAAM,CAEpB,GAAI,IAAS,EAAG,OAEhB,IAAM,EAAU,EAAa,QAC7B,EAAa,QAAU,CAAC,EACxB,QAAW,KAAM,EACf,EAAG,GAEJ,CAAC,CAAI,CAAC,EAEQ,EAAY,CAAC,IAAyB,CACrD,EAAa,QAAQ,KAAK,CAAE,EAC5B,EAAQ,CAAC,IAAM,EAAI,CAAC,GACnB,CAAC,CAAC",
+  "debugId": "91B7EB10381DE00564756E2164756E21",
+  "names": []
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "use-next-tick",
+  "version": "1.0.0-alpha.0",
+  "description": "React hook that queues callbacks to run in useLayoutEffect after the next render — similar to Vue's nextTick",
+  "repository": "suhaotian/use-next-tick",
+  "bugs": "https://github.com/suhaotian/use-next-tick/issues",
+  "homepage": "https://suhaotian.github.io/use-next-tick",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "workspaces": [
+    "demos/**",
+    "./**"
+  ],
+  "devDependencies": {
+    "@types/bun": "latest",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "react": ">=19"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "rm -rf dist  && bun build.ts && tsc --emitDeclarationOnly"
+  },
+  "files": [
+    "dist",
+    "package.json",
+    "LICENSE",
+    "README.md"
+  ],
+  "keywords": [
+    "react",
+    "nextTick",
+    "nextTick hook",
+    "useLayoutEffect"
+  ],
+  "author": {
+    "name": "@suhaotian",
+    "url": "https://github.com/suhaotian"
+  },
+  "license": "MIT"
+}