React Review Audit

**Score: 96/100** · 4 errors · 5 warnings

Copy as prompt

```text
Fix the following React Review diagnostics in my codebase.

## Errors (4)

1. [error] no-nested-component-definition — src/components/checkoutForm/checkout/Checkout.jsx:50
Component "Form" defined inside "Checkout" — creates new instance every render, destroying state

2. [error] no-nested-component-definition — src/components/checkoutForm/checkout/Checkout.jsx:55
Component "Confirmation" defined inside "Checkout" — creates new instance every render, destroying state

3. [error] no-nested-component-definition — src/components/cart/Cart.jsx:11
Component "EmptyCart" defined inside "Cart" — creates new instance every render, destroying state

4. [error] no-nested-component-definition — src/components/cart/Cart.jsx:17
Component "FilledCart" defined inside "Cart" — creates new instance every render, destroying state

## Warnings (5)

5. [warning] no-react-dom-deprecated-apis — src/index.js:6
ReactDOM.render is the legacy root API — switch to `import { createRoot } from 'react-dom/client'` and call `createRoot(container).render(...)` (REMOVED in React 19)

6. [warning] no-danger — src/components/products/product/Product.jsx:21
Do not use `dangerouslySetInnerHTML` prop

7. [warning] prefer-useReducer — src/components/checkoutForm/AddressForm.jsx:10
Component "AddressForm" has 6 useState calls — consider useReducer for related state

8. [warning] no-effect-event-handler — src/components/checkoutForm/AddressForm.jsx:51
useEffect simulating an event handler — move logic to an actual event handler instead

9. [warning] no-effect-event-handler — src/components/checkoutForm/AddressForm.jsx:55
useEffect simulating an event handler — move logic to an actual event handler instead
```

---

### ❌ Errors (4)

**`no-nested-component-definition`**

Component "Form" defined inside "Checkout" — creates new instance every render, destroying state

> Move to a separate file or to module scope above the parent component

[`src/components/checkoutForm/checkout/Checkout.jsx:50`](https://github.com/celeroncoder/e-commerce-store/blob/7f994d7b5921c71913f381d73cd26d2ac5f4ceee/src/components/checkoutForm/checkout/Checkout.jsx#L50)
[`src/components/checkoutForm/checkout/Checkout.jsx:55`](https://github.com/celeroncoder/e-commerce-store/blob/7f994d7b5921c71913f381d73cd26d2ac5f4ceee/src/components/checkoutForm/checkout/Checkout.jsx#L55)
[`src/components/cart/Cart.jsx:11`](https://github.com/celeroncoder/e-commerce-store/blob/7f994d7b5921c71913f381d73cd26d2ac5f4ceee/src/components/cart/Cart.jsx#L11)
[`src/components/cart/Cart.jsx:17`](https://github.com/celeroncoder/e-commerce-store/blob/7f994d7b5921c71913f381d73cd26d2ac5f4ceee/src/components/cart/Cart.jsx#L17)

---

### ⚠️ Warnings (5)

**`no-effect-event-handler`**

useEffect simulating an event handler — move logic to an actual event handler instead

> Move the conditional logic into onClick, onChange, or onSubmit handlers directly

[`src/components/checkoutForm/AddressForm.jsx:51`](https://github.com/celeroncoder/e-commerce-store/blob/7f994d7b5921c71913f381d73cd26d2ac5f4ceee/src/components/checkoutForm/AddressForm.jsx#L51)
[`src/components/checkoutForm/AddressForm.jsx:55`](https://github.com/celeroncoder/e-commerce-store/blob/7f994d7b5921c71913f381d73cd26d2ac5f4ceee/src/components/checkoutForm/AddressForm.jsx#L55)

**`no-react-dom-deprecated-apis`**

ReactDOM.render is the legacy root API — switch to `import { createRoot } from 'react-dom/client'` and call `createRoot(container).render(...)` (REMOVED in React 19)

> Switch the legacy `react-dom` root API (`render` / `hydrate` / `unmountComponentAtNode`) to `createRoot` / `hydrateRoot` / `root.unmount()` from `react-dom/client`. Replace `findDOMNode` with a ref. The whole `react-dom/test-utils` entry point is removed in React 19 — use `act` from `react` and `fireEvent` / `render` from `@testing-library/react`. Only enabled on projects detected as React 18+.

[`src/index.js:6`](https://github.com/celeroncoder/e-commerce-store/blob/7f994d7b5921c71913f381d73cd26d2ac5f4ceee/src/index.js#L6)

**`no-danger`**

Do not use `dangerouslySetInnerHTML` prop

> `dangerouslySetInnerHTML` is a way to inject HTML into your React component. This is dangerous because it can easily lead to XSS vulnerabilities.

[`src/components/products/product/Product.jsx:21`](https://github.com/celeroncoder/e-commerce-store/blob/7f994d7b5921c71913f381d73cd26d2ac5f4ceee/src/components/products/product/Product.jsx#L21)

**`prefer-useReducer`**

Component "AddressForm" has 6 useState calls — consider useReducer for related state

> Group related state: `const [state, dispatch] = useReducer(reducer, { field1, field2, ... })`

[`src/components/checkoutForm/AddressForm.jsx:10`](https://github.com/celeroncoder/e-commerce-store/blob/7f994d7b5921c71913f381d73cd26d2ac5f4ceee/src/components/checkoutForm/AddressForm.jsx#L10)

---

_{Last scored May 14, 2026 at 9:39 AM UTC. Maintained by [React Review](https://github.com/millionco/react-review).}