componentDidUpdate not working in react native when i change the reference of its prop

Question

this is the part of my parent component where i call my child component <AttachmentField>

                    configurableField.attachments.map((item, i) => {
                        if (item.type.includes("pdf")) {
                            const url = item.url.substring(item.url.indexOf(".com") + 4, item.url.indexOf(".pdf") + 4)
                            this.documentOrganizerService.getFile(url)
                                .then(async (res) => {
                                    if (res.data.success) {
                                        const buffer = Buffer.from(res.data.data.Body.data).toString('base64')
                                        let uri = FileSystem.cacheDirectory + i.toString() + '.pdf'
                                        await FileSystem.writeAsStringAsync(uri, buffer, { encoding: "base64" })
                                        item.uri = uri
                                        configurableField = {...configurableField}


                                    }
                                })
                        }
                    })
                    return (
                        <AttachmentField
                            attachments={configurableField.attachments}
                        />
                    );
                }

and here is the part of my child component

componentDidUpdate(prevProps: Readonly<IFormControlProps>, prevState: Readonly<IAttachmentState>): void {
        console.log("check1", prevProps.attachments, this.props.attachments)
    }

this componentDidUpdate is never being called why is that . But the field uri in configurableField.attachments gets updated (how i know this is because the <AttachmentField> has another child where i forward this props and inside this i have componentDidMount function where the change is visible) .

what my usecase is i want to notice the change in my props of <AttachmentField> component and make changes accordingly there

Answer 1

The function componentDidUpdate only runs when a state is updated. If your configurableField isn't a state or if it's not being updated with setState then the componentDidUpdate is not going to run.

To test this you can make a small state like a counter. Update it in componentDidMount and pass to your child and see if the componentDidUpdate runs. If it does then either make configurableField a state if it isn't or update it correctly.