Medusa-JS Next.js前端Stripe支付组件频繁重渲染问题排查

问题分析 #

点击CheckoutForm中非PaymentElement区域时，整个StripePayment组件持续重渲染，核心原因有三点：

1. 原代码每次cart.id变化时都会重新调用loadStripe，重复加载Stripe脚本并更新状态，触发不必要的重渲染；
2. 未对组件做缓存优化，父组件传递的cart对象只要引用变化（哪怕内容未变），就会直接导致子组件重渲染；
3. useEffect依赖项设置不合理，监听了非必要字段，且未对状态更新做条件判断，频繁触发状态变更。

解决方案 #

1. 优化StripePayment组件 #

"use client";
import { useState, useEffect, useMemo } from "react";
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";
import CheckoutForm from "./form";
import { memo } from "react";

const STRIPE_PK_KEY = process.env.NEXT_PUBLIC_STRIPE_PK_KEY;

// 仅初始化一次Stripe脚本，避免重复加载
const stripePromise = STRIPE_PK_KEY ? loadStripe(STRIPE_PK_KEY) : null;

// 用memo包裹组件，props未变化时不触发重渲染
const StripePayment = memo(({ cart }) => {
  const [clientSecret, setClientSecret] = useState();

  // 提取并缓存Stripe会话可用性，避免依赖整个cart对象
  const stripeSessionAvailable = useMemo(() => {
    return cart?.payment_sessions?.some(
      (session) => session.provider_id === "stripe"
    );
  }, [cart?.payment_sessions]);

  // 提取并缓存当前clientSecret，避免重复读取深层属性
  const currentClientSecret = useMemo(() => {
    return cart?.payment_session?.data?.client_secret;
  }, [cart?.payment_session]);

  useEffect(() => {
    if (!stripeSessionAvailable) return;
    // 仅当clientSecret实际变化时更新状态
    if (currentClientSecret !== clientSecret) {
      setClientSecret(currentClientSecret);
    }
  }, [stripeSessionAvailable, currentClientSecret, clientSecret]);

  return (
    <div>
      <h1>Stripe payment</h1>
      {stripePromise && clientSecret && (
        <Elements stripe={stripePromise} options={{ clientSecret }}>
          <CheckoutForm clientSecret={clientSecret} cart={cart} />
        </Elements>
      )}
    </div>
  );
});

export default StripePayment;

2. 优化CheckoutForm组件 #

"use client";
import {
  useElements,
  useStripe,
  PaymentElement,
} from "@stripe/react-stripe-js";
import { useState, useMemo, memo } from "react";
import medusaClient from "../../../lib/medusaClient";

// 用memo包裹组件，减少不必要重渲染
const Form = memo(({ clientSecret, cart }) => {
  const stripe = useStripe();
  const elements = useElements();

  const [message, setMessage] = useState("");
  const [isProcessing, setIsProcessing] = useState(false);

  // 缓存收货地址，避免每次渲染重复读取cart深层属性
  const billingAddress = useMemo(() => {
    return cart?.shipping_address || {};
  }, [cart?.shipping_address]);

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!stripe || !elements) {
      console.log("No stripe or elements");
      return;
    }

    setIsProcessing(true);

    const { error, paymentIntent } = await stripe.confirmCardPayment(
      clientSecret,
      {
        payment_method: {
          card: elements.getElement(PaymentElement),
          billing_details: {
            name: e.target.name.value,
            email: e.target.email.value,
            phone: e.target.phone.value,
            address: {
              city: billingAddress.city,
              country: billingAddress.country,
              line1: billingAddress.line1,
              line2: billingAddress.line2,
              postal_code: billingAddress.postal_code,
            },
          },
        },
      }
    );

    if (error) {
      setMessage(error.message);
    } else if (paymentIntent && paymentIntent.status === "succeeded") {
      setMessage("Payment succeeded");
      try {
        await medusaClient.carts.complete(cart.id);
        console.log("Order completed");
      } catch (err) {
        console.error("Error completing order:", err);
      }
    } else {
      setMessage("An unexpected error occurred");
    }
    console.log("Message: ", message);
    setIsProcessing(false);
  };

  return (
    <form id="payment-form" onSubmit={handleSubmit}>
      {/* INPUT LABELS OMITTED FOR SAKE OF READIBILITY */}
      <PaymentElement id="payment-element" />
      <button
        className="px-4 py-2 mt-4 text-white bg-blue-500"
        disabled={isProcessing || !stripe || !elements}
        id="submit"
      >
        <span id="button-text">
          {isProcessing ? "Processing ... " : "Pay now"}
        </span>
      </button>
      {/* Show any error or success messages */}
      {message && <div id="payment-message">{message}</div>}
    </form>
  );
});

export default Form;

额外优化建议 #

如果父组件每次渲染都会生成新的cart对象（比如从API获取后未缓存），可以在父组件中用useMemo缓存cart，或者仅传递StripePayment所需的字段（如payment_sessions、payment_session、id），进一步减少重触发的可能。

内容的提问来源于stack exchange，提问作者Frederik Bo Dahl