A Simple Way to Get Child State in the Parent Component Without Unnecessary Renders

See how the parent component renders when the child changes his state. Observe the counter on the text inputs.

The solution to the rescue:

How to do it with a different approach?

The “childStateRef” is passed via props to “CHILD” and used on getChildState function to get the state of “CHILD” on a button click event.
The reference (_ref) on the “CHILD” received from the “PARENT” through React.fordwardRef() and the useImperativeHandle() Hook to allow get the state from the “PARENT”.
Applying the third solution. Note that the “PARENT” doesn’t render when the “CHILD” changes its state. Observe the counter on the text inputs

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adrian Fernandez

Adrian Fernandez

I'm a Full Stack Web Developer with 10 years of experience. I have dedicated my live to web and mobile experiences.