# @vitejs/plugin-react 4.7.0

- Product: @vitejs/plugin-react (https://whatsnew.fyi/product/vite-plugin-react)
- Vendor: Vite
- Date: 2025-07-18
- Version: 4.7.0
- Original notes: https://github.com/vitejs/vite-plugin-react/releases/tag/plugin-react%404.7.0
- Permalink: https://whatsnew.fyi/product/vite-plugin-react/releases/4.7.0

What's New is an index, not a publisher: every entry below links to the vendor's own release notes, which are the authoritative source. Entries are labelled where they are hand-curated sample data, pre-releases, or drawn from a secondary source such as a developer blog.

Reuse: the summaries, labels and curation here are © What's New. Quote freely with attribution and a link back; wholesale republication of the corpus is not permitted — terms: https://whatsnew.fyi/terms. The vendors' own release notes remain their publishers'.

---

###### Add HMR support for compound components ([#518](https://github.com/vitejs/vite-plugin-react/pull/518))

HMR now works for compound components like this:

```tsx
const Root = () => <div>Accordion Root</div>
const Item = () => <div>Accordion Item</div>

export const Accordion = { Root, Item }
```

###### Return `Plugin[]` instead of `PluginOption[]` ([#537](https://github.com/vitejs/vite-plugin-react/pull/537))

The return type has changed from `react(): PluginOption[]` to more specialized type `react(): Plugin[]`. This allows for type-safe manipulation of plugins, for example:

```tsx
// previously this causes type errors
react({ babel: { plugins: ['babel-plugin-react-compiler'] } })
  .map(p => ({ ...p, applyToEnvironment: e => e.name === 'client' }))
```