hooks inside deeply nested objects always cause state reset #1006
Description
Related plugins
Describe the bug
If using a hook that is referenced using two times dot-notation, the state will always reset upon saving a file; e.g:
const useTrue = () => {
return true
}
const obj1 = {
useTrue,
obj2: { useTrue },
}
function App() {
const [count, setCount] = useState(0)
// will preserve the state
const t1 = useTrue();
// will also preserve the state
const t2 = obj1.useTrue();
// this will cause the state to always reset
const t3 = obj1.obj2.useTrue();
useEffect(() => {
const interval = setInterval(() => setCount(c => c + 1), 1000);
return () => { clearInterval(interval); }
}, []);
return <>{count}</>
}It doesn't appear to be an issue in react-plugin-swc
Reproduction
https://github.com/adamschoenemann/vite-hmr-bug
Steps to reproduce
- Use any hook defined inside two levels of nested objects.
- Save the file and save it again: the second save should not reset the state, but it does
System Info
I couldn't get `envinfo` to install (got a 500 from npm, there's a cloudflare outage I think). But here is an `npm ls` from the repro repo:
├── @eslint/js@9.39.1
├── @types/node@24.10.1
├── @types/react-dom@19.2.3
├── @types/react@19.2.7
├── @vitejs/plugin-react@5.1.1
├── babel-plugin-react-compiler@1.0.0
├── eslint-plugin-react-hooks@7.0.1
├── eslint-plugin-react-refresh@0.4.24
├── eslint@9.39.1
├── globals@16.5.0
├── react-dom@19.2.1
├── react@19.2.1
├── typescript-eslint@8.48.1
├── typescript@5.9.3
└── vite@7.2.6Used Package Manager
npm
Logs
No response
Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Make sure this is a Vite issue and not a framework-specific issue.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- The provided reproduction is a minimal reproducible example of the bug.