An eslint plugin for better valtio experience
npm install eslint-plugin-valtioValtio linting plugin for better development.
``bash`
npm install eslint-plugin-valtio --save-dev
for yarn users:
`bash`
yarn add -D eslint-plugin-valtio
`js
const valtio = require('eslint-plugin-valtio')
module.exports = [
valtio.configs['flat/recommended'],
{
rules: {
'valtio/state-snapshot-rule': ['warn'],
'valtio/avoid-this-in-proxy': ['warn'],
},
},
]
`
Add valtio to the extends section of your .eslintrc configuration file.
`json`
{
"extends": ["plugin:valtio/recommended"]
}
Alternatively, you can enable rules in the plugin, selectively.
`json`
{
"rules": {
"valtio/state-snapshot-rule": "warn",
"valtio/avoid-this-in-proxy": "warn"
}
}
This plugin helps you catch common mistakes that can occur in valtio. Here are some cases that this plugin catches.
We shouldn't use snapshots in callbacks, because snapshots can be stale there.
`jsx
const state = proxy({ count: 0 })
function App() {
const snap = useSnapshot(state)
const handleClick = () => {
console.log(snap.count) // This is not recommended as it can be stale.
}
return (
$3
In render phase, it's better to use snapshots (as they're made to be compatible with react's reactivity) instead of states directly.
`jsx
const state = proxy({ count: 0 })function App() {
return (
{state.count} // This is not recommended as it is not reactive.
)
}
`$3
Snapshots are made to be used in the react render phase,
and not mutable.
So, we need to mutate proxy states directly.
`jsx
const state = proxy({ count: 0 })function App() {
const snap = useSnapshot(state)
const handleClick = () => {
++snap.count // This doesn't work. Use proxy state instead.
}
return
}
`$3
In the way valtio treats objects in
proxyWithComputed, the order of fields matters; for example, quadrupled comes before doubled, but it depends on doubled, so the order is wrong! So we need to bring doubled first.`jsx
const state = proxyWithComputed(
{
count: 0,
},
{
quadrupled: (snap) => snap.doubled * 2, // Not found, If a computed field deriving value is created from another computed, the computed source should be declared first.
doubled: (snap) => snap.count * 2,
}
)
`$3
When working with
proxy using this in it's context as long as taken care of will work as expected but since the implementation differs from a simple proxy to a snapshot version of the proxy, using this could get confusing. This rule is specifically for beginners that are adapting to the structure/differences in valtio.`jsx
const state = proxy({
count: 0,
inc() {
++state.count // works as the state is being modified
},
})const state = proxy({
count: 0,
inc() {
++this.count // works as the context belongs to proxy
},
})
const state = snapshot(
proxy({
count: 0,
inc() {
++this.count // won't work since the params are now frozen since you are in a snapshot.
},
})
)
``