How to Build Financial Document Comparison Interfaces with React

An implementation guide covering structured comparison, source-linked review, React Native adaptations, and lessons from five technology companies.

A revised invoice changes the beneficiary account while keeping the total unchanged. A financial report switches its reporting unit from dollars to thousands of dollars. An OCR engine misses a decimal point in a scanned statement.

These changes require different responses. A useful comparison interface must help reviewers understand what changed, inspect the source, and distinguish genuine differences from extraction errors.

React provides the presentation layer for this workflow. Reliable results depend on the extraction pipeline, matching rules, financial-value handling, and review process behind it. React Native applications can share those foundations while adapting document viewing and navigation for mobile devices.

What Should the Interface Compare?

“Document comparison” describes several operations. Establishing the supported workflow before choosing libraries helps prevent misleading results.

A file hash determines whether files contain identical bytes. It cannot explain whether a financial value changed.

Similarly, a text diff may identify different characters without understanding currencies, reporting periods, or units.

A practical first release should support one document family, such as invoices, and a defined set of fields. Comparing two invoice versions is easier to validate than comparing arbitrary financial reports.

Separate Extraction, Comparison, and Presentation

A maintainable architecture gives each stage a clear responsibility.

Extraction converts documents into text, fields, tables, and source locations. Comparison aligns corresponding content and classifies differences. Presentation displays evidence and captures reviewer decisions.

Mozilla’s PDF.js provides browser-based PDF loading and rendering. Its examples support building a document viewer, but rendering does not automatically produce correctly interpreted financial fields or reconstructed tables.

Scanned documents require OCR or document analysis. Preserve extracted text and confidence information where available.

Amazon Textract recommends evaluating confidence scores against the sensitivity of the use case. Those scores should inform review routing rather than become guarantees of correctness.

The interface should therefore distinguish “Extraction needs review” from “Confirmed value changed.” Otherwise, an OCR mistake can become an apparently authoritative financial difference.

Create a Data Model That Preserves Evidence

React components should receive structured comparison results rather than interpret raw documents during rendering.

type SourceReference = {
  documentVersionId: string;
  page: number;
  rawText: string;
  confidence?: number;
};

type ComparedValue = {
  display: string;
  canonical: string;
  currency?: string;
  source: SourceReference;
};

type FieldChange = {
  id: string;
  label: string;
  kind: "added" | "removed" | "modified";
  before?: ComparedValue;
  after?: ComparedValue;
  needsExtractionReview: boolean;
};

The display value preserves readable formatting. The canonical value supports comparison. Source references connect each result to the original document.

A production model should also identify the extraction version and comparison-rule version. Updating a parser can change results, so reproducibility requires knowing which rules produced a comparison.

Store reviewer decisions separately. Marking a difference as reviewed should preserve the extracted content and detected change.

Normalize Financial Values Without Losing Meaning

Normalization should remove irrelevant formatting differences while retaining financial meaning.

For example, $1,250.00 and USD 1250.00 may represent the same amount when currency and locale are established. However, 1,250 remains ambiguous without formatting context.

Rules should account for:

• Currency and applicable decimal precision.
• Locale-specific separators.
• Parentheses used for negative values.
• Reporting units such as thousands or millions.
• Differences between amounts, percentages, dates, and identifiers.

Account numbers and invoice identifiers should remain strings because leading zeros may matter.

For arithmetic, use an appropriate decimal implementation or integer minor units with an explicit currency scale. JavaScript integers are exact only within a defined safe range, so integer-based monetary models still need bounds checks.

Currency, unit, and reporting-period changes should remain visible even when the numeric text matches.

Match Content Before Applying a Text Diff

Comparing complete extracted documents as strings often produces noise. A paragraph moved to another page may appear as a deletion followed by an insertion.

Match corresponding sections, fields, and table rows first.

Stable line-item identifiers provide stronger evidence than row positions. When identifiers are unavailable, matching can consider several attributes, but duplicate descriptions and ambiguous matches require explicit handling.

After alignment, jsdiff can highlight changes within matched content. It supports character, word, line, and array comparisons, including custom equality rules for arrays. It does not provide financial interpretation or document alignment automatically.

Use wording comparisons for revised clauses and structured comparisons for amounts, dates, currencies, and identifiers.

Build the React Review Component

A desktop interface can combine a change list with a document preview. Selecting a changed value should open its supporting source.

The following component illustrates presentation only. Extraction, comparison, authorization, and persistence remain separate responsibilities.

