I have a child lwc which receives an array as a public property (@api inputArray), does some work on it, and then returns another array via events to the parent.

When the input array is changed by the parent, I want the code to run and the event to be sent. Currently, I have a for:each within the lwc.html that runs through the array (but displays nothing), then when the inputArray is changed, the lwc is re-rendered and I can use the renderedCallback to send my event.

But it seems kind of awkward to have a for:each loop doing nothing in order to trigger the re-render and run this code.

What is the good and convenient way of recognising and handling change in a lwc public property? Or is what I'm doing already the best?

(For the sake of simplicity below, I've left out the code that is altering the array and just returning a string)


import { LightningElement, api } from 'lwc';

export default class FilterLWC extends LightningElement {
    @api inputArray;

        this.dispatchEvent(new CustomEvent('childEvent', {detail: {newList: "woooo" }}));


        <template for:each={inputArray} for:item="arrayElement">
            <p key={arrayElement}>

1 Answer 1


The appropriate way to deal with this is to make the API property a getter/setter pair...

@api get inputArray() {
    return this._inputArray;

set inputArray(value) {
    this._inputArray = value;


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .