typescript es-lint 错误：react-hooks/exhaustive-deps

Question

I first thought it's a false positive, but until now I have no clue why the error is a helpful thing.

How to make sense react-hooks/exhaustive-deps error when your external props function is used in useEffect doesn't need to be put in dependency?

interface props {
  someExternalPropFunction: any;
}

const App: React.FC<props> = ({ someExternalPropFunction }) => {
  const [formValues, setFormValues] = React.useState<initialStateProps>({
    eventInfo: {
      name: "",
      location: ""
    }
  });

  React.useEffect(() => {
    someExternalPropFunction(formValues);
  }, [formValues]); //what is going on here?

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
    </div>
  );
};

https://codesandbox.io/s/tender-swirles-cu0qw

Answer 1

The dep list needs someExternalPropFunction since the prop might change.

  React.useEffect(() => {
    someExternalPropFunction(formValues);
  }, [someExternalPropFunction, formValues]); // now it is fixed

codesandbox, fixed