---
# System prepended metadata

title: react-next to react component moves

---

# react-next to react component moves

If the v7 component implementation is in `react-internal` (most components), the `react-next` implementation should be moved to `react-internal` (NOT `react`). In the steps, `react(-internal)` means whichever of the two packages is appropriate for your component.

Full steps:

1. Move the component code and tests from react-next to `react(-internal)`. Steps:
    1. Find where the v7 component is currently located (either `react-internal` or `react`) and delete the whole folder `react(-internal)/src/components/ComponentName`.
    2. Move the whole folder `react-next/src/components/ComponentName` to `react(-internal)`
    3. Update any `react-next` or `react` imports in the moved code to relative imports. If it's in `react-internal` also change those to relative imports. (A few things must still be deep-imported from react-internal; we'll fix this later.)
2. Update the component's root file in react-next (e.g. `react-next/src/Fabric.ts`) to re-export from `@fluentui/react/lib/ComponentName`
3. Delete any `*Next` perf-tests or vr-tests for the component
4. Delete `react-examples/src/react-next/ComponentName/docs` (they should be exact duplicates; even if they're not, the react versions are more likely to be correct)
5. Compare the examples and .doc.tsx in `react-examples/src/react-next/ComponentName` with the `react` versions. If the example names and content appear unchanged you can just delete the react-next versions. Otherwise copy over the moved examples to the react folder (fixing imports to be from react), and delete any remaining react-next example/doc files.
    - Note: Even if the component is in `react-internal`, the examples should be under `react-examples/src/react` and import from `@fluentui/react`
7. Update snapshots and API in `react(-internal)` and `react-next`

In the PR, be sure to look at:
- Perf test: is the new implementation slower?
- Screener: any visual regressions?
- Bundle size (not sure if it will be accurate until all components move)

| Component           | Assignee  | PR/notes |
| ------------------- | --------- | -------- | 
| Callout             | Jon       | [done](https://github.com/microsoft/fluentui/pull/15455)  |
| ChoiceGroup         | Elizabeth | [done](https://github.com/microsoft/fluentui/pull/15387) |
| Coachmark           | Elizabeth | [done](https://github.com/microsoft/fluentui/pull/15400) |
| ComboBox + Autofill | Jon       | [done](https://github.com/microsoft/fluentui/pull/15490)|
| ContextualMenu      | Jon       | [done](https://github.com/microsoft/fluentui/pull/15448) |
| Dropdown            | Jon       | [done](https://github.com/microsoft/fluentui/pull/15500) |
| Fabric              | Tomi      | [done](https://github.com/microsoft/fluentui/pull/15388) |
| FloatingPicker/ExtendedPicker | Jon | [done](https://github.com/microsoft/fluentui/pull/15458) |
| FocusTrapZone       | Mak       | [done](https://github.com/microsoft/fluentui/pull/15368) |
| Image               | Tomi      | [done](https://github.com/microsoft/fluentui/pull/15367) |
| Layer               | Caleb     | [done](https://github.com/microsoft/fluentui/pull/15481) |
| MessageBar          | Caleb     | [done](https://github.com/microsoft/fluentui/pull/15393) |
| OverflowSet         | Caleb     | [done](https://github.com/microsoft/fluentui/pull/15389) |
| Persona             | Jon       | [done](https://github.com/microsoft/fluentui/pull/15386) |
| Popup               | Mak       | [done](https://github.com/microsoft/fluentui/pull/15436) |
| Rating              | Elizabeth | [done](https://github.com/microsoft/fluentui/pull/15398) |
| ResizeGroup         | Elizabeth | [done](https://github.com/microsoft/fluentui/pull/15401) |
| SearchBox           | Caleb     | [done](https://github.com/microsoft/fluentui/pull/15385) |
| SelectedItemsList   | Caleb     | [done](https://github.com/microsoft/fluentui/pull/15430) |
| Shimmer             | Caleb     | [done](https://github.com/microsoft/fluentui/pull/15407) |
| SpinButton          | Caleb     | [done](https://github.com/microsoft/fluentui/pull/15408) |
| SwatchColorPicker   | Caleb     | [done](https://github.com/microsoft/fluentui/pull/15373) |
| TextField           | Elizabeth | [done](https://github.com/microsoft/fluentui/pull/15370) |

Ignore/delete react-next versions due to not yet converted:

- Breadcrumb (done)
- Modal (done)
- Keytip

### Other table which didn't turn out to be very useful

| Component | Uses other affected components |
| --------- | --------------- |
| Callout             | Popup, Layer |
| Coachmark           | FocusTrapZone, Layer |
| ComboBox + Autofill | Callout |
| ContextualMenu      | Callout  |
| Dropdown            | Callout, Fabric, FocusTrapZone, Layer, Popup |
| ExtendedPicker      | FloatingPicker, Persona, SelectedItemsList |
| FloatingPicker      | Persona |
| Keytip              | Callout, ContextualMenu |
| Layer               | Fabric |
| Rating              | Image |
| SelectedItemsList   | FloatingPicker, Persona, ContextualMenu |
| SpinButton          | Image |
| TeachingBubble      | Callout, FocusTrapZone, Image |