skills.rest
involvex
involvexCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ionic-react

Guides Ionic Framework development with React including routing, lifecycle hooks, and state management.

1|Updated Aug 25, 2026
Search Tags:#state management#react#routing#mobile development#lifecycle hooks#ionic#capacitor
One-click install
npx skills add https://github.com/involvex/ionic-everywhere --skill ionic-react-involvex
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ionic-react
Source: https://github.com/involvex/ionic-everywhere/tree/main/.agents/skills/ionic-react
Command: npx skills add https://github.com/involvex/ionic-everywhere --skill ionic-react-involvex

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building Ionic apps with React introduces framework-specific pitfalls: pages stay mounted in the DOM so useEffect does not refire, standard React Router breaks Ionic transitions, and Ionic form components emit custom events instead of standard onChange. This Skill guides an agent through correct Ionic React patterns so navigation, lifecycle, overlays, and state management work as intended. ## Core Features & Use Cases - Routing and Navigation: Sets up IonReactRouter, IonRouterOutlet, tab-based navigation with IonTabs, side menus, route guards, and programmatic navigation via useIonRouter. - Lifecycle and Hooks: Applies useIonViewWillEnter and related hooks for per-visit data refresh, plus overlay hooks like useIonAlert, useIonToast, useIonModal, and useIonLoading. - State Management Integration: Integrates React Context, Redux Toolkit, Zustand, and TanStack Query with Ionic's page-caching behavior. - Use Case: A developer's Ionic React app shows stale data when navigating back to a list page. The Skill diagnoses the page-caching behavior and refactors the data fetch into useIonViewWillEnter. ## Quick Start Ask the agent to review your Ionic React project and fix routing, lifecycle, or state management issues using Ionic best practices.

Frequently Asked Questions about ionic-react

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up routing in an Ionic React app?▼

Use IonReactRouter from @ionic/react-router instead of BrowserRouter, with IonRouterOutlet containing Route components that use the component prop. This enables Ionic page transitions and correct page stack management.

Why does useEffect not refire when navigating back in Ionic React?▼

IonRouterOutlet keeps pages mounted in the DOM, so useEffect with an empty dependency array only runs on first mount. Use useIonViewWillEnter to refresh data every time the page becomes visible.

How do I handle form inputs with Ionic React components?▼

Use onIonInput for IonInput and IonTextarea, and onIonChange for IonSelect, IonToggle, IonCheckbox, and IonRange. Read values via e.detail.value or e.detail.checked rather than standard onChange handlers.

Can I use Redux or Zustand with Ionic React?▼

Yes, Redux Toolkit, Zustand, React Context, and TanStack Query all work with Ionic React. Place providers outside IonReactRouter and dispatch fetches inside useIonViewWillEnter to handle Ionic's page caching.

Why are my Ionic lifecycle hooks not firing?▼

Lifecycle hooks only fire in components rendered as the component prop of a Route inside IonRouterOutlet, and the page must render IonPage as its root element. They do not fire in child components or routes using render or children props.

When should I not use this Ionic React skill?▼

Do not use it for plain Capacitor React apps without Ionic, Ionic apps built with Angular or Vue, creating a brand-new Ionic app, or upgrading Ionic versions. Dedicated skills exist for each of those scenarios.

Related Skills

Explore More Software Engineering Skills→
capawesome-teamcapawesome-team
37

ionic-app-creation

Creates a new Ionic app project with selected framework, starter template, and optional Capacitor integration via Ionic CLI.

Official
Intermediate
huidgehuidge
2

capacitor-h5-to-app

Package H5 web apps into native Android and iOS apps with Capacitor.

Community
Intermediate
satish-krishnasatish-krishna

capacitor

Automate cross-platform native device access in Ionic apps with Capacitor plugins.

Community
Advanced
Cap-goCap-go
58

ionic-design

Guide Ionic component usage and theming for Capacitor-based mobile apps.

Official
Intermediate