My components are getting re-renders even if my childComponent is being updated, following is the JSON I am getting from api
{
"data": {
"parent1": {
"id": 1,
"name": "xyz",
"age": "50",
"children": [
{
"id": 100,
"name": "pqr",
"age": "30",
"grandChildren": [
{
"id": 1000,
"name": "James",
"age": "2"
}
]
},
{
"id": 200,
"name": "sty",
"age": "10",
"grandChildren": [
{
"id": 2000,
"name": "Sam",
"age": "3"
}
]
}
]
}
}
}
I have normalized the above data to following with the help of normalizer npm
parentIds: [1]
parentDetails : {1: {name: xyz, age: 50, children: [100, 200]}}
parentDetails : {1: {name: xyz, age: 50, children: [100, 200]}}
childrenDetails: {100: {name: pqr, age: 30, grandChildren: [1000, 2000]}, 200: {....}}
grandChildrenDetails: {1000: {...}, 2000: {...}}
and this is stored in redux
And the UI is nested one after another in a list having a toggle
Parent 1
- children
- grandChildren
There are 4 components
- Base component
- Parent component
- Children component
- GrandChildren component
To render UI I am looping through "parentIds" & getting parentDetails of that parentId, and calling "Parent component",
In that I am passing "childrenDetails" and "grandChildrenDetails" and "parentObject", in "parentComponent"
I am looping through childrenIds and calling childrenComponent with "childrenObject" and "grandChildrenDetails"
The problem statement is when I am updating a row of grandChildren all of my parentComponent rows, childrenComponent row are getting re-rendered
Used memo for all the components but as you can see I am passing grandChildrenDetails to all the components and that is why it is getting re-rendered
Can anyone suggest what should I do to stop the re-renders