When you want your application to respond to a user's interaction with a SweetAlert2 dialog, you can use SweetAlert2's promise-based callbacks to update React state or trigger side effects. SweetAlert2 dialogs return a promise that resolves when the user interacts with the alert, such as by clicking a confirm or cancel button. By handling the resolved value of this promise, you can decide how your React component should respond—such as updating state, triggering navigation, or making API calls.

To connect SweetAlert2 callbacks with React's state management, use the result of the alert's promise inside your component. For example, if you want to show a message when the user confirms an action, you can set a state variable in the .then() callback. This approach keeps your UI in sync with the user's choices and lets you trigger side effects exactly when you need them.

Suppose you want to display a message in your component after the user confirms a SweetAlert2 dialog. You can use the useState hook to manage a message, and update it inside the SweetAlert2 callback:

import React, { useState } from "react";
import Swal from "sweetalert2";

function ConfirmExample() {
  const [message, setMessage] = useState("");

  const handleDelete = () => {
    Swal.fire({
      title: "Are you sure?",
      text: "This action cannot be undone.",
      icon: "warning",
      showCancelButton: true,
      confirmButtonText: "Yes, delete it!",
      cancelButtonText: "Cancel"
    }).then((result) => {
      if (result.isConfirmed) {
        setMessage("Item deleted.");
      } else if (result.isDismissed) {
        setMessage("Action canceled.");
      }
    });
  };

  return (
    <div>
      <button onClick={handleDelete}>Delete Item</button>
      {message && <p>{message}</p>}
    </div>
  );
}

In this example, when the user clicks Delete Item, the SweetAlert2 dialog appears. If the user confirms, the setMessage function updates the component's state to show Item deleted. If the user cancels or dismisses the dialog, the message changes to Action canceled. This pattern lets you react to user choices in your component logic and UI.