---
title: Migrate FooterHelp from Polaris React
description: Learn how to migrate Polaris React FooterHelp to Polaris web components.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/footer-help
  md: >-
    https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/footer-help.md
api_name: app-home
---

# Migrate Footer​Help from Polaris React

Use the footer help pattern for secondary assistance at the end of a page. Put instructions required to complete the task next to the relevant control instead.

***

## Choose the destination

| Polaris React | Polaris web components | Migration type |
| - | - | - |
| `FooterHelp` | [Footer help pattern](https://shopify.dev/docs/api/app-home/patterns/compositions/footer-help) | Pattern |

***

## Map footer help content

| Polaris React | Polaris web components | Migration notes |
| - | - | - |
| `children` | Footer-help pattern text | Keep the help brief and secondary to the page task. |
| Polaris React `Link url` | `s-link href` | Preserve normal link behavior, including modified clicks and copied URLs. |
| Required instructions | Move next to the relevant control | Footer help is too easy to miss for task-critical information. |

***

## Migrate the call site

1. Trace the complete feature around `FooterHelp`, including any data, state, actions, loading, empty, and error paths it has.

2. Implement the linked Polaris web components pattern as one coherent feature.

3. Reconnect app-owned state and backend operations, then migrate the old feature as a single slice.

4. After verification, remove the `FooterHelp` import and any Polaris-only state, wrappers, or helpers that no longer have a caller.

***

## Preserve these behaviors

* The data and state that determine what the feature displays.
* User actions, confirmation, and recovery behavior that apply to the feature.
* Relevant loading, empty, error, and responsive states.

***

## Test and remove Polaris React

Test the complete migrated `FooterHelp` feature with realistic data. Exercise each state transition and action result, including the loading, empty, error, and responsive paths that apply.

Don't remove `@shopify/polaris` while another component still imports it. Once all call sites are migrated, remove the package and its provider-level setup, then run the app's full test suite.

***

## Migration example

## Migrating FooterHelp

##### Polaris web components

```tsx
export function FooterHelpMigrationExample() {
  return (
    <s-stack alignItems="center">
      <s-text>
        Learn more about <s-link href="">creating puzzles</s-link>.
      </s-text>
    </s-stack>
  );
}
```

##### Polaris React

```tsx
import {FooterHelp, Link} from '@shopify/polaris';


export function FooterHelpMigrationExample() {

  return (
    <FooterHelp>
      Learn more about <Link url="">creating puzzles</Link>.
    </FooterHelp>
  );
}
```

***