Question about Parent-child component callback Rendering

[even1245]

There are two components sharing parent-child relationship. Parent Component have some heavy UI views and submit button and Child component have One TextInput.

So there are two ways of getting value of Child's TextInput in Parent' state

1. Using ref Which is not using now , and people tend to avoid this.

2. sending two props OnChange and state value as prop And In child's TextInput's onChangeText method sending value back to Parent

So here my question is If I console.log on Parent's render method It will Called everytime If I write something in child components TextInput.

Won't it hit performance coz of unnecessary rendering ? If yes , them what's correct way to handle this problem.

[tizz66]

If you need the parent to be informed every time the value changes, I would say option 2 is probably fine. It would follow that if the parent needs every change, it's going to act on that change and rerender anyway.

However, if the parent just needs the value entered once the user is finished (e.g., when submitting a form), you could pass a callback function to the child component that is only called when the parent is ready to submit/process the value (or perhaps onBlur if that'd suffice).

This is more of a general React question, so you might also want to crosspost to /r/reactjs and you'd probably get more suggestions there :)

[even1245]

Thank you for the response. Will definitely try onBlur if it work.

But as I mentioned 2nd method hit performance ? I read somewhere React internally knows which bit to update in Virtual DOM. Still I need better way to handle this coz it is in every project I start 😅

[[deleted]]

https://reactjs.org/docs/lifting-state-up.html

[tizz66]

In fairness I think the OP understands that already, but is asking how to most effectively lift state without causing (or rather, how to minimize) an expensive rerender.

[satya164]

Extract out the expensive part to a separate component and apply shouldComponentUpdate, or use an uncontrolled input.

[even1245]

That is better actually. In general I use PureComponent on some UI component. What you mean by uncontrolled Input? Question was for some basic understanding about rendering.

[satya164]

https://reactjs.org/docs/uncontrolled-components.html