How is this parameter passed from function to function?-CodePudding

how is 10 passed to increment counter num?
I wish to know better how that parameter is passed because I can't see it very clearly

 const Button = React.memo(function Button({ incrementButton }) {

  return <button onClick={() => incrementButton(10)}> </button>;
});

Button.propTypes = {
  incrementButton: P.func,
};


function App() {
  const [counter, setCounter] = useState(0);

  const incrementCounter = useCallback((num) => {
    setCounter((c) => c   num);
  }, []);
 
  const btn = useMemo(() => {
    return <Button incrementButton={incrementCounter} />;
  }, [incrementCounter])
  return (
    <div className="App">
      <p>Teste</p>
      <h1>C1: {counter}</h1>
      {btn} 
      
    </div>
    
  );
}

CodePudding user response：

Not sure if it'll help you:

const Button = React.memo(function Button({ incrementButton }) { // 2) so here incrementButton  = incrementCounter

  return <button onClick={() => incrementButton(10)}> </button>; // 3) here 10 is passed inside incrementButton which is incrementCounter
});

Button.propTypes = {
  incrementButton: P.func,
};


function App() {
  const [counter, setCounter] = useState(0);

  const incrementCounter = useCallback((num) => { // 4) so here num is the 10 that was passed on 3 step.
    setCounter((c) => c   num); // 5) here counter get updated using setState callback with previous value: (0) => 0   10;
  }, []);
 
  const btn = useMemo(() => {
    return <Button incrementButton={incrementCounter} />;  // 1) here incrementButton  = incrementCounter
  }, [incrementCounter])
  return (
    <div className="App">
      <p>Teste</p>
      <h1>C1: {counter}</h1>
      {btn} 
      
    </div>
    
  );
}