# useEffect hook causes a "Panel Plugin edits must be initiated from a supported UI event" error

**URL:** <https://forums.creativeclouddeveloper.com/t/useeffect-hook-causes-a-panel-plugin-edits-must-be-initiated-from-a-supported-ui-event-error/2720>\
**Category:** UXP Plugin API\
**Tags:** react\
**Created:** [March 28, 2021, 11:53am UTC](https://forums.creativeclouddeveloper.com/t/useeffect-hook-causes-a-panel-plugin-edits-must-be-initiated-from-a-supported-ui-event-error/2720 "2021-03-28T11:53:04Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![aviral](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/aviral/32/1215_2.png) [@aviral](https://forums.creativeclouddeveloper.com/u/aviral)\
**Post date:** [March 28, 2021, 11:53am UTC](https://forums.creativeclouddeveloper.com/t/useeffect-hook-causes-a-panel-plugin-edits-must-be-initiated-from-a-supported-ui-event-error/2720/1 "2021-03-28T11:53:04Z")

</div>

I am trying to port a react XD plugin ([UI Panel Hello React](https://github.com/AdobeXD/plugin-samples/tree/master/ui-panel-hello-react)) to use functional react components. In the process, to achieve the same functionality as the setState callback function, I replaced it with a useEffect hook with that particular state as a dependency for useEffect.

This is the particular piece of code that needs changing.  
`color` is a piece of state.

```
    colorChanged(color) {
    this.setState({
        color: {
            r: color.r,
            g: color.g,
            b: color.b,
            a: color.a
        },
    }, () => {
        const { r, g, b, a } = this.state.color;
        const { editDocument } = require("application");
        const { selection, Color } = require("scenegraph");
        editDocument({editLabel: "Change Colors"}, () => selection.items.forEach(item => item.fill = new Color(`rgba(${r}, ${g}, ${b}, ${a})`)));
    }
    );
}

```

**Rewritten with hooks:** color has been specified as a dependency for useEffect and a variable `initialRender` is used to prevent firing this on the initial component mount.

```
    const colorChanged = (color) => {
    setcolor({r: color.r, g: color.g, b: color.b, a: color.a});
}

useEffect(() => {
    const { r, g, b, a} = color;
    const { editDocument } = require("application");
    const { selection, Color } = require("scenegraph");
    if (initialRender) {
        editDocument({editLabel: "Change Colors"}, () => selection.items.forEach(item => item.fill = new Color(`rgba(${r}, ${g}, ${b}, ${a})`)));
    }
    initialRender = true;
}, [color]);

```

Error:

```
Plugin Error: Panel plugin edits must be initiated from a supported UI event
```

---

<div class="post-metadata">

**Author:** ![kerrishotts](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/kerrishotts/32/8_2.png) [@kerrishotts](https://forums.creativeclouddeveloper.com/u/kerrishotts)\
**Post date:** [March 29, 2021, 1:13pm UTC](https://forums.creativeclouddeveloper.com/t/useeffect-hook-causes-a-panel-plugin-edits-must-be-initiated-from-a-supported-ui-event-error/2720/2 "2021-03-29T13:13:29Z")

</div>

@DavidXD Have we had any internal teams have success working with `useEffect` in this manner?

---

<div class="post-metadata">

**Author:** ![cpryland](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/cpryland/32/1172_2.png) [@cpryland](https://forums.creativeclouddeveloper.com/u/cpryland)\
**Post date:** [May 6, 2021, 6:39pm UTC](https://forums.creativeclouddeveloper.com/t/useeffect-hook-causes-a-panel-plugin-edits-must-be-initiated-from-a-supported-ui-event-error/2720/3 "2021-05-06T18:39:19Z")

</div>

Isn’t it that you need to be a direct-call descendant of a user-initiated UI action?