getFieldValue loading data is very slow

Question

I have a LWC user information form is embedded in Visual force page

Using getFieldValue, retrieving the data and displaying in UI. When i add the below code in html file browser got hanged and display the data slowly(means taking 45 sec to display the data).

<div  class="slds-section slds-is-open">
    <lightning-vertical-navigation-item label={fatherName} name="fatherValue">
    </lightning-vertical-navigation-item>
</div>

I removed the code and tried it's loading fast.

Also, one more help, in HTML lightning-record-edit-form record-id="a082w000000YUXxxx" is hardcoded, how to fetch the value in JS file.

HTML

<template>
<lightning-record-edit-form record-id="a082w000000YUXxxx" object-api-name="Enrollment__c" onload={handleonLoad}>

<div  class="slds-section slds-is-open">
                                <lightning-vertical-navigation-item label={fatherName} name="fatherValue">
                                </lightning-vertical-navigation-item>
                            </div>

</lightning-record-edit-form>
 </template>

JS:

import { LightningElement, track, api, wire } from "lwc"; 
import { getRecord, getFieldValue } from "lightning/uiRecordApi";

import FATHER_NAME from "@salesforce/schema/Enrollment__c.Father_First_Name__c";
const fields = [FATHER_NAME];

export default class Enrollment_2 extends LightningElement {
@track enrollmentId;
@track fatherName;
@api recordId;

@track familyName = [
{ fieldAPI: "Enrollment_Type__c", required: true },
{ fieldAPI: "Family_Name__c", required: true },
{ fieldAPI: "Home_Phone__c", required: true }
];

@wire(getRecord, { recordId: "a082w000000YUXxxx", fields })
Enrollment;

handleonLoad() {
this.fatherName = getFieldValue(this.Enrollment.data, FATHER_NAME);
 this.fatherName = "Father - " + this.fatherName;  
  }
}

Answer 1

Before diving into my answer, I'd like to point out that getFieldValue isn't loading data so that's not the thing that slows you down. It's just a simple conveniency method that reads a JS object's sub property that matches a particular field name (no network involved, just a tree traversal).

Now, there are several problems with your implementation:

1. it's loading twice the same record: once with lightning-record-edit-form and twice with the @wire call.
2. as you pointed out, your record Id is hardcoded. You should use the value of @api recordId like this: <lightning-record-edit-form record-id={recordId}
3. The handleLoad function shouldn't rely on data coming from this.Enrollment because it's tied to the request originating from lightning-record-edit-form (see point #1). Both request are asynchronous so there's no guarantee that one loads before the other.

Here's what I suggest:

1. load data only once with lightning-record-edit-form since you need to have a form and get rid of your @wire.
2. if you also need to access record fields outside of the form, use the form's onload event handler to extract those field values:

handleRecordEditFormLoad(event) {
  const record = event.detail.records[this.recordId];
  this.fatherName = getFieldValue(record, FATHER_NAME));
}