Child Component not rendering with change in props in svelte

Question

I have created a store in svelte like:

const initalStore: FileDetailsPayload  = {
        jobID: 0,
        jobName: "",
        lastUploadInfo: {
          status: "",
          rowDetails: [],
          uploadTableData: {
             columns: [],
             data: []
          }
};


function CreateStore() {
    const { subscribe, set, update } = writable(initalStore);

    return {
        subscribe,
        set: (fileDetailList) => set(fileDetailList),
    };
}

export const fileDetailStore = CreateStore();

Now I am calling an API to set the store value, and I have subscribed the store in my component A.

const unsubscribe = fileDetailStore.subscribe((value) => {
        fileDetailsData = {...value};
    });

I am using the fileDetailsData in a child component Table which I am calling from Component A.

<Table tableData={fileDetailsData.uploadTableData} />

Issue: Whenever I am setting the new data in the store the store is getting updated and can see the updated value of store inside component A, But the child component which is Table is not getting re-rendered when the prop is changing. So overall I want my child component to get re-rendered on any change in props

Solution The problem was in the child component Table, where the local variables were not made reactive to the props.

Earlier: Table Component

<script>
export let tableData: TableData = { columns: [], data: [] };

    let columnData = tableData.columns || [];
    let rowData = tableData.data || [];
    let rowDataCopy = rowData.slice();
</script>
<div>
// using columnData and rowDataCopy
</div>

Now: Table Component

<script>
    export let tableData: TableData = { columns: [], data: [] };
    
    $: columnData = tableData.columns || [];
    $: rowData = tableData.data || [];
    $: rowDataCopy = rowData.slice();
    </script>
    <div>
    // using columnData and rowDataCopy
    </div>

You generally don't need subscribe in components, just use $store to access the value. — brunnerh
– brunnerh, Commented Jun 30, 2023 at 11:59
Show the code of Table, it might not be using the property tableData correctly (losing reactivity). — brunnerh
– brunnerh, Commented Jun 30, 2023 at 12:02
This has been resolved, the issue was with the reactivity of the variables used in Child Component. Thanks for the hunch. — Muskan Rawal
– Muskan Rawal, Commented Jul 3, 2023 at 9:28
Please either add the code causing the issue to the question, post an answer explaining the problem & accept it, or delete the question. — brunnerh
– brunnerh, Commented Jul 3, 2023 at 9:33

Satyam Pathak · Accepted Answer · 2023-06-30 11:26:49Z

0

This is not problem with svelte, it's that reference for uploadTableData is not changing, understand when you are doing {...value} you are changing the root reference but not the inner reference.

You need to deep clone the whole object of filedetails -

Use structuredClone or hack it by stringifying and parsing

structuredClone

  const unsubscribe = fileDetailStore.subscribe((value) => {
        fileDetailsData = structuredClone(value);
    });

or

  const unsubscribe = fileDetailStore.subscribe((value) => {
                fileDetailsData = JSON.parse(JSON.stringify(value))
            });

answered Jun 30, 2023 at 11:26

Satyam Pathak

6,9603 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Muskan Rawal Over a year ago

I tried the above 2 suggestions but the issue still persist which is my child component <Table/> is not getting re-rendered and hence the table values are not changing. Earlier also, I was getting the updated store value in fileDetailsData . Any possible reason why <Table/> is not getting re-rendered when fileDetailsData is updating?

Collectives™ on Stack Overflow

Child Component not rendering with change in props in svelte

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related