type ChangeCardProps = {
  change: FieldChange;
  reviewed: boolean;
  onOpenSource: (source: SourceReference) => void;
  onReview: (id: string) => void;
};

export function ChangeCard({
  change,
  reviewed,
  onOpenSource,
  onReview,
}: ChangeCardProps) {
  const { before, after } = change;

  return (
    <article>
      <h3>{change.label}</h3>
      <p>Change: {change.kind}</p>

      {change.needsExtractionReview && (
        <p>Extraction needs review</p>
      )}

      <dl>
        <dt>Previous value</dt>
        <dd>{before?.display ?? "Not present"}</dd>

        <dt>Updated value</dt>
        <dd>{after?.display ?? "Not present"}</dd>
      </dl>

      {before && (
        <button onClick={() => onOpenSource(before.source)}>
          View previous source
        </button>
      )}

      {after && (
        <button onClick={() => onOpenSource(after.source)}>
          View updated source
        </button>
      )}

      <button
        disabled={reviewed || change.needsExtractionReview}
        onClick={() => onReview(change.id)}
      >
        {reviewed ? "Reviewed" : "Mark reviewed"}
      </button>
    </article>
  );
}

Review status and business approval need distinct meanings. Inspecting a revised beneficiary account does not authorize a payment.

The server should validate permissions and document versions when recording decisions. Client-side controls alone cannot enforce those rules.

How Five Companies Address Relevant Parts of the Workflow

GeekyAnts, Adobe, Microsoft, Google Cloud, and AWS provide published examples across application engineering, document comparison, and extraction. These examples do not establish that all five use React or implement this exact financial comparison workflow.

Financial Interfaces and Document Intelligence

GeekyAnts’ banking case study describes XState for state management, SWR for fetching and caching, and React Native Reanimated for interactions. Separately, its document-intelligence portfolio describes extracting answers and insights from document repositories.

An applicable lesson is to model uploading, extraction, comparison, review, and completion as explicit states.

For example, a comparison should not become reviewable while extraction remains incomplete. This is a recommended application of the pattern, rather than a documented GeekyAnts document-comparison implementation.

Document-Version Comparison

Adobe Acrobat Pro compares PDF versions and presents detected differences. Its documentation describes scanned-document options and side-by-side review.

The useful interface pattern is contextual navigation: clear version labels, a change summary, and access to surrounding content.

Reviewers should be able to investigate a difference without manually searching both documents.

Source-Linked Extraction

Microsoft Document Intelligence extracts document structure, including text and tables. Its response models preserve location information, while OCR output includes word polygons and confidence scores.

This supports source highlighting in a React application. Correct positioning still requires transforming coordinates for page scale, rotation, and viewer layout.

Raw and Normalized Values

Google Cloud’s Invoice Parser extracts header and line-item fields. Document AI can return normalized values for supported fields alongside references to extracted text.

The architectural lesson is to preserve both representations. Compare validated canonical values while keeping the original wording available for inspection.

Standardized Invoice Fields

Amazon Textract’s expense-analysis APIs return standardized invoice and receipt fields with detected values, page references, geometry, and confidence information.

A provider-adapter layer can translate this output into the application’s comparison model. Original labels should remain accessible so reviewers can verify field mappings.

Adapt the Experience for React Native

React and React Native can share comparison types, validation rules, and API contracts. Their rendering implementations differ.

Native screens use components such as View, Text, and Pressable. PDF viewing requires a separately evaluated native renderer or deliberate WebView integration.

On smaller screens, stacked before-and-after cards usually provide more readable content than compressed document columns. A version toggle can preserve space while keeping source navigation available.

For long change lists, React Native’s FlatList provides virtualization. Use stable identifiers and ensure external review-state changes trigger updates. Apply getItemLayout only when dimensions are reliably known.

Keep expensive processing outside rendering. React’s useDeferredValue can defer an interface update, but it does not move synchronous comparison work onto another thread.

Validate Security, Accessibility, and Review Accuracy

Document uploads require server-side controls. OWASP recommends layered protections covering file types, size limits, authorization, storage, and appropriate scanning. Browser file-selection restrictions are insufficient.

Changes also need explicit labels beyond red and green highlighting. W3C guidance requires another way to convey information communicated through color.

Testing should include formatting-only differences, currency changes, reordered and duplicated rows, OCR errors, missing pages, and decisions submitted against outdated versions.

Measure extraction correctness, matching quality, rendering performance, and review completion separately. A dependable financial document comparison interface preserves evidence, exposes uncertainty, and makes every reviewer decision explicit.