Custom component code running three times on same GUID?

  • 1
  • Problem
  • Updated 2 years ago
  • In Progress
We've built an extensive signature component based on Peter's jSignature work.
I have a strange case where the custom component code is starting three times for the same component.

I included a console.log() at the beginning of the code like this:
skuid.componentType.register('ccoptimize__signature',function (element,xmlDef,component){
        console.log('BEGIN SIGNATURE COMPONENT ID: ' + component._GUID);
// ... lots of stuff here.
});

And in the console I see this:



As you can see, the component attempting to register itself three times is causing a few problems.

Any ideas on what might be causing this?

The structure of the page looks like this:

Top Level Page (Child of a Master Header Nav Page)
   Tabset
      Tab
         Page Include (lazy load)
           Wizard
               First Wizard Page
                  Page Include (not lazy loaded)
                     Custom Signature Component
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb

Posted 2 years ago

  • 1
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Hey Matt -

What's happening here is that the component is "rendering" multiple times, not registering.  On the line of code skuid.componentType.register('name', function() {}), the "function" is being called 3 times.  This function is the equivalent of the "render" function on stock skuid components.  The "register" only gets called once, but the "render" will be called in all types of situations (e.g. model data changes, conditional rendering (including of it's parent), etc.

When writing custom components, depending on what you are doing inside of it, it is important to make sure that the "render" function is written to handle multiple invocations.  Unfortunately, there really isn't any documentation on this.  More specifically, there isn't any documentation on the fact that you should override component.unregister and component.unrender so that you get notified when your custom component is "unrendered" so that you can clean-up any resources you registered, state, etc.

Short story is that having render called multiple times is going to happen.  If the code in auto_runtme.js is throwing exceptions because it's getting called multiple times, then there is definitely a bug in that code.

That said, in your particular case, it's hard to say without more information if what you are experiencing with multiple renders is expected behavior or a potential bug.  If you can put together a sample page using the same structure but with stock objects, I'd be happy to throw it in to my DE org to determine expected/bug.