Zendesk:where to put an .on('ticket.updated' in a react app in zendesk

Question

currently i have this code placing the on ticket updated function inside the use effect. the problem is that whenever i change the value of the use effect hook it seems to trigger the on(ticket.updated) eg i change the form value 3 times the function inside on(ticket.updated) is also called 3 times

now i tried to call the function outside of a use effect but it causes significantly more errors this way with null values.

so i would like to know where the correct place to put the call inside a react Zendesk application

  React.useEffect(async () => {

    console.log("FORM VALUE WAS CHANGED", formValue);
    zafClient.on('ticket.updated', function (e) {
  console.log("executed", formValue);
    }



  }, [formValue])

this is the code i am using checking the current formValue from inside the app executed is being called as many times as the form value has been changed

Answer 1

Have you considered using useRef()?

useRef() can be employed to create a new instance of zafClient and maintain the object's state across multiple render cycles.

You might want to give it a try:

const zafClientRef = useRef();

useEffect(() => {
 zafClientRef.current = zafClient;

 zafClientRef.current.on('ticket.updated', function (e) {
   console.log("executed", formValue);
 });

}, []);