"different functions with the same name", but I'm using useCallback.

I’ve tried posting this on StackOverflow with no response was hoping to get some more detail here. I recreated a very simple project to replicate what’s going on in a bigger project of mine. https://github.com/DaleSalcedo/PropFunctionProblem. In my App.js I’m passing down this function:

const modifyPlayer = React.useCallback((playerId, propertyName, value) => {
    const playerCopy = {...playerDict[playerId]};
    playerCopy[propertyName] = value;
    const playerDictCopy = {
      ...playerDict,
      [playerId]: playerCopy
    };
    setPlayerDict(playerDictCopy);  // useState function
  }
  ,[playerDict]);

I pass that down 2 components as props and use it here:

export const Player = ({player, modifyPlayer}) => {
  const handleOnChange = React.useCallback((event) => {
    modifyPlayer(player.id, event.target.name, event.target.value);
  }, [player, modifyPlayer]);

  return (
    <div>
      <input type={"text"} name={"firstName"} value={player.firstName} onChange={handleOnChange}/>
      <input type={"text"} name={"lastName"} value={player.lastName} onChange={handleOnChange}/>
    </div>
  );
};

I’m not sure why it’s giving me that message “different functions with the same name” for “modifyPlayer” function when I used “useCallback”.

Is this a bug or can someone explain what’s going on?

[vzaidman]

fixed in v5.0.0-alpha.2

[vzaidman]

Re-opened for the record because I was asked about it again:

We wait on https://github.com/facebook/react/issues/14099 to be fixed so the fn returned from useCallback wan’t cause a re-render of the component it is passed to.