Are difference between named arrow function and anonymous arrow function in JSX Props?

Example with ComponentA:

Case 1: with named arrow function callback: 
const ComponentA = () => {
  const handleClick = () => {... /* do somthing */};
  return (
    <div onClick={handleClick}>Hello world</div>
  )
}
Case 2: with anonymous arrow function callback:
const ComponentA = () => {
  return (
    <div onClick={() => {/* Do sumthing here */}}>Hello world</div>
  )
}

I knowed case 1 and case 2 make child rerender, but I dont know about effect to memory leak.

Are there issues related to memory leak when use anonymous arrow function vs named arrow function ?

Thank you very much!

1 answer

  • answered 2022-05-04 10:18 Haseeb Anwar

    Arrow functions are always anonymous. What you're referring to as the named arrow function is actually a function assignment

    // function assignment, function itself is not named
    const handleClick = () => {};
    

    As far as the performance difference, there is no difference. Both will create a new reference on each rerender.

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum