Product Icon

Free Gifts for WooCommerce

Offer Free Gifts to your customers for making purchases in your WooCommerce Shop.

Bug: React render-phase dispatch crash on Cart page during SPA / iAPI router navigation

Hello,
While investigating WooCommerce issue #63518 (https://github.com/woocommerce/woocommerce/issues/63518) — which documents a structural problem with classic script rehydration after iAPI router navigation — I identified two bugs in free-gifts-for-woocommerce that cause React errors on the Cart page during any SPA / AJAX navigation.

Bug 1 — Missing dependency declaration
The script fgf-wc-blocks accesses wc.blocksCheckout without declaring wc-blocks-checkout as a registered dependency in wp_enqueue_script(). WooCommerce’s own dependency detection reports this on every Cart page load:

[WooCommerce] Script “fgf-wc-blocks” accessed wc.blocksCheckout without declaring “wc-blocks-checkout” as a dependency.

Fix: Add wc-blocks-checkout to the $deps array when registering fgf-wc-blocks.

Bug 2 — Redux dispatch during React render phase
getElement() in index.js:31 calls removeNotices() at index.js:262, which dispatches a Redux action (wp.data dispatch) synchronously during the React render cycle. React 18 forbids this and throws:
Warning: Cannot update a component (Unknown) while rendering a different component (getElement). at getElement (free-gifts-for-woocommerce/…/index.js:32:11)
This also triggers: Warning: Internal React error: Expected static flag was missing. at getElement (free-gifts-for-woocommerce/…/index.js:32:11)

Fix: Move any wp.data.dispatch() calls out of the render function into a useEffect() hook so they run after render, not during it. Currently removeNotices() is called directly inside the render body which triggers a Redux dispatch mid-render. It should be wrapped in useEffect with an empty dependency array so it fires only after the component mounts.

Context
These bugs are silent on a full page load because the Cart page is server-rendered with all scripts already present. They become visible — and cause visual breakage — when the Cart is reached via SPA navigation (iAPI router or any AJAX swap), because React re-mounts the block tree in a context where the Redux store is being initialized at the same time.

The broader issue is tracked at: https://github.com/woocommerce/woocommerce/issues/63518

**Fix:** Move any `wp.data.dispatch()` calls out of the render function into a `useEffect()` hook so they run after render, not during it:

“`js
// ❌ Wrong — dispatch during render
function getElement() {
removeNotices(); // triggers Redux dispatch
return ;
}

// ✅ Correct — dispatch after render
function getElement() {
useEffect(() => {
removeNotices();
}, []);
return ;
}

Happy to provide more detail or a reproducible test case if helpful.

Screenshots

Author

markusroof

Current Status

Open

Last updated: March 3, 2026

0 comments

Log in to comment on this feature request.