Component re-render issue [Snippet Attached]

Question

I am making a resume builder application and the whole structure was almost done.

Complete working codesandbox:

Here I have made compo

Answer 1

This is a great question. This is basically a design approach issue: For a scenario like yours, you need to design your component this way:

let's analyze the picture:

MAIN COMPONENT:

This is the component that should hold the state for the entire form-filling process. STE1-4 Are just views that allows you to input data that must all be updated in the main component. So This means, you must have state in main component and pass the state properties and props, including their update/setter methods.

STEP COMPONENT This applies for all Step Components. These components should do nothing except display the form step using state values received via props and update state by using setter methods, which are also received via props.

---

Conclusion:

Put your state in your main component, each step component should only display the form and update the main state. This means that by the time each step component is re-rendered, it will receive values updated in the main component. And you will achieve that via props.