0

Consider I am showing read-only data in the table format.

For example, I have three components

  1. dataservice - To store the data, which is used to share across the components
  2. parentContainer - Contains child component and some logic to set the data returned from server to dataservice.js
  3. child - To get the stored data

dataservice.js -

const dataService = {
    data: [],
    setData(records){
        this.data = [...records]
    }
}

export { dataService };

parentContainer.html

<template>
    <!--Button to render the child-->
    <lightning-button variant="brand" label="Enable" title="Save" onclick={renderChild} class="slds-m-left_x-small">
    </lightning-button>
    <!--Child component -->
    <c-child if:true={isRenderChild} ></c-child>
</template>

parentContainer.js

import { LightningElement } from 'lwc';
import { dataService } from 'c/dataService';

export default class ParentContainer extends LightningElement {
    isRenderChild = false;
    connectedCallback() {
        let mockData = ['Run','Stop','Go'];
        dataService.setData(mockData);//setting the mock data here
    }

    renderChild() {
        this.isRenderChild = !this.isRenderChild;
    }

}

child.js

import { LightningElement, api } from 'lwc';
import { dataService } from 'c/dataService';

export default class Child extends LightningElement {
    connectedCallback(){
        console.log(dataService.data);// get data in child component
    }
}

I have able to access the data in the child component that is set by the parent using dataservice.

Let's consider the same scenario, data passed from parent component to child using @api public property.

  1. What is the best way of passing the data that I need to render the read-only screen?(The value of a public property used in a template, not changes)

  2. Any disadvantages of sharing the data using common data service js?

When I read this from the developer guide I confused https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.security_array_proxy

Do we use the dataService method for this problem?

When you pass an array to a child component, Lightning Locker wraps the array in a proxy. If it has a nested child it causes a performance issue

0

I'll answer the easier question first.

There are no performance disadvantages as far as I'm aware to using data service.js, but this approach is usually not used in parent-child case for the 2 main reasons.

  1. It does reduce the readability of the HTML, because you can't see where properties are used in rendering.
  2. You have other options better designed for it (i.e. you have @api + properties/methods)

And now to answer your main question. I would suggest to use @api with setter/getter, for example like this:

parentContainer.js

import { LightningElement } from 'lwc';

export default class ParentContainer extends LightningElement {
    isRenderChild = false;
    data;
    connectedCallback() {
        let mockData = ['Run','Stop','Go'];
        this.data = mockData;
    }

    renderChild() {
        this.isRenderChild = !this.isRenderChild;
    }

}

parentContainer.html

<template>
    <!--Button to render the child-->
    <lightning-button variant="brand" label="Enable" title="Save" onclick={renderChild} class="slds-m-left_x-small">
    </lightning-button>
    <!--Child component -->
    <c-child if:true={isRenderChild} data={data}></c-child>
</template>

child

import { LightningElement, api } from 'lwc';

export default class Child extends LightningElement {
    isDataInitialized = false;
    readOnlyData;

    @api set data(value) {
      if (!this.isDataInitialized) {
        this.isDataInitialized = true;

        this.readOnlyData = value;
      } else {
        // you can handle additional logic here
      }

    }
}

This way you don't need additional service for passing data. If you only described part of the question and you still think that you need some sort of service, then I would suggest using MessagingService, because it would allow you to better pass data between components and get updates about data update

SIDE NOTE:

I have a use case where data service might be useful though.

If you want to store the full response from the server and use it across multiple components that are not necessary connected by an HTML tree, then I think it's a good idea.

Regarding documentation: It basically says huge arrays more than one component down the tree (because the security "thing" that Salesforce uses in LWC is not optimized for it yet), otherwise you should be fine.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.