Does passing anonymous function as a prop make any performance issue?

Question

both anonymous function and normal function are recreated on every render. As components are function every time it is called all functions are recreated again, right?. Does normal function have any performance improvement over anonymous function?

function App() {
   function handleClick() {
       console.log('');
   }

   return(
     <>
      <Button onClick={handleClick} />
      <Button onClick={() => {console.log('');}} />
     </>
    );
}

Only advantage I feel is more readable code.

Answer 1

Does normal function have any performance improvement over anonymous function?

No, none whatsoever. It's entirely a matter of style/readability.

Depending on the Button component's implementation (and what you're doing in your click handler), you might get a performance improvement out of using useCallback (see the answers to this question [including mine] for more about that), but it has nothing to do with whether a function is named or not.