Handling Forms and Data in Shopify Remix: useSubmit vs. useFetcher

In Shopify Remix, managing form submissions and data fetching is crucial for building interactive and dynamic user experiences. Two essential hooks, useFetcher and useSubmit, offer developers powerful tools to handle form submissions and asynchronous requests effectively. This blog will dive into the use cases and examples for both hooks.

Why useFetcher and useSubmit?

When developing applications in Shopify Remix, forms often play a central role in sending data, and sometimes you need to handle these submissions programmatically. This is where useFetcher and useSubmit come in:

• useSubmit: This hook allows you to programmatically trigger form submissions, offering flexibility beyond traditional form elements.
• useFetcher: This hook is designed for both submitting forms and fetching data asynchronously, making it a versatile tool for AJAX-like behavior.

Let’s explore both in detail with examples.

useSubmit – Programmatic Form Submissions

useSubmit is useful when you need to trigger a form submission based on an event, such as a button click or custom action. Instead of relying on HTML form elements, useSubmit provides you with a function to send data.

Example: Submitting a Form on Button Click

Imagine you have a product review form that you want to submit when a button is clicked, but without a traditional form element:

import { useSubmit } from "@remix-run/react";

function ProductReview() {
  const submit = useSubmit();

  function handleReviewSubmit() {
    const formData = new FormData();
    formData.append('review', 'Great product!');
    submit(formData, { action: "/reviews", method: "post" });
  }

  return (
    <div>
      <h2>Submit Your Review</h2>
      <button onClick={handleReviewSubmit}>Submit Review</button>
    </div>
  );
}

In this example:

• The useSubmit hook provides the submit function.
• handleReviewSubmit creates a FormData object with the user’s review and then submits it to the /reviews endpoint.
• The form submission occurs when the button is clicked, making the form submission programmatic.

useFetcher – Data Fetching and Form Submissions

useFetcher is a versatile hook that handles both data fetching and form submissions. It’s particularly helpful when you need to load or submit data without causing a full page refresh, similar to how AJAX works.

Example: Fetching Product Details with useFetcher

Consider a scenario where you need to fetch additional product details when a button is clicked:

import { useFetcher } from "@remix-run/react";

function ProductDetails() {
  const fetcher = useFetcher();

  function loadProductDetails() {
    fetcher.load("/product-details?id=123"); // Triggers data fetching
  }

  return (
    <div>
      <h2>Product Details</h2>
      <button onClick={loadProductDetails}>Load Details</button>
      
      {fetcher.data && (
        <div>
          <p>Name: {fetcher.data.name}</p>
          <p>Description: {fetcher.data.description}</p>
        </div>
      )}
    </div>
  );
}

In this example:

• The useFetcher hook provides the fetcher object, which handles both form submissions and data fetching.
• fetcher.load(“/product-details?id=123”) triggers an AJAX-like request to the specified URL.
• The fetched data is accessed via fetcher.data, allowing you to render the product details once they are loaded.

Example: Submitting a Form with useFetcher

You can also use useFetcher to submit forms in a non-traditional way. For example, let’s say you want to submit a quick review without reloading the page:

import { useFetcher } from 'remix';

function QuickReviewForm() {
  const fetcher = useFetcher();

  return (
    <fetcher.Form method="post" action="/submit-review">
      <textarea name="review" placeholder="Write a quick review"></textarea>
      <button type="submit">Submit Review</button>

      {fetcher.state === "submitting" && <p>Submitting...</p>}
      {fetcher.data && <p>Thank you for your review!</p>}
    </fetcher.Form>
  );
}

In this example:

• <fetcher.Form> is a form component provided by useFetcher, which submits the form asynchronously.
• The form sends the review to /submit-review and updates the UI while submitting (fetcher.state === “submitting”).
• Once the submission is complete, fetcher.data can be used to display a success message or the server’s response.

Key Differences Between useSubmit and useFetcher

While both hooks help with form submissions, there are subtle differences between them:

• useSubmit: Is ideal when you need to submit forms programmatically or trigger form submission based on a custom event.
• useFetcher: Provides more flexibility, allowing you to both submit forms and fetch data asynchronously. It’s especially useful when you want AJAX-like behavior in Remix applications.

Conclusion

In Shopify Remix, handling form submissions and data fetching is made simple and flexible with useSubmit and useFetcher. Whether you’re submitting forms programmatically or fetching data asynchronously, these hooks give you the tools to create dynamic and interactive user experiences. By incorporating these hooks into your Shopify Remix applications, you can enhance both form handling and the overall responsiveness of your app.

Learn – How to Validate Form using Remix?