WordPress - How do I stop a Gutenberg Block from firing multiple GET Requests?

Question

Fixed it!

How did I fix it?

Well, after looking for every documentation and question around fetching, I remembered that a button with a function with parenthesis always fires. The moment I removed the parenthesis it stopped the infinite loop of GET requests.

<button onclick={fetchingId}>Chercher le produit</button>

Now, the issue is that it doesn't seem to work and the function doesn't fire. I am currently trying a few Gutenberg components to help me fire that function and fetch the API on demand.

Edit

Someone made me notice that I should pass the function and not its result.

The function inside the onclick should be:

() => fetchingId(attributes.ids)

I switched the HTML button with a Component names <Button>:

<Button
    isPrimary
    className='fetch-product'
    onClick={() => fetchingId(attributes.ids)}>
        Chercher un produit
</Button>

---

From the WordPress StackExchange somebody told me that we shouldn't use functions inside a React component and use useEffect instead.

The other thread with a solution.

The original post:

I've been building a Gutenberg Block that sends a GET request to the Woocommerce REST API.

It is composed of a text input that receives an ID of a product and fetches it to the Woocommerce REST API. It also has a button that fires a function to fetch the product with the API.

The issue with the GET Requests

The fetching works well, but it keeps sending multiple GET requests, even when I do not click the button to fire the function. Simply clicking the input sends multiple requests when i only need one everytime I change the ID.

The code

This is the first part of the edit function:

const edit = ({ attributes, setAttributes }) => {

    const blockProps = useBlockProps();

    // Wrapped the WooCommerce.get() function in a function named `fetchingId` to call it with a button
    const fetchingId = async (id) => {
      // The WooCoommerce.get() function
      const response = await WooCommerce.get(`products/${id}`)
        .then((response) => {
          console.log(response.data);
          setAttributes({ price: response.data.price });
          setAttributes({ name: response.data.name });
        })
        .catch((error) => {
          console.log(error.response.data);
          setAttributes({ price: '' });
          setAttributes({ name: '' });
        });
    }

    ...

  }

This is another part of the function: an input that updates the Product ID that is used for the GET request and a button linked to the fetchingId() function.

return <div {...blockProps}>
    <div class="wrapper-input" >
        <TextControl
          label={__('ID du Produit', 'ingredient-unique')}
          value={attributes.id}
          onChange={(val) => setAttributes({ id: val })}
          className='control-id'
        />
    </div>
    <button onclick={fetchingId(attributes.id)}>Chercher le produit</button>

    ...
</div>;

Answer 1

Fixed it!

How did I fix it?

Well, after looking for every documentation and question around fetching, I remembered that a button with a function with parenthesis always fires. The moment I removed the parenthesis it stopped the infinite loop of GET requests.

<button onclick={fetchingId}>Chercher le produit</button>

Now, the issue is that it doesn't seem to work and the function doesn't fire. I am currently trying a few Gutenberg components to help me fire that function and fetch the API on demand. Edit

Someone made me notice that I should pass the function and not its result.

The function inside the onclick should be:

() => fetchingId(attributes.ids)

I switched the HTML button with a Component names :

<Button
    isPrimary
    className='fetch-product'
    onClick={() => fetchingId(attributes.ids)}>
        Chercher un produit
</Button>

From the WordPress StackExchange somebody told me that we shouldn't use functions inside a React component and use useEffect instead.