0

I have a react code where I am facing an issue which is related to nested components in the react.

code

The issue is that I have a parent component named testing which contains two children component named Component1 and Component2, Inside the Component2 there sub children present named Component 3.

Now in Component1 I am performing an api call which is fetching the a list of products and that data is saved inside a useState present inside the testing parent component and the value of that useState is passed as prop in Component2 and from that to component3.

Here in Component3 I have useState that is stored a flag now when again I hit the api and the data is changed from that api call response, then the flag present inside the Component3 is not resetting as the components are not re-rendering, and just the data is getting change.

You can also use this codesandbox link to know more about the issue.

My question here is that when the useState present inside the parent component (testing) is updated then the nested component should also be re-rendered. But the component3 is not re-rendering.

Please explain the full logic behind this in terms of VDom and RDom as well as how props are passed and executed when states are changed.

Improve this question
2
  • Could you please make the sandbox public? I am experiencing difficulty accessing it. If not, can you add code here Commented Feb 28, 2024 at 5:50
  • Your codesandbox link is not working, Please update it accordingly. Commented Feb 28, 2024 at 5:59

2 Answers 2

Reset to default
1

enter image description here

I think there is no issue in your provided code. The component 3 re-render as normal after every time Component 1 fetch data. Maybe the hot reload get issue. Make sure reload the whole page to check.

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

3 Comments

So you think that component 3 is re-rendering every time then why is the useState not going back to its default value for component 3 (flag). And can you explain more about hot reload?
State is component memory. It remembers value after re-render. And that why we use state right? The default value assign to state in "Mount" stage, or at the first time component created. Then after re-rendering, state doesn't change (Unless the re-rendering caused by updating that state). So, in your case, the Component 3 re-render because the props changed, not state. Then the state keeps its last value, not default value.
This example from react docs show that you can update showMore state, the component re-render and the index state still keep it value.
0

It is recommended that the "flag" not be contained within Component3. Ideally, after data retrieval, the flag should be incorporated within the products array for each object. Subsequently, this flag should be transmitted to Component3 to ensure its reset with every iteration.

Improve this answer

2 Comments

I agree that the method that you suggesting will definite work but I am more curious above working of react and what to know in depth that why this case is not working. Can you explain more of this?
Since you've randomised limit and most likely first 2 rows will never change. So no change in component3 at all (VDOM was still same before and after render). So component don't re-render. If you modify some end rows, you'll see it resetting

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.