Skip to content

hooks inside deeply nested objects always cause state reset #1006

Description

@adamschoenemann

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.6

Used Package Manager

npm

Logs

No response

Validations

Metadata

Metadata

Assignees

No one assigned

    Type

    Fields

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions