Problem reading state from React child Components using child-parent callback register model

Question

I'm maintaining a legacy Class based React project and introducing functional components in as I go. One of the workarounds to try to avoid a total rewrite is to allow child components to communicate with parents via a 'registration' model where the child registers itself with the parent and the parent calls child functions.

My problem is that the child state seems to become inaccessible to the parent ( Calling the 'getChildValue()' function always returns the initial child state.)

I guess in a class based world, I'd just bind(this) to the function and it would work.

Can anyone help:

A pen illustrating the problem is here:

https://codepen.io/seven360/pen/NWaEjmW

Clicking the 'Inc Value In Child' increments the state, but the 'Get Value From Child' always returns 1 (the initial state)

const ChildElement = (props) =>
{
  const [ value, setValue ] = useState ( 1 ) ;

  const getValue = () =>
  {
    console.log ( "getValue Called");
    return value ;
  }
  
  useEffect(() => {
      
      props.register ( {
        getValue: getValue
      }) ;
      
    }, [] ) ;
   
  const incChildValue = () =>
  {
    setValue ((value) => value + 1);  
  }
 
  return 
    Child Component Value Currently = {value}
    
    
  
}

And this is the parent 'legacy' container:

class Container extends React.Component
{
  constructor ( props )
  {
    super(props) ; 
    
    this.register = this.register.bind(this) ;
    this.getChildValue = this.getChildValue.bind(this);
    
    this.childRef = React.createRef();  
  }
  
  register ( childFuncs )
  {
    console.log ( "Registered");
    console.log ( childFuncs );

    this.childRef.current = childFuncs ;
  }

  getChildValue ()
  {
    const childValue = this.childRef.current.getValue() ; 
    
    alert ( "This Should not be 1 - " + childValue );
  }
  
  render()
   {
    return (
      
        Container
        
        
      
    )
   }
}

user_16348802 · Answer

The issue is, on your Child component, useEffect has no dependencies, so the register function will only run on mount. You need to run every time the value is changed. So add the value as a dependency.

useEffect(() => {
  props.register({
    getValue: () => {return value;}
  });
}, [value]);

Problem reading state from React child Components using child->parent callback register model

1 Answers