Thought this was going to be simple problem to solve but wasted a day on it so far & no closer.

I have one LWC component, call it lwcParent, which needs to get an item of data e.g. the current user Id from an apex call.  It then passes this to a second LWC component, call it lwcChild, for that component to act upon.  I can pass the data but I need lwcChild to be aware of the passed data in its ConnectedCallback or at least recognise that the new data has been supplied so it can do something to it.

I have a pair of dummy LWC components to demonstrate:-

lwcChild

<template>
    <lightning-input label="User Id" type="text" value={userId}></lightning-input>
</template>

 

import { LightningElement, api } from 'lwc';

export default class LwcChild extends LightningElement {
    @api userId;
    connectedCallback(){
        console.log('starting lwcChild.connectedCallback');
        console.log('lwcChild userId: ' + this.userId);
        console.log('completed lwcChild.connectedCallback');
    }
}

 

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
</LightningComponentBundle>

lwcParent
html

<template>
    <article class="slds-card">
        <div data-id="mainDiv" class="slds-card-wrapper">  
            <h1>Parent</h1>
            <c-lwc-child user-id={userId}></c-lwc-child>
        </div>
    </article>
</template>

import { LightningElement, track } from 'lwc';
import getLoggedInUserId from '@salesforce/apex/LightningCommonUtilities.getLoggedInUserId';

export default class LwcParent extends LightningElement {

    @track userId;

    connectedCallback() {
        console.log('starting lwcParent.connectedCallback');
        getLoggedInUserId()
        .then(result => {
            this.userId = result;
            console.log('lwcParent userId: ' + this.userId);
        })
        .catch(error => {
            window.console.log('error (connectedCallback.getLoggedInUserId) =====> '+JSON.stringify(error));
            if(error) {
                window.console.log('@@@@ ERROR '+ error);
            }
        })
        console.log('completed lwcParent.connectedCallback');
    }

}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" >
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Contact</object>
            </objects> 
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Apex code :-

public with sharing class LightningCommonUtilities{    
    @AuraEnabled(cacheable=true)
    public static string getLoggedInUserId(){
        system.debug('AAb:' + UserInfo.getUserId());
        return UserInfo.getUserId();
    }
}

If I look at the console after it runs I can see :-

lwcParent.js:1 starting lwcParent.connectedCallback
lwcParent.js:1 completed lwcParent.connectedCallback
lwcChild.js:1 starting lwcChild.connectedCallback
lwcChild.js:1 lwcChild userId: undefined
lwcChild.js:1 completed lwcChild.connectedCallback
lwcParent.js:1 lwcParent userId: 00558000001MvGNAA0

So lwcParent isn't getting the userId until after the lwcChild's connectedCallback has completed.  I've also tried this using a wire rather than calling the apex method from connectedCallback but the end result is the same.

Is there a way to either delay the instantiation of lwcChild until lwcParent has loaded the data or for lwcChild to be made aware that the data has changed so that it can call one of its functions?

As always any help appreciated.