0

Recently I learned (aka read online here is an example article https://medium.com/@stevemao/do-not-use-anonymous-functions-to-construct-react-functional-components-c5408ec8f4c7) that creating React components using arrow functions should not be done because it will result in the displayName for the component not being set, thus making it harder to profile the React application. I found the resources regarding this to be a bit spare and was unsure if the argument was to use something like function Foo(){} or use const Foo = function(){}.

So I decided to test it out myself. Here is a code sandbox of my code https://codesandbox.io/s/fast-glade-idorlo?file=/src/App.js

When I used the React dev tools to profile my inputs I found that each input had the same display name as the variable name. Without me needing to manually give it a display name. The only difference was that the memoized components didn't receive a new updated display name (e.g. "memoized(Foo)" as opposed to "Foo") so to fix this I manually set the display name for the memoized components.

Imgur links to my react dev tools results: https://i.stack.imgur.com/Uhu30.png https://i.stack.imgur.com/oS17R.png

So my question is do we still need to worry about setting the display name manually for arrow functions? should we always use function declaration style function Foo(){} to create a new function? does this issue no longer exist? Why do people say that you HAVE to add a display name yourself if you are using arrow functions?

Moon
  • 85
  • 1
  • 5

1 Answers1

0

By assigning a display name to an arrow function, you'll end up with an arrow function expression. It is still an anonymous function and has its limits. Like it still can't be called inside of itself(recursive programming) and some other limits, you can find more information in this MDN document.

marzzy
  • 706
  • 10
  • 21