5

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>
    )
}
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Aid19801
  • 1,175
  • 1
  • 17
  • 30
  • 1
    That's just naming convention – GalAbra Jun 23 '19 at 07:04
  • 1
    Match ease to read code and understand it when using naming convention. So calling of method `_getData()` means that this method not global, it is definitely locally placed within this Component – Yuriy Gyerts Jun 23 '19 at 11:13

3 Answers3

24

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.

Jeanne Dark
  • 1,151
  • 5
  • 20
  • 30
0

_functionName doesn't mean private, it is just a best practice.

If are interested in writing custom hooks react document suggest to prefix "use" before hook name ex: useCustomeHook https://reactjs.org/docs/hooks-custom.html

Functional component is a tiny function which accepts only props and return HTML in ReactJs.

kkchaitu
  • 631
  • 2
  • 5
  • 24
0

Just as Jeanne Dark said, it's just a naming convention. It's up to you of course how to type your code, but I would not recommend using the underscore prefix, as you can see for yourself that the function is private without the underscore.

You can read about JS naming conventions here on W3 schools, or maybe even more trustworthy, googles JavaScript style guide.

Marius Franzén
  • 25
  • 5