I have rewritten a Child class component in React to a functional component. Here is the simplified code example.

For sure, as so often, this is a simplified code and more things are done with the value in the parent component. That's why we have and need it there.

const Parent = (props) => {
  const [value, setValue] = useState(null);

  const handleChange = (newValue) => {
    // do something with newValue and probably change it
    // store the result in `newChangedValue`
    setValue(newChangedValue);
  }

  return (
    <Child value={value} onChange={handleChange}/>
  );
}

const Child = (props) => {
  const {value} = props;

  // This solution does not work for me,
  // because it's always triggered, when
  // `value` changes. I only want to trigger
  // `logValueFromProp` after clicking the
  // Button.
  useEffect(() => {
    logValueFromProp();
  }, [value]);

  const handleClick = () => {
    // some calculations to get `newValue`
    // are happening here
    props.onChange(newValue);
    logValueFromProp();
  }

  const logValueFromProp = () {
    console.log(prop.value);
  }

  return (
    <Button onClick={handleClick} />
  );
}

What I want to do is to log a properties value, but only if it got changed by clicking the button. So just using a useEffect does not work for me.

Before changing the child component to a functional component, the property had its new value before I was calling logValueFromProp(). Afterwards it doesn't. I guess that's cause of some timing, and I was just lucky that the property was updated before the function was called.

So the question is: How would you solve this situation? One solution I thought of was a state in the child component which I set when the button is clicked and in the useEffect I only call the function when the state is set and then reset the state. But that doesn't feel like the optimal solution to me...

CodePudding user response：

Three possible solutions for you

1. Pass logValueFromProp the value directly — but in a comment you've explained that the value might be modified slightly by the parent component before being set on the child, which would make this not applicable.

2. Use a flag in a ref. But if the parent doesn't always change the prop, that would be unreliable.

3. Have the parent accept a callback in its handleChange.

#1

If possible, I'd pass the value directly to logValueFromProp when you want to log it. That's the simple, direct solution:

const Child = (props) => {
  const {value} = props;

  const handleClick = () => {
    props.onChange(newValue);
    logValueFromProp(newValue);
  };

  const logValueFromProp = (newValue = prop.value) {
    console.log(newValue);
  };

  return (
    <Button onClick={handleClick} />
  );
};

But in a comment you've said the new value may not be exactly the same as what you called props.onChange with.

#2

You could use a ref to remember whether you want to log it when the component function is next called (which will presumably be after it changes):

const Child = (props) => {
  const {value} = props;
  const logValueRef = useRef(false);

  if (logValueRef.current) {
    logValueFromProp();
    logValueRef.current = false;
  }

  const handleClick = () => {
    props.onChange(newValue);
    logValueRef.current = true;
  };

  const logValueFromProp = () {
    console.log(prop.value);
  };

  return (
    <Button onClick={handleClick} />
  );
};

Using a ref instead of a state member means that when you clear the flag, it doesn't cause a re-render. (Your component function is only called after handleClick because the parent changes the value prop.)

Beware that if the parent component doesn't change the value when you call prop.onChange, the ref flag will remain set and then your component will mistakenly log the next changed value even if it isn't from the button. For that reason, it might make sense to try to move the logging to the parent, which knows how it responds to onChange.

#3

Given the issues with both of the above, the most robust solution would seem to be to modify Parent's handleChange so that it calls a callback with the possibly-modified value:

const Parent = (props) => {
  const [value, setValue] = useState(null);

  const handleChange = (newValue, callback) => {
    //                          ^^^^^^^^^^−−−−−−−−−−−−−−−−− ***
    // do something with newValue and probably change it
    // store the result in `newChangedValue`
    setValue(newChangedValue);
    if (callback) {                                      // ***
        callback(newChangedValue);                       // ***
    }                                                    // ***
  };

  return (
    <Child value={value} onChange={handleChange}/>
  );
};

const Child = (props) => {
  const {value} = props;

  const handleClick = () => {
    props.onChange(newValue, logValueFromProp);
    //                     ^^^^^^^^^^^^^^^^^^−−−−−−−−−−−−−− ***
  }

  const logValueFromProp = () {
    console.log(prop.value);
  };

  return (
    <Button onClick={handleClick} />
  );
};