documentchange Figma event isn't fired

[Fwerydd]

Hello,

I'm trying to create a widget to know the last date of update of a component.
For this, I've create a new Widget using the Figma software:

And after, in my VSCode, I've copy the following code based on the https://github.com/figma/widget-samples/blob/main/WidgetDocumentChange/widget-src/code.tsx example.

const { widget } = figma
const { useSyncedState, AutoLayout, Text, useEffect } = widget

function Widget() {
  const currentDateDefaultValue = 'XX/XX/XXXX'
  const [currentDate, setCurrentDate] = useSyncedState('currentDate', currentDateDefaultValue);

  useEffect(() => {
    const onDocumentChange = (event: DocumentChangeEvent) => {
      setCurrentDate('TA/TA/TATA');
    };

    figma.on('documentchange', onDocumentChange);
    return () => {
      figma.off('documentchange', onDocumentChange);
    }
  });

  return (
    <AutoLayout>
      <Text fontSize={32} italic={true} width={375} horizontalAlignText={'left'}>
        Updated: {currentDate}
      </Text>
    </AutoLayout>
  )
}
widget.register(Widget);

But my onDocumentChange function is never called.

What I miss?

Regards,

[Bohdan-Anderson]

Hey did you figure this out, I'm having the same issue.

[Bohdan-Anderson]

This question was answered on the Figma Forms
https://forum.figma.com/t/cannot-listen-for-events-in-figjam-widget/35146/5
Basically the widget effect dismounts as soon as it's mounted unless it's waiting for something. We make it wait by using the https://www.figma.com/widget-docs/api/properties/widget-waitfortask/ wait for task function.

[JesperBellenbaum]

What am I missing:

const { widget } = figma;
const { Text, useEffect, waitForTask } = widget;

function EventHandlerExample() {
  useEffect(() => {
    const logSelection = (event) => {
      console.log('NEVER');
      console.log(figma.currentPage.selection);
    };

    console.log( figma.currentPage);

    figma.currentPage.on("nodechange", logSelection);
    return () => figma.currentPage.off("nodechange", logSelection);
  });

  useEffect(() => {
    waitForTask(
      new Promise((resolve) => {
        setTimeout(() => {
          resolve(true);
        }, 60000); // Some arbitrary long time
      })
    );
  });

  return <Text>Event handler example</Text>;
}

widget.register(EventHandlerExample);

I am still not able to listen to change events, did somebody solve that? @Bohdan-Anderson

Any help is greatly appreciated!

[JesperBellenbaum]

What am I missing:

const { widget } = figma;
const { Text, useEffect, waitForTask } = widget;

function EventHandlerExample() {
useEffect(() => {
const logSelection = (event) => {
console.log('NEVER');
console.log(figma.currentPage.selection);
};

console.log( figma.currentPage);

figma.currentPage.on("nodechange", logSelection);
return () => figma.currentPage.off("nodechange", logSelection);

});

useEffect(() => {
waitForTask(
new Promise((resolve) => {
setTimeout(() => {
resolve(true);
}, 60000); // Some arbitrary long time
})
);
});

return Event handler example;
}

widget.register(EventHandlerExample);
I am still not able to listen to change events, did somebody solve that? @Bohdan-Anderson

Any help is greatly appreciated!

FML spend way too much time on this. Restarting the Figma Tab solved it!

[Bohdan-Anderson]

I would also look at their docs, I believe there are easier ways to do this now.

…

On Sat., Mar. 8, 2025, 6:44 p.m. JesperBllnbm, ***@***.***> wrote: What am I missing: const { widget } = figma; const { Text, useEffect, waitForTask } = widget; function EventHandlerExample() { useEffect(() => { const logSelection = (event) => { console.log('NEVER'); console.log(figma.currentPage.selection); }; console.log( figma.currentPage); figma.currentPage.on("nodechange", logSelection); return () => figma.currentPage.off("nodechange", logSelection); }); useEffect(() => { waitForTask( new Promise((resolve) => { setTimeout(() => { resolve(true); }, 60000); // Some arbitrary long time }) ); }); return Event handler example; } widget.register(EventHandlerExample); I am still not able to listen to change events, did somebody solve that? @Bohdan-Anderson <https://github.com/Bohdan-Anderson> Any help is greatly appreciated! FML spend way too much time on this. Restarting the Figma Tab solved it! — Reply to this email directly, view it on GitHub <#24 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAOQZ5GFVKFPRXKHIAONCN32TN6F5AVCNFSM6AAAAABYTRRBKWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOMBYGU2DKMZUGE> . You are receiving this because you were mentioned.Message ID: ***@***.***> [image: JesperBllnbm]*JesperBllnbm* left a comment (figma/widget-samples#24) <#24 (comment)> What am I missing: const { widget } = figma; const { Text, useEffect, waitForTask } = widget; function EventHandlerExample() { useEffect(() => { const logSelection = (event) => { console.log('NEVER'); console.log(figma.currentPage.selection); }; console.log( figma.currentPage); figma.currentPage.on("nodechange", logSelection); return () => figma.currentPage.off("nodechange", logSelection); }); useEffect(() => { waitForTask( new Promise((resolve) => { setTimeout(() => { resolve(true); }, 60000); // Some arbitrary long time }) ); }); return Event handler example; } widget.register(EventHandlerExample); I am still not able to listen to change events, did somebody solve that? @Bohdan-Anderson <https://github.com/Bohdan-Anderson> Any help is greatly appreciated! FML spend way too much time on this. Restarting the Figma Tab solved it! — Reply to this email directly, view it on GitHub <#24 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAOQZ5GFVKFPRXKHIAONCN32TN6F5AVCNFSM6AAAAABYTRRBKWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOMBYGU2DKMZUGE> . You are receiving this because you were mentioned.Message ID: ***@***.***>