{"_id":"@a8515895/valtio","_rev":"3-5374338e1b6872626ddb7535d5a2a81f","name":"@a8515895/valtio","dist-tags":{"latest":"2.1.7"},"versions":{"2.1.5":{"name":"@a8515895/valtio","version":"2.1.5","keywords":["react","state","manager","management","mobx","proxy","store"],"author":{"name":"Daishi Kato"},"license":"MIT","_id":"@a8515895/valtio@2.1.5","maintainers":[{"name":"a8515895","email":"a8515895@gmail.com"}],"contributors":[],"homepage":"https://github.com/pmndrs/valtio","bugs":{"url":"https://github.com/pmndrs/valtio/issues"},"dist":{"shasum":"4d7e36373ad930f6e1b9565b28b837cfc68ff7dc","tarball":"https://registry.npmjs.org/@a8515895/valtio/-/valtio-2.1.5.tgz","fileCount":272,"integrity":"sha512-DaSAaH6U3iz8CS0k9uQ3Ef6iarDjfj8/hHgOZlZHz8/lZqKDRCjSOCSfoSWnCclBX6bVpXn+L6xCUREDiX3YIA==","signatures":[{"sig":"MEQCICL4UcYtEyoEa+uHlPt9aOmiPCoFnprxAC6mOSio1YMhAiAOs2gpfR3uYfNay2R21dsxQ+D5RATX5lbWeDzgJgtznQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":907871},"main":"./index.js","type":"commonjs","types":"./index.d.ts","engines":{"node":">=12.20.0"},"exports":{".":{"import":{"types":"./esm/index.d.mts","default":"./esm/index.mjs"},"default":{"types":"./index.d.ts","default":"./index.js"},"react-native":{"types":"./index.d.ts","default":"./index.js"}},"./*":{"import":{"types":"./esm/*.d.mts","default":"./esm/*.mjs"},"default":{"types":"./*.d.ts","default":"./*.js"},"react-native":{"types":"./*.d.ts","default":"./*.js"}},"./package.json":"./package.json"},"gitHead":"fd142aac52f38067165c301fc650f08b8d98dd20","scripts":{"fix":"pnpm run fix:lint && pnpm run fix:format","copy":"shx cp -r dist/src/* dist/esm && shx cp -r dist/src/* dist && shx rm -rf dist/{src,tests} && shx cp package.json README.md LICENSE dist && json -I -f dist/package.json -e \"this.private=false; this.devDependencies=undefined; this.optionalDependencies=undefined; this.scripts=undefined; this.prettier=undefined;\"","test":"pnpm run \"/^test:.*/\"","build":"pnpm run prebuild && pnpm run \"/^build:.*/\" && pnpm run postbuild","fix:lint":"eslint . --fix","prebuild":"shx rm -rf dist","postbuild":"pnpm run patch-d-ts && pnpm run copy && pnpm run patch-old-ts && pnpm run patch-esm-ts","test:lint":"eslint .","test:spec":"vitest run","build:base":"rollup -c","fix:format":"prettier . --write","patch-d-ts":"node --input-type=module -e \"import { entries } from './rollup.config.mjs'; import shelljs from 'shelljs'; const { find, sed } = shelljs; find('dist/**/*.d.ts').forEach(f => { entries.forEach(({ find, replacement }) => { sed('-i', new RegExp(' from \\'' + find.source.slice(0, -1) + '\\';$'), ' from \\'' + replacement + '\\';', f); }); sed('-i', / from '(\\.[^']+)\\.ts';$/, ' from \\'\\$1\\';', f); });\"","test:types":"tsc --noEmit","build-watch":"pnpm run \"/^build:.*/\" --watch","build:react":"rollup -c --config-react","build:utils":"rollup -c --config-utils","test:format":"prettier . --list-different","patch-esm-ts":"node -e \"require('shelljs').find('dist/esm/**/*.d.ts').forEach(f=>{var f2=f.replace(/\\.ts$/,'.mts');require('fs').renameSync(f,f2);require('shelljs').sed('-i',/ from '(\\.[^']+)';$/,' from \\'\\$1.mjs\\';',f2);require('shelljs').sed('-i',/^declare module '(\\.[^']+)'/,'declare module \\'\\$1.mjs\\'',f2)})\"","patch-old-ts":"shx touch dist/ts_version_4.5_and_above_is_required.d.ts","build:vanilla":"rollup -c --config-vanilla","build:react_utils":"rollup -c --config-react_utils","build:vanilla_utils":"rollup -c --config-vanilla_utils"},"_npmUser":{"name":"a8515895","email":"a8515895@gmail.com"},"prettier":{"semi":false,"singleQuote":true},"repository":{"url":"git+https://github.com/pmndrs/valtio.git","type":"git"},"_npmVersion":"10.2.4","description":"🧙 Valtio makes proxy-state simple for React and Vanilla","directories":{},"sideEffects":false,"_nodeVersion":"20.11.0","dependencies":{"proxy-compare":"^3.0.1"},"typesVersions":{"*":{"*":["ts_version_4.5_and_above_is_required.d.ts"],"esm/*":["ts_version_4.5_and_above_is_required.d.ts"]},">=4.5":{"*":["*"],"esm/*":["esm/*"]}},"_hasShrinkwrap":false,"packageManager":"pnpm@9.15.5","devDependencies":{"shx":"^0.4.0","json":"^11.0.0","vite":"^6.3.5","jsdom":"^26.1.0","react":"19.1.0","redux":"^5.0.1","tslib":"^2.8.1","eslint":"9.26.0","rollup":"^4.40.2","vitest":"^3.1.3","esbuild":"^0.25.4","shelljs":"^0.9.2","prettier":"^3.5.3","react-dom":"19.1.0","ts-expect":"^1.3.0","@eslint/js":"^9.26.0","@vitest/ui":"^3.1.3","typescript":"^5.8.3","@types/jsdom":"^21.1.7","@types/react":"^19.1.3","proxy-memoize":"^3.0.1","@types/react-dom":"^19.1.3","typescript-eslint":"^8.32.0","jest-leak-detector":"^29.7.0","@vitest/coverage-v8":"^3.1.3","eslint-plugin-react":"^7.37.5","@rollup/plugin-alias":"^5.1.1","eslint-plugin-import":"^2.31.0","@vitest/eslint-plugin":"^1.1.44","rollup-plugin-esbuild":"^6.2.1","@rollup/plugin-replace":"^6.0.2","@testing-library/react":"^16.3.0","eslint-plugin-jest-dom":"^5.5.0","postinstall-postinstall":"^2.1.0","@redux-devtools/extension":"^3.3.0","@rollup/plugin-typescript":"^12.1.2","@testing-library/jest-dom":"^6.6.3","eslint-plugin-react-hooks":"6.0.0-rc.1","@rollup/plugin-node-resolve":"^16.0.1","eslint-plugin-testing-library":"^7.1.1","eslint-import-resolver-typescript":"^4.3.4"},"peerDependencies":{"react":">=18.0.0","@types/react":">=18.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"@types/react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/valtio_2.1.5_1749311553164_0.6921182135479786","host":"s3://npm-registry-packages-npm-production"}},"2.1.6":{"name":"@a8515895/valtio","version":"2.1.6","keywords":["react","state","manager","management","mobx","proxy","store"],"author":{"name":"Daishi Kato"},"license":"MIT","_id":"@a8515895/valtio@2.1.6","maintainers":[{"name":"a8515895","email":"a8515895@gmail.com"}],"contributors":[],"homepage":"https://github.com/pmndrs/valtio","bugs":{"url":"https://github.com/pmndrs/valtio/issues"},"dist":{"shasum":"86da93b4472a7110c3184f9d850d6d8ea6a5359d","tarball":"https://registry.npmjs.org/@a8515895/valtio/-/valtio-2.1.6.tgz","fileCount":75,"integrity":"sha512-g0bO9zUleuITpS55LIDII9KwYokzMkIlQs+fcJIZySzFIXimzb0ymUrNiIFwtCsMCOiZI46rUMpyEM2dhqGDFQ==","signatures":[{"sig":"MEQCIC9V4GqfRSnOgntf7cil4IquahQOuRpuqgk/2NTIs40EAiBxXJLZCXDWx7BUyMbwEyIdtsHY3R8A59zlPWtRK3SzDg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":133590},"main":"./index.js","type":"commonjs","types":"./index.d.ts","engines":{"node":">=12.20.0"},"exports":{".":{"import":{"types":"./esm/index.d.mts","default":"./esm/index.mjs"},"default":{"types":"./index.d.ts","default":"./index.js"},"react-native":{"types":"./index.d.ts","default":"./index.js"}},"./*":{"import":{"types":"./esm/*.d.mts","default":"./esm/*.mjs"},"default":{"types":"./*.d.ts","default":"./*.js"},"react-native":{"types":"./*.d.ts","default":"./*.js"}},"./package.json":"./package.json"},"gitHead":"fd142aac52f38067165c301fc650f08b8d98dd20","scripts":{"fix":"pnpm run fix:lint && pnpm run fix:format","copy":"shx cp -r dist/src/* dist/esm && shx cp -r dist/src/* dist && shx rm -rf dist/{src,tests} && shx cp package.json README.md LICENSE dist && json -I -f dist/package.json -e \"this.private=false; this.devDependencies=undefined; this.optionalDependencies=undefined; this.scripts=undefined; this.prettier=undefined;\"","test":"pnpm run \"/^test:.*/\"","build":"pnpm run prebuild && pnpm run \"/^build:.*/\" && pnpm run postbuild","fix:lint":"eslint . --fix","prebuild":"shx rm -rf dist","postbuild":"pnpm run patch-d-ts && pnpm run copy && pnpm run patch-old-ts && pnpm run patch-esm-ts","test:lint":"eslint .","test:spec":"vitest run","build:base":"rollup -c","fix:format":"prettier . --write","patch-d-ts":"node --input-type=module -e \"import { entries } from './rollup.config.mjs'; import shelljs from 'shelljs'; const { find, sed } = shelljs; find('dist/**/*.d.ts').forEach(f => { entries.forEach(({ find, replacement }) => { sed('-i', new RegExp(' from \\'' + find.source.slice(0, -1) + '\\';$'), ' from \\'' + replacement + '\\';', f); }); sed('-i', / from '(\\.[^']+)\\.ts';$/, ' from \\'\\$1\\';', f); });\"","test:types":"tsc --noEmit","build-watch":"pnpm run \"/^build:.*/\" --watch","build:react":"rollup -c --config-react","build:utils":"rollup -c --config-utils","test:format":"prettier . --list-different","patch-esm-ts":"node -e \"require('shelljs').find('dist/esm/**/*.d.ts').forEach(f=>{var f2=f.replace(/\\.ts$/,'.mts');require('fs').renameSync(f,f2);require('shelljs').sed('-i',/ from '(\\.[^']+)';$/,' from \\'\\$1.mjs\\';',f2);require('shelljs').sed('-i',/^declare module '(\\.[^']+)'/,'declare module \\'\\$1.mjs\\'',f2)})\"","patch-old-ts":"shx touch dist/ts_version_4.5_and_above_is_required.d.ts","build:vanilla":"rollup -c --config-vanilla","build:react_utils":"rollup -c --config-react_utils","build:vanilla_utils":"rollup -c --config-vanilla_utils"},"_npmUser":{"name":"a8515895","email":"a8515895@gmail.com"},"prettier":{"semi":false,"singleQuote":true},"repository":{"url":"git+https://github.com/pmndrs/valtio.git","type":"git"},"_npmVersion":"10.2.4","description":"🧙 Valtio makes proxy-state simple for React and Vanilla","directories":{},"sideEffects":false,"_nodeVersion":"20.11.0","dependencies":{"proxy-compare":"^3.0.1"},"typesVersions":{"*":{"*":["ts_version_4.5_and_above_is_required.d.ts"],"esm/*":["ts_version_4.5_and_above_is_required.d.ts"]},">=4.5":{"*":["*"],"esm/*":["esm/*"]}},"_hasShrinkwrap":false,"packageManager":"pnpm@9.15.5","devDependencies":{"shx":"^0.4.0","json":"^11.0.0","vite":"^6.3.5","jsdom":"^26.1.0","react":"19.1.0","redux":"^5.0.1","tslib":"^2.8.1","eslint":"9.26.0","rollup":"^4.40.2","vitest":"^3.1.3","esbuild":"^0.25.4","shelljs":"^0.9.2","prettier":"^3.5.3","react-dom":"19.1.0","ts-expect":"^1.3.0","@eslint/js":"^9.26.0","@vitest/ui":"^3.1.3","typescript":"^5.8.3","@types/jsdom":"^21.1.7","@types/react":"^19.1.3","proxy-memoize":"^3.0.1","@types/react-dom":"^19.1.3","typescript-eslint":"^8.32.0","jest-leak-detector":"^29.7.0","@vitest/coverage-v8":"^3.1.3","eslint-plugin-react":"^7.37.5","@rollup/plugin-alias":"^5.1.1","eslint-plugin-import":"^2.31.0","@vitest/eslint-plugin":"^1.1.44","rollup-plugin-esbuild":"^6.2.1","@rollup/plugin-replace":"^6.0.2","@testing-library/react":"^16.3.0","eslint-plugin-jest-dom":"^5.5.0","postinstall-postinstall":"^2.1.0","@redux-devtools/extension":"^3.3.0","@rollup/plugin-typescript":"^12.1.2","@testing-library/jest-dom":"^6.6.3","eslint-plugin-react-hooks":"6.0.0-rc.1","@rollup/plugin-node-resolve":"^16.0.1","eslint-plugin-testing-library":"^7.1.1","eslint-import-resolver-typescript":"^4.3.4"},"peerDependencies":{"react":">=18.0.0","@types/react":">=18.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"@types/react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/valtio_2.1.6_1749311856617_0.07566975433443401","host":"s3://npm-registry-packages-npm-production"}},"2.1.7":{"name":"@a8515895/valtio","description":"🧙 Valtio makes proxy-state simple for React and Vanilla","type":"commonjs","version":"2.1.7","main":"./dist/index.js","types":"./dist/index.d.ts","typesVersions":{">=4.5":{"esm/*":["esm/*"],"*":["*"]},"*":{"esm/*":["ts_version_4.5_and_above_is_required.d.ts"],"*":["ts_version_4.5_and_above_is_required.d.ts"]}},"exports":{"./package.json":"./package.json",".":{"react-native":{"types":"./index.d.ts","default":"./index.js"},"import":{"types":"./esm/index.d.mts","default":"./esm/index.mjs"},"default":{"types":"./index.d.ts","default":"./index.js"}},"./*":{"react-native":{"types":"./*.d.ts","default":"./*.js"},"import":{"types":"./esm/*.d.mts","default":"./esm/*.mjs"},"default":{"types":"./*.d.ts","default":"./*.js"}}},"sideEffects":false,"scripts":{"prebuild":"shx rm -rf dist","build":"pnpm run prebuild && pnpm run \"/^build:.*/\" && pnpm run postbuild","build-watch":"pnpm run \"/^build:.*/\" --watch","build:base":"rollup -c","build:utils":"rollup -c --config-utils","build:vanilla":"rollup -c --config-vanilla","build:vanilla_utils":"rollup -c --config-vanilla_utils","build:react":"rollup -c --config-react","build:react_utils":"rollup -c --config-react_utils","postbuild":"pnpm run patch-d-ts && pnpm run copy && pnpm run patch-old-ts && pnpm run patch-esm-ts","fix":"pnpm run fix:lint && pnpm run fix:format","fix:format":"prettier . --write","fix:lint":"eslint . --fix","test":"pnpm run \"/^test:.*/\"","test:format":"prettier . --list-different","test:types":"tsc --noEmit","test:lint":"eslint .","test:spec":"vitest run","patch-d-ts":"node --input-type=module -e \"import { entries } from './rollup.config.mjs'; import shelljs from 'shelljs'; const { find, sed } = shelljs; find('dist/**/*.d.ts').forEach(f => { entries.forEach(({ find, replacement }) => { sed('-i', new RegExp(' from \\'' + find.source.slice(0, -1) + '\\';$'), ' from \\'' + replacement + '\\';', f); }); sed('-i', / from '(\\.[^']+)\\.ts';$/, ' from \\'\\$1\\';', f); });\"","copy":"shx cp -r dist/src/* dist/esm && shx cp -r dist/src/* dist && shx rm -rf dist/{src,tests} && shx cp package.json README.md LICENSE dist && json -I -f dist/package.json -e \"this.private=false; this.devDependencies=undefined; this.optionalDependencies=undefined; this.scripts=undefined; this.prettier=undefined;\"","patch-old-ts":"shx touch dist/ts_version_4.5_and_above_is_required.d.ts","patch-esm-ts":"node -e \"require('shelljs').find('dist/esm/**/*.d.ts').forEach(f=>{var f2=f.replace(/\\.ts$/,'.mts');require('fs').renameSync(f,f2);require('shelljs').sed('-i',/ from '(\\.[^']+)';$/,' from \\'\\$1.mjs\\';',f2);require('shelljs').sed('-i',/^declare module '(\\.[^']+)'/,'declare module \\'\\$1.mjs\\'',f2)})\""},"engines":{"node":">=12.20.0"},"prettier":{"semi":false,"singleQuote":true},"repository":{"type":"git","url":"git+https://github.com/pmndrs/valtio.git"},"keywords":["react","state","manager","management","mobx","proxy","store"],"author":{"name":"Daishi Kato"},"contributors":[],"license":"MIT","bugs":{"url":"https://github.com/pmndrs/valtio/issues"},"homepage":"https://github.com/pmndrs/valtio","packageManager":"pnpm@9.15.5","dependencies":{"proxy-compare":"^3.0.1"},"devDependencies":{"@eslint/js":"^9.26.0","@redux-devtools/extension":"^3.3.0","@rollup/plugin-alias":"^5.1.1","@rollup/plugin-node-resolve":"^16.0.1","@rollup/plugin-replace":"^6.0.2","@rollup/plugin-typescript":"^12.1.2","@testing-library/jest-dom":"^6.6.3","@testing-library/react":"^16.3.0","@types/jsdom":"^21.1.7","@types/react":"^19.1.3","@types/react-dom":"^19.1.3","@vitest/coverage-v8":"^3.1.3","@vitest/eslint-plugin":"^1.1.44","@vitest/ui":"^3.1.3","esbuild":"^0.25.4","eslint":"9.26.0","eslint-import-resolver-typescript":"^4.3.4","eslint-plugin-import":"^2.31.0","eslint-plugin-jest-dom":"^5.5.0","eslint-plugin-react":"^7.37.5","eslint-plugin-react-hooks":"6.0.0-rc.1","eslint-plugin-testing-library":"^7.1.1","jest-leak-detector":"^29.7.0","jsdom":"^26.1.0","json":"^11.0.0","postinstall-postinstall":"^2.1.0","prettier":"^3.5.3","proxy-memoize":"^3.0.1","react":"19.1.0","react-dom":"19.1.0","redux":"^5.0.1","rollup":"^4.40.2","rollup-plugin-esbuild":"^6.2.1","shelljs":"^0.9.2","shx":"^0.4.0","ts-expect":"^1.3.0","tslib":"^2.8.1","typescript":"^5.8.3","typescript-eslint":"^8.32.0","vite":"^6.3.5","vitest":"^3.1.3"},"peerDependencies":{"@types/react":">=18.0.0","react":">=18.0.0"},"peerDependenciesMeta":{"@types/react":{"optional":true},"react":{"optional":true}},"_id":"@a8515895/valtio@2.1.7","gitHead":"5415632633a3daef6d0362cb54afce930a05e293","_nodeVersion":"20.11.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-+MpzdXayaNAIBh4awaSy1UXG+wMAnAIZJH8eMWZnYyM9p2ASQAbvTmryKqeBE/kpJh3WyWN3rxkeEIfViKZhnA==","shasum":"67781649a8addfcb10ac9d047323049720d392cd","tarball":"https://registry.npmjs.org/@a8515895/valtio/-/valtio-2.1.7.tgz","fileCount":272,"unpackedSize":907881,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCc177G4oU2VtLR9iF78rc0HCy06w0b4uCNwD0Av8DRXgIhAK0N4zoaUtRvFXsT04s4upPDOqzR/Mf9XUAXuAtjxL/7"}]},"_npmUser":{"name":"a8515895","email":"a8515895@gmail.com"},"directories":{},"maintainers":[{"name":"a8515895","email":"a8515895@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/valtio_2.1.7_1749312562806_0.8536335762517817"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-07T15:52:33.065Z","modified":"2025-06-07T16:09:23.235Z","2.1.5":"2025-06-07T15:52:33.406Z","2.1.6":"2025-06-07T15:57:36.794Z","2.1.7":"2025-06-07T16:09:23.044Z"},"bugs":{"url":"https://github.com/pmndrs/valtio/issues"},"author":{"name":"Daishi Kato"},"license":"MIT","homepage":"https://github.com/pmndrs/valtio","keywords":["react","state","manager","management","mobx","proxy","store"],"repository":{"type":"git","url":"git+https://github.com/pmndrs/valtio.git"},"description":"🧙 Valtio makes proxy-state simple for React and Vanilla","contributors":[],"maintainers":[{"name":"a8515895","email":"a8515895@gmail.com"}],"readme":"\"valtio\"\n
\n
\n\nnpm install valtio makes proxy-state simple\n\n[![Build Status](https://img.shields.io/github/actions/workflow/status/pmndrs/valtio/test.yml?branch=main&style=flat&colorA=000000&colorB=000000)](https://github.com/pmndrs/valtio/actions?query=workflow%3ALint)\n[![Build Size](https://img.shields.io/bundlephobia/minzip/valtio?label=bundle%20size&style=flat&colorA=000000&colorB=000000)](https://bundlephobia.com/result?p=valtio)\n[![Version](https://img.shields.io/npm/v/valtio?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/valtio)\n[![Downloads](https://img.shields.io/npm/dt/valtio.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/valtio)\n[![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff)](https://discord.gg/poimandres)\n\n#### Wrap your state object\n\nValtio turns the object you pass it into a self-aware proxy.\n\n```jsx\nimport { proxy, useSnapshot } from 'valtio'\n\nconst state = proxy({ count: 0, text: 'hello' })\n```\n\n#### Mutate from anywhere\n\nYou can make changes to it in the same way you would to a normal js-object.\n\n```jsx\nsetInterval(() => {\n ++state.count\n}, 1000)\n```\n\n#### React via useSnapshot\n\nCreate a local snapshot that catches changes. Rule of thumb: read from snapshots in render function, otherwise use the source. The component will only re-render when the parts of the state you access have changed, it is render-optimized.\n\n```jsx\n// This will re-render on `state.count` change but not on `state.text` change\nfunction Counter() {\n const snap = useSnapshot(state)\n return (\n
\n {snap.count}\n \n
\n )\n}\n```\n\n
\nNote for TypeScript users: Return type of useSnapshot can be too strict.\n\nThe `snap` variable returned by `useSnapshot` is a (deeply) read-only object.\nIts type has `readonly` attribute, which may be too strict for some use cases.\n\nTo mitigate typing difficulties, you might want to loosen the type definition:\n\n```ts\ndeclare module 'valtio' {\n function useSnapshot(p: T): T\n}\n```\n\nSee [#327](https://github.com/pmndrs/valtio/issues/327) for more information.\n\n
\n\n
\nNote: useSnapshot returns a new proxy for render optimization.\n\nInternally, `useSnapshot` calls `snapshot` in valtio/vanilla,\nand wraps the snapshot object with another proxy to detect property access.\nThis feature is based on [proxy-compare](https://github.com/dai-shi/proxy-compare).\n\nTwo kinds of proxies are used for different purposes:\n\n- `proxy()` from `valtio/vanilla` is for mutation tracking or write tracking.\n- `createProxy()` from `proxy-compare` is for usage tracking or read tracking.\n
\n\n
\nUse of this is for expert users.\n\nValtio tries best to handle `this` behavior\nbut it's hard to understand without familiarity.\n\n```js\nconst state = proxy({\n count: 0,\n inc() {\n ++this.count\n },\n})\nstate.inc() // `this` points to `state` and it works fine\nconst snap = useSnapshot(state)\nsnap.inc() // `this` points to `snap` and it doesn't work because snapshot is frozen\n```\n\nTo avoid this pitfall, the recommended pattern is not to use `this` and prefer arrow function.\n\n```js\nconst state = proxy({\n count: 0,\n inc: () => {\n ++state.count\n },\n})\n```\n\n
\n\nIf you are new to this, it's highly recommended to use\n[eslint-plugin-valtio](https://github.com/pmndrs/eslint-plugin-valtio).\n\n#### Subscribe from anywhere\n\nYou can access state outside of your components and subscribe to changes.\n\n```jsx\nimport { subscribe } from 'valtio'\n\n// Subscribe to all state changes\nconst unsubscribe = subscribe(state, () =>\n console.log('state has changed to', state),\n)\n// Unsubscribe by calling the result\nunsubscribe()\n```\n\nYou can also subscribe to a portion of state.\n\n```jsx\nconst state = proxy({ obj: { foo: 'bar' }, arr: ['hello'] })\n\nsubscribe(state.obj, () => console.log('state.obj has changed to', state.obj))\nstate.obj.foo = 'baz'\n\nsubscribe(state.arr, () => console.log('state.arr has changed to', state.arr))\nstate.arr.push('world')\n```\n\nTo subscribe to a primitive value of state, consider `subscribeKey` in utils.\n\n```jsx\nimport { subscribeKey } from 'valtio/utils'\n\nconst state = proxy({ count: 0, text: 'hello' })\nsubscribeKey(state, 'count', (v) =>\n console.log('state.count has changed to', v),\n)\n```\n\nThere is another util `watch` which might be convenient in some cases.\n\n```jsx\nimport { watch } from 'valtio/utils'\n\nconst state = proxy({ count: 0 })\nconst stop = watch((get) => {\n console.log('state has changed to', get(state)) // auto-subscribe on use\n})\n```\n\n#### Suspend your components\n\nValtio is compatible with React 19 `use` hook. This eliminates all the async back-and-forth, you can access your data directly while the parent is responsible for fallback state and error handling.\n\n```jsx\nimport { use } from 'react' // React 19\n// import { use } from 'react18-use' // React 18\n\nconst state = proxy({ post: fetch(url).then((res) => res.json()) })\n\nfunction Post() {\n const snap = useSnapshot(state)\n return
{use(snap.post).title}
\n}\n\nfunction App() {\n return (\n waiting...}>\n \n \n )\n}\n```\n\nIt still suffers from \"de-opt\", which prevents `useTransition` to work well. To mitigate it, there is a third-party library [use-valtio](https://github.com/valtiojs/use-valtio).\n\n#### Holding objects in state without tracking them\n\nThis may be useful if you have large, nested objects with accessors that you don't want to proxy. `ref` allows you to keep these objects inside the state model.\n\nSee [#61](https://github.com/pmndrs/valtio/issues/61) and [#178](https://github.com/pmndrs/valtio/issues/178) for more information.\n\n```js\nimport { proxy, ref } from 'valtio'\n\nconst state = proxy({\n count: 0,\n dom: ref(document.body),\n})\n```\n\n#### Update transiently (for often occurring state-changes)\n\nYou can read state in a component without causing re-render.\n\n```jsx\nfunction Foo() {\n const { count, text } = state\n // ...\n```\n\nOr, you can have more control with subscribing in useEffect.\n\n```jsx\nfunction Foo() {\n const total = useRef(0)\n useEffect(() => subscribe(state.arr, () => {\n total.current = state.arr.reduce((p, c) => p + c)\n }), [])\n // ...\n```\n\n#### Update synchronously\n\nBy default, state mutations are batched before triggering re-render.\nSometimes, we want to disable the batching.\nThe known use case of this is `` [#270](https://github.com/pmndrs/valtio/issues/270).\n\n```jsx\nfunction TextBox() {\n const snap = useSnapshot(state, { sync: true })\n return (\n (state.text = e.target.value)} />\n )\n}\n```\n\n#### Dev tools\n\nYou can use [Redux DevTools Extension](https://github.com/reduxjs/redux-devtools) for plain objects and arrays.\n\n```jsx\nimport { devtools } from 'valtio/utils'\n\nconst state = proxy({ count: 0, text: 'hello' })\nconst unsub = devtools(state, { name: 'state name', enabled: true })\n```\n\n
\n Manipulating state with Redux DevTools\nThe screenshot below shows how to use Redux DevTools to manipulate state. First select the object from the instances drop down. Then type in a JSON object to dispatch. Then click \"Dispatch\". Notice how it changes the state.\n\n
\n\"image\"\n
\n\n#### Use it vanilla\n\nValtio is not tied to React, you can use it in vanilla-js.\n\n```jsx\nimport { proxy, subscribe, snapshot } from 'valtio/vanilla'\n// import { ... } from 'valtio/vanilla/utils'\n\nconst state = proxy({ count: 0, text: 'hello' })\n\nsubscribe(state, () => {\n console.log('state is mutated')\n const obj = snapshot(state) // A snapshot is an immutable object\n})\n```\n\n#### `useProxy` util\n\nWhile the separation of proxy state and its snapshot is important,\nit's confusing for beginners.\nWe have a convenient util to improve developer experience. useProxy returns shallow proxy state and its snapshot, meaning you can only mutate on root level.\n\n```js\nimport { useProxy } from 'valtio/utils'\n\nconst state = proxy({ count: 1 })\n\nconst Component = () => {\n // useProxy returns a special proxy that can be used both in render and callbacks\n // The special proxy has to be used directly in a function scope. You can't destructure it outside the scope.\n const $state = useProxy(state)\n return (\n
\n {$state.count}\n \n
\n )\n}\n```\n\n#### Computed properties\n\nYou can define computed properties with object getters.\n\n```js\nconst state = proxy({\n count: 1,\n get doubled() {\n return this.count * 2\n },\n})\n```\n\nConsider it as an advanced usage, because the behavior of `this` is sometimes confusing.\n\nFor more information, check out [this guide](./docs/guides/computed-properties.mdx).\n\n#### `proxySet` util\n\nThis is to create a proxy which mimic the native Set behavior. The API is the same as Set API\n\n```js\nimport { proxySet } from 'valtio/utils'\n\nconst state = proxySet([1, 2, 3])\n//can be used inside a proxy as well\n//const state = proxy({\n// count: 1,\n// set: proxySet()\n//})\n\nstate.add(4)\nstate.delete(1)\nstate.forEach((v) => console.log(v)) // 2,3,4\n```\n\n#### `proxyMap` util\n\nThis is to create a proxy which emulate the native Map behavior. The API is the same as Map API\n\n```js\nimport { proxyMap } from 'valtio/utils'\n\nconst state = proxyMap([\n ['key', 'value'],\n ['key2', 'value2'],\n])\nstate.set('key', 'value')\nstate.delete('key')\nstate.get('key') // ---> value\nstate.forEach((value, key) => console.log(key, value)) // ---> \"key\", \"value\", \"key2\", \"value2\"\n```\n\n#### Compatibility\n\nValtio v2 works with React 18 and up.\nIt only depends on `react` and works with any\nrenderers such as `react-dom`, `react-native`, `react-three-fiber`, and so on.\n\nValtio works on Node.js, Next.js and other frameworks.\n\nValtio also works without React. See [vanilla](#use-it-vanilla).\n\n#### Plugins\n\n- [eslint-plugin-valtio](https://github.com/pmndrs/eslint-plugin-valtio)\n\n#### Recipes\n\nValtio is unopinionated about best practices.\nThe community is working on recipes.\n\n- [How to organize actions](https://github.com/pmndrs/valtio/blob/main/docs/how-tos/how-to-organize-actions.mdx)\n- [How to persist states](https://github.com/pmndrs/valtio/blob/main/docs/how-tos/how-to-persist-states.mdx)\n- [How to use with context](https://github.com/pmndrs/valtio/blob/main/docs/how-tos/how-to-use-with-context.mdx)\n- [How to split and compose states](https://github.com/pmndrs/valtio/blob/main/docs/how-tos/how-to-split-and-compose-states.mdx)\n","readmeFilename":"README.md"}