How eventsRef.current.emit ensures that code is not run during rendering?

[AjaxSolutions]

Normally, we would wrap onSuccess in useEffect. This a React requirement.

https://reactjs.org/docs/hooks-reference.html

"Mutations, subscriptions, timers, logging, and other side effects are not allowed inside the main body of a function component (referred to as React’s render phase). Doing so will lead to confusing bugs and inconsistencies in the UI.

Instead, use useEffect. The function passed to useEffect will run after the render is committed to the screen. Think of effects as an escape hatch from React’s purely functional world into the imperative world."

My question is how eventsRef.current.emit ensures that code is not run during rendering?

[AjaxSolutions]

Let me modify my question. onSuccess can can cause a side effect and I don't see that this code is run inside a useEffect as required by React. Is this a problem?

[sergiodxa]

The onSuccess callback is only executed by revalidate, which is called inside this effect https://github.com/vercel/swr/blob/master/src/use-swr.ts#L408 and inside the mutate function, for the mutate function is not a problem because you usually run that function inside an effect or an event handler.