Lightning Component Getting Fired Twice When Opening via Workspace API

Question

I have a list of items in one component where once you click on a given item it should open another subtab with a second component. For some reason the new subtab opens and the component getting fired twice. At the second time the attributes not getting set as well. However in a second click onward it opens the subtab perfectly without firing twice. Any help is appreciated.

First component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,lightning:isUrlAddressable,force:hasSObjectName" 
                access="global">

    <lightning:workspaceAPI aura:id="workspace"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <aura:attribute name="sObjectName" type="String" />       
    <aura:attribute name="searchResult" type="List" description="use for store and display account list return from server"/>

    <lightning:card>

        <div class="slds-m-around_large">                   
            <table class="slds-table slds-table_bordered slds-table_cell-buffer">
                <thead>
                    <tr class="slds-text-title_caps">
                        <th scope="col">
                            <div class="slds-truncate" title="MemId">Id</div>
                        </th>
                        <th scope="col">
                            <div class="slds-truncate" title="MemName">Name</div>
                        </th>
                        <th scope="col">
                            <div class="slds-truncate" title="EffDate">Start Date</div>
                        </th>
                        <th scope="col">
                            <div class="slds-truncate" title="TermDate">End Date</div>
                        </th>

                    </tr>
                </thead>
                <tbody> 
                    <aura:iteration items="{!v.searchResult}" var="res" indexVar="count">
                        <tr>
                            <td>
                                <div class="bodyText dataSpace">
                                    <a href="#" class="" onclick="{!c.openTabFake}">{!res.Id}</a>
                                </div>
                            </td>
                            <td>
                                <div class="slds-truncate">{!res.Name}</div>
                            </td>
                            <td>
                                <div class="slds-truncate">{!res.StartDate}</div>
                            </td>
                            <td>
                                <div class="slds-truncate">{!res.EndDate}</div>
                            </td>                                                                        
                        </tr>
                    </aura:iteration>
                </tbody>
            </table>
        </div>
    </lightning:card>

</aura:component>

First component controller

openTabFake : function(component, event, helper){

    var workspaceAPI = component.find("workspace");
    workspaceAPI.getFocusedTabInfo().then(function(response) {            
        focusedTabId = response.tabId;       
    });     
    workspaceAPI.openSubtab({
        parentTabId: focusedTabId,
        pageReference: {
            "type": "standard__component",
            "attributes": {
                "componentName": "c__SecondComponent"
            },
            "state": {
                "attr1" : "test1",
                "attr2" : "test2",
                "attr3" : "test3"
            }
        },
        focus: true     
    }).then((response) => {
        workspaceAPI.setTabLabel({
            tabId: response,
            label: "Second component"
        });
    }).catch(function(error) {
        console.log('err : ', error);
    });

},

Second Component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,lightning:isUrlAddressable" 
                access="global" >

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <!-- component code -->
</aura:component>

In the second component controller doInit I've set some console.log statement and observed the component getting fired twice. e.g. component.set("v.attr1", attr1); which is in the doIniti is printed twice; first one is having the value for attr1 but in the second print it doesn't have the value as well.

Answer 1

If anyone ever needs it, change the state to

"state": {
             "c__attr1" : "test1",
             "c__attr2" : "test2",
             "c__attr3" : "test3"
         }

and take it out in the second component as

var attr1 = pageRef.state.c__attr1;
var attr2 = pageRef.state.c__attr2;
var attr3 = pageRef.state.c__attr3;

Make sure not to miss an underscore in any attribute or else it will render twice.