State update clears the fields

[samuel-oliveira-fcamara]

Hello, for the first time I am implementing an integration with Mecado Pago in a NextJS project, for this I started using the SDK for React and also using the Secure Fields components.

When I started testing the components and the Core methods using mocked data everything was going well until I started to integrate one with the other, because when using some field callback events together with useState, I realized that if a component had the event, when it had an update of state, that would make the field clear.

Example:

"use client";

import {
  getInstallments,
  SecurityCode,
  ExpirationDate,
  initMercadoPago,
  CardNumber,
} from "@mercadopago/sdk-react";
import type { Installments } from "@mercadopago/sdk-react/coreMethods/getInstallments/types";
import { useMemo, useState } from "react";
import Select from "@/components/Form/Select/Select";

const publicKey = "<PUBLIC_KEY>";
initMercadoPago(publicKey, {
  locale: "pt-BR",
});

function Page() {
  const [installments, setInstallments] = useState<Installments | undefined>();

  const installmentsOptions = useMemo(() => {
    if (!installments) return [];

    return installments.payer_costs.map((cost) => ({
      label: cost.recommended_message,
      value: cost.payment_method_option_id,
    }));
  }, [installments]);

  const fetchInstallments = async (selectedBin?: string) => {
    console.log("👉 Getting installments ...");

    if (!selectedBin) {
      console.log("👉 No bin selected");
      return;
    }

    try {
      const installments = await getInstallments({
        amount: "100",
        bin: selectedBin,
      });
      console.log("👉 installments => ", installments);
      setInstallments(installments?.[0]);
    } catch (error) {
      console.log("👉 Fail to get installments => ", error);
    }
  };

  return (
    <div className="max-w-xl py-8 mx-auto">
      <form className="flex flex-col gap-4">
        <p>5031 4332 1540 6351</p>
        <div className="h-[45px] flex border border-red-600 rounded-lg">
          <CardNumber onBinChange={(e) => fetchInstallments(e.bin)} />
        </div>
        <div className="h-[45px] flex border border-red-600 rounded-lg">
          <SecurityCode
            onChange={() => console.log("👉 On SC change")}
            placeholder="Security code"
          />
        </div>
        <div className="h-[45px] flex border border-red-600 rounded-lg">
          <ExpirationDate placeholder="Expiration date" />
        </div>
        <Select
          options={installmentsOptions}
          name={"installments"}
          onChange={(e) => console.log("👉 On installments change => ", e)}
        />
      </form>
    </div>
  );
}

export default Page;

In this case, I'm looking for installments as soon as I get the Bin, but I tested several cases. And WHENEVER a state updates, any component (in this case CardNumber and SecurityCode) that has a callback event is cleared

[AleFossati]

Hello @samuel-oliveira-fcamara, it looks like you are re-rendering your component and consequently the Secure Fields because of state update. That's why it looks like the inputs are being cleared, but in fact what is happening is that you are reloading them completely.

Here's some links regarding React lifecycle that may help you.
React.dev - Memo
Medium - React Components rendered twice
Medium - Wait, you’re not using <React.StrictMode>?!