# Error: dispatch must be called inside of an event handler or within the function arguments of useAction, useState or useContentProperty

**URL:** <https://community.developer.atlassian.com/t/error-dispatch-must-be-called-inside-of-an-event-handler-or-within-the-function-arguments-of-useaction-usestate-or-usecontentproperty/67350>\
**Category:** Forge UI Kit and Custom UI\
**Tags:** redux, confluence-cloud, forge, forge-ui-kit\
**Created:** [March 14, 2023, 7:14am UTC](https://community.developer.atlassian.com/t/error-dispatch-must-be-called-inside-of-an-event-handler-or-within-the-function-arguments-of-useaction-usestate-or-usecontentproperty/67350 "2023-03-14T07:14:37Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![rick.van.twillert](https://avatars.discourse-cdn.com/v4/letter/r/7993a0/32.png) [@rick.van.twillert](https://community.developer.atlassian.com/u/rick.van.twillert)\
**Post date:** [March 14, 2023, 7:14am UTC](https://community.developer.atlassian.com/t/error-dispatch-must-be-called-inside-of-an-event-handler-or-within-the-function-arguments-of-useaction-usestate-or-usecontentproperty/67350/1 "2023-03-14T07:14:38Z")

</div>

Hi!

I’m running into some redux error, which I’m unable to fix nor understand so far.

I’m trying to create a forge ui kit app that inventories all macros used on a Confluence page, here’s part of the code

```auto
// Get page body by contentId and find all macros used on the page and return them in an array of objects
const getPageMacros = async (contentId) => {
  const page = await getPage(contentId);
  console.log(page);
  const bodyStorageFormat = page.body.storage.value;
  console.log(bodyStorageFormat);
  const pageMacrosStorageFormat = findPageMacros(bodyStorageFormat);
  console.log(pageMacrosStorageFormat);
  let pageMacros = [];
  if (pageMacrosStorageFormat) {
    for (let i = 0; i < pageMacrosStorageFormat.length; i++) {
      pageMacros[i] = findPageMacroProperties(pageMacrosStorageFormat[i]);
    }
  }
  console.log(pageMacros);
  return pageMacros;
}

const App = () => {
  const [isOpen, setOpen] = useState(true);
  const context = useProductContext();
  const [pageMacrosObjects] = useState(async () => await getPageMacros(context.contentId));
  if (pageMacrosObjects.length == 0) { doSomething(); }
  if (!isOpen) {
    return null;
  }
  return (
    <ModalDialog header="Macros" width="medium" onClose={() => setOpen(false)}>
      <Text>There {pageMacrosObjects.length == 1 ? `is ${pageMacrosObjects.length} macro` : `are ${pageMacrosObjects.length} macros`} on this page</Text>
     </ModalDialog>
  );
};

export const run = render(
  <ContentAction><App/></ContentAction>
);

```

The thing is, everything works fine as long as I leave out the the following part:  
`if (pageMacrosObjects.length == 0) { doSomething(); }`

But if I leave it in, I’m getting the following error:

```auto
ERROR bb93749ce9e03089 dispatch must be called inside of an event handler or within the function arguments of useAction, useState or useContentProperty
Error: dispatch must be called inside of an event handler or within the function arguments of useAction, useState or useContentProperty
    at ReconcilerState.enqueueSideEffectIfEnabled (webpack://confluence-content-action-ui-kit/node_modules/@forge/ui/out/reconcilerState.js:67)
    at /tmp/tunnel7KDuu9yhIhcf7/index.js:3202:39
    at Object.App [as type] (webpack://confluence-content-action-ui-kit/src/index.jsx:114)
    at /tmp/tunnel7KDuu9yhIhcf7/index.js:3562:36
    at async asyncMap (webpack://confluence-content-action-ui-kit/node_modules/@forge/ui/out/reconcile.js:13)
    at async /tmp/tunnel7KDuu9yhIhcf7/index.js:3518:29
    at async /tmp/tunnel7KDuu9yhIhcf7/index.js:2912:31

```

This error only shows up when the `getPageMacros` returns an empty array `[]`, if macros are found, there is no problem and everything still works fine.

**So my questions are:**

- Why can I use the `pageMacrosObjects.length` without problems in the return statement of the `App`, even if there are no macros found, but not before the return statement?
- Why is it giving this error and how do I fix this? I would like to validate the `getPageMacros` return value before the return statement in App.

Some help/insight is really appreciated 😃 Thanks in advance!

Rick

---

<div class="post-metadata">

**Author:** ![ryan](https://avatars.discourse-cdn.com/v4/letter/r/a8b319/32.png) [@ryan](https://community.developer.atlassian.com/u/ryan)\
**Post date:** [March 14, 2023, 3:53pm UTC](https://community.developer.atlassian.com/t/error-dispatch-must-be-called-inside-of-an-event-handler-or-within-the-function-arguments-of-useaction-usestate-or-usecontentproperty/67350/2 "2023-03-14T15:53:44Z")

</div>

Have you tried setting `doSomething` to a function that does nothing? `const doSomething= ()=>{}` If you do that and you don’t get the error, you know whatever is happening inside `doSomething` is your problem. From your description, it sounds like that is the problem. It’s the only difference in the code path in the failure scenario in your description.

---

<div class="post-metadata">

**Author:** ![rick.van.twillert](https://avatars.discourse-cdn.com/v4/letter/r/7993a0/32.png) [@rick.van.twillert](https://community.developer.atlassian.com/u/rick.van.twillert)\
**Post date:** [March 14, 2023, 8:55pm UTC](https://community.developer.atlassian.com/t/error-dispatch-must-be-called-inside-of-an-event-handler-or-within-the-function-arguments-of-useaction-usestate-or-usecontentproperty/67350/3 "2023-03-14T20:55:01Z")

</div>

@ryan That actually helped me fix the issue I was having, thank you very much!

Strange thing is though, that the `doSomething()` function should be pretty straightforward functionality:

```auto
const [feedbackMessage, setFeedbackMessage] = useState(undefined);

  if (!pageMacrosObjects.length) {
    setFeedbackMessage("There were no macros found on this page");
  }

```

so, `setFeedbackMessage()` is throwing the error above, which i still don’t understand but I was able to workaround it.

---

<div class="post-metadata">

**Author:** ![ryan](https://avatars.discourse-cdn.com/v4/letter/r/a8b319/32.png) [@ryan](https://community.developer.atlassian.com/u/ryan)\
**Post date:** [March 14, 2023, 9:26pm UTC](https://community.developer.atlassian.com/t/error-dispatch-must-be-called-inside-of-an-event-handler-or-within-the-function-arguments-of-useaction-usestate-or-usecontentproperty/67350/4 "2023-03-14T21:26:30Z")

</div>

Conceptually, I see what you are doing wrong. If there are no macros on the page, you are basically mutating the React state in an infinite loop.

When the state is changed, React will try to re-render the component and therefore call your setFeedbackMessage again and therefore try to re-render the component and keep repeating that cycle. You would probably get an error with normal client-side React as well.