Many of our components use the hidden fields to maintain their state. To render those hidden fields our component renderer uses a utility method on the "FormRenderer.addHiddenField", which adds those fields directly to the "form" element.


According to our DOMDiff strategy, it doesn't seem right to me. It causes entire form to being sent on the DOMDiff operation, when component gets render/unrender on the document.

Solution:

I can think of the following two possible options:
1- change the renderers of the component to add the hidden fields as thier own childs instead of adding it to the form element.
Challenge:
   Number of renderes needs to be modified.


Or


2-The FormRenderer should always be creating a "div" element for the "hidden" fields and then add all hidden fields to that div. So rendering of any new component will send only "div" of the hidden field and the html chunk of the component to be rendered.



The following snippet shows why we get the form level update:
----------------------------------------------------------------
//The following snippet is a initial page for both scenarios.
<form>
    <an-element/>
    <an-element/>
    <panelTabSet>
        <panelTab>
           <a-panelGroup id="pnlGrp">
        	 <child component/>
    	   </a-panelGroup>
        </panelTab>
    </panelTabSet>
</form>


----------------------------------------------------------------
//Scenario One: a new child rendered with no hidden fields, so update will be the component level
<form>
    <an-element/>
    <an-element/>
    <panelTabSet>
        <panelTab>
           <a-panelGroup id="pnlGrp">
        	 <child-component/>
    		 <a-new-component-rendered-with-no-hidden-fields-to-the-form id="childComp"/>        	 
    	   </a-panelGroup>
        </panelTab>
    </panelTabSet>
</form>

The DOMDiff for above snippet would be: 
<a-panelGroup id="pnlGrp">
   <child-component/>
   <a-new-component-rendered-with-no-hidden-fields-to-the-form id="childComp"/>        	 
</a-panelGroup>
    	   

-------------------------------------------------------------------
//Scenario Two: a new child rendered with a hidden field to the form, so the update will be form level    	   
<form>
    <an-element/>
    <an-element/>
    <panelTabSet>
        <panelTab>
           <a-panelGroup id="pnlGrp">
        	 <child-component/>
    		 //new component
    		 <a-new-component-rendered-with-hidden-fields-to-the-form/>        	 
    	   </a-panelGroup>
        </panelTab>
    </panelTabSet>
    
    //hidden field added by the component to the form element
    <a-new-hidden-field/>
</form>


The DOMDiff for above snippet would be: 
<form>
    <an-element/>
    <an-element/>
    <panelTabSet>
        <panelTab>
           <a-panelGroup id="pnlGrp">
        	 <child-component/>
    		 <a-new-component-rendered-with-hidden-fields-to-the-form/>        	 
    	   </a-panelGroup>
        </panelTab>
    </panelTabSet>
    <a-new-hidden-field/>
</form>