We have a hook (service) for our component, which have an init() and a shutdown() function (for some reason). The init() should be called at least once to initiate (starts a heart-beat operations), and the shutdown() to stop the heart-beat.

export default function EditProductForm({formToBeModify}: IEditProductClientFormProps): ReactNode {
  const service = useEditProductService();

  useEffect(() => {
    service.init();
    return () => service.shutdown();
  }, []);

 return {
   <div ...>
 }
)

This useEffect() is goot enough to do so, because its dependency is [] which means that the init() is called at component did mount and the shutdown() is called at component will unmount.

It is adviced to insert logic into component (.tsx) file, but everything should go into service code. In this case the service will look somehow like this:

export default function useEditProductService() {

   function init() { 
      ...
   }

   function shutdown() {
      ...
   }

   useEffect(() => {
        init();
        return () => shutdown();
      }, []);

  return {
     init,
     shutdown
  }
}

It is not clear for me, as the component several times re-render itself, and every time the service is called throught const service = useEditProductService(formToBeModify) that does it works the same as the useEffect() remains there, inside the component?

I think if it is outside the service, in the component itself, it works as I described above, the init() and shutdown() is called once. If it is inside the service it is called several times during the component lifetime. What do you think?