Should I be using _myMethod for functional components?

Question

Recently I've been seeing a lot of examples in blogs where the methods inside React functional components are given an underscore. I also saw this in class-based components and was told it meant they were private (?).

But functional component internal functions are already private and inaccessible outside of the component, right?

Example:

function MyComponent({ propOne }) {

   const _getData() {
      /// Why does this have an _underscore on it?
   }
   return (
        <div>a div</div>
    )
}

Answer 1

It's a naming convention that the Airbnb React/JSX Style Guide (version 2019.05.24) actually warns against:

• Do not use underscore prefix for internal methods of a React component.

Why? Underscore prefixes are sometimes used as a convention in other languages to denote privacy. But, unlike those languages, there is no native support for privacy in JavaScript, everything is public. Regardless of your intentions, adding underscore prefixes to your properties does not actually make them private, and any property (underscore-prefixed or not) should be treated as being public. See issues #1024, and #490 for a more in-depth discussion.

In short:

• The underscore to denote private methods is borrowed from other languages.
• It doesn't change the method itself.
• It's to show that the method is meant to be private and prevent its use.

It's up to you whether to follow the convention or not. There's no need to. If you follow the style guide cited above, you shouldn't. However, it also depends on the people you work for / with, e. g. if the company uses a style guide with the leading underscore to denote private properties.

---

Example for this convention in another language - Python. From the Naming Convention:

_single_leading_underscore

This convention is used for declaring private variables, functions, methods and classes.