Capacitor has become an increasingly common choice for cross-platform development in 2026. This article covers its usage, underlying model, and optimization strategies.

Getting Started: Multi-Stage Docker Build

A clean production build pipeline for a Capacitor web app:

FROM node:20-alpine AS deps
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN corepack enable && pnpm install --frozen-lockfile

FROM node:20-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN pnpm build

FROM nginx:alpine AS runner
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Multi-stage builds keep the final image lean — the deps and builder stages are discarded, leaving only the nginx runtime with the compiled output.

React Native List Optimization

When building mobile UIs with Capacitor's React Native integration:

import React, { useState, useCallback } from "react";
import { FlatList, TouchableOpacity, Text } from "react-native";

const ItemList = ({ data, onRefresh }) => {
  const [refreshing, setRefreshing] = useState(false);

  const handleRefresh = useCallback(async () => {
    setRefreshing(true);
    await onRefresh();
    setRefreshing(false);
  }, [onRefresh]);

  const renderItem = useCallback(
    ({ item }) => (
      <TouchableOpacity>
        <Text>{item.title}</Text>
      </TouchableOpacity>
    ),
    [],
  );

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      refreshing={refreshing}
      onRefresh={handleRefresh}
    />
  );
};

Using useCallback for renderItem prevents unnecessary re-creation on every render, which is critical for large lists.

Key Considerations

• Error handling: always wrap async Capacitor plugin calls in try/catch — native bridge errors are silent by default
• Boundary conditions: handle empty states, loading states, and error states explicitly
• Testing: use Capacitor's Jest mock for plugins to keep unit tests fast and environment-independent

Summary

Capacitor's model — write once in web technologies, deploy natively — has matured significantly by 2026. The key to a successful Capacitor project is treating it as a native app first and a web app second: respect platform conventions, optimize for device constraints, and use the multi-stage build pipeline to keep deployment artifacts small.