refactor: hooks to packages

.changeset/grumpy-rice-cheat.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/react-use-update-effect": patch
+---
+
+Initial release

hooks/use-callback-ref/package.json

@@ -32,5 +32,11 @@
     "clean": "rimraf dist .turbo",
     "typecheck": "tsc --noEmit",
     "build:fast": "tsup src/index.ts --format=esm,cjs"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "react": "^18.0.0"
   }
 }

hooks/use-controllable-state/package.json

@@ -35,5 +35,11 @@
   },
   "dependencies": {
     "@chakra-ui/react-use-callback-ref": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "react": "^18.0.0"
   }
 }

hooks/use-update-effect/README.md

@@ -0,0 +1,24 @@
+# @chakra-ui/use-update-effect
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @chakra-ui/react-use-update-effect
+# or
+npm i @chakra-ui/react-use-update-effect
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
+for details.
+
+## Licence
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).

hooks/use-update-effect/index.ts

@@ -0,0 +1 @@
+export * from "./src"

hooks/use-update-effect/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@chakra-ui/react-use-update-effect",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [
+    "use-update-effect"
+  ],
+  "author": "Segun Adebayo <sage@adebayosegun.com>",
+  "homepage": "https://github.com/chakra-ui/chakra-ui#readme",
+  "license": "MIT",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chakra-ui/chakra-ui.git",
+    "directory": "packages/use-update-effect"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/chakra-ui/issues"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format=esm,cjs --dts",
+    "dev": "pnpm build -- --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "build:fast": "tsup src/index.ts --format=esm,cjs"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "react": "^18.0.0"
+  }
+}

hooks/use-update-effect/src/index.ts

@@ -0,0 +1,26 @@
+import { useEffect, useRef } from "react"
+
+export function useUpdateEffect(
+  callback: React.EffectCallback,
+  deps: React.DependencyList,
+) {
+  const renderCycleRef = useRef(false)
+  const effectCycleRef = useRef(false)
+
+  useEffect(() => {
+    const mounted = renderCycleRef.current
+    const run = mounted && effectCycleRef.current
+    if (run) {
+      return callback()
+    }
+    effectCycleRef.current = true
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps)
+
+  useEffect(() => {
+    renderCycleRef.current = true
+    return () => {
+      renderCycleRef.current = false
+    }
+  }, [])
+}

plop/component/package.json.hbs

@@ -32,5 +32,11 @@
     "clean": "rimraf dist .turbo",
     "typecheck": "tsc --noEmit",
     "build:fast": "tsup src/index.ts --format=esm,cjs"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "react": "^18.0.0"
   }
 }