I’m using React in my UI panel. Contemporary React uses hooks . The concept of the useEffect hook is that, actions like button clicks should set state the useEffect should process ‘side effects’ that you want to happen when it observes state changes. In my case, I have a UI panel with buttons that…

While I’m not entirely sure about this (if someone achieved this, I’ll happily stand corrected), I believe you’re right: There isn’t a clean way around it. In Panels, editDocument has to get called in the same tick as the user input event (or, in other words, as a direct result of an input event). …

As @pklaschka says, there’s no way around actually doing the editDocument() work in your actual event handler. But I think that’s a cleaner approach anyway, rather than doing it indirectly.

Thanks for confirming the React/XD question. Regarding the React question about useEffect, I haven’t profiled the performance differences myself so I’m not sure but I know that by adhering to the prescribed way allows you to. 1. have input events store state differences using the useState hook. 2. u…

Thank you for the confirmation.

That said, I have exactly the same need (to “debounce” some sliders before doing expensive document changes), so I may have to come up with some complex method for extending an async editDocument() process.

I gave up on debounce/throttle for this reason too. I’d be interested to find out if you come up with a way to do it. I was using a lodash/underscore implementation but I don’t think that is important.

It wouldn’t be too hard, given an async editDocument()-called function. It can just await a promise that only fulfills when some input “settles down.” Don’t know if I’ll get to it anytime soon, but I’ll certainly post here if I do.

[image] cpryland: It wouldn’t be too hard, given an async editDocument() -called function. It can just await a promise that only fulfills when some input “settles down.” Unfortunately, editDocument() locks the UI until resolved (cf. my comment at Debouncing input events in panels - #7 by pkla…

Interesting. In my experience, if I sleep or do I/O from an async editDocument()-called function, the UI is updated.

UI panel with React `useEffect` hook can't call `editDocument`

Adobe XD UXP Plugin API

pklaschka July 7, 2020, 9:53am 9

Unfortunately, editDocument() locks the UI until resolved (cf. my comment at Debouncing input events in panels - #7 by pklaschka)…

Topic		Replies	Views
useEffect hook causes a "Panel Plugin edits must be initiated from a supported UI event" error UXP Plugin API react	2	490	May 6, 2021
What is Panel plugin edits must be initiated from a supported UI event UXP Plugin API javascript	21	2878	October 13, 2019
Debouncing input events in panels UXP Plugin API ui , panel , api-feedback	9	1436	June 15, 2020
Add a new element from panel UXP Plugin API	7	852	October 22, 2019
Serious XD plugin cycle bug/design flaw UXP Plugin API api-feedback	3	451	July 1, 2020

UI panel with React `useEffect` hook can't call `editDocument`

Related topics