Is there a good way to use private variables and methods in React.js

Question

I've noticed that I could use private variables like this:

var Hello = React.createClass(new (function(){

    var name;

    this.getInitialState = function() {
        name = "Sir " + this.props.name;
        return null;
    };

    this.render = function() {
        return <div>Hello {name}</div>;
    };
})());

React.render(<Hello name="World" />, document.getElementById('container'));

Why I should not be doing this?

Thank you for any help

Answer 1

If you are using es7, you can define class properties as a private variables like this:

class Hello extends React.Component {
  name = 'Jack';
  render() {
    return (
      <div>
        {this.name}
      </div>
    );
  }
}
export default Hello;

Be sure to use babel to compile your code with stage 0

Answer 2

Private vars are perfect when you need local (private) state information for a component that does NOT change or relate to rendering directly. Keep in mind, most things do change rendering so I have found that I use private vars rarely.

Also, keep in mind when you add a variable to the class the way you did, its a singleton so it will be shared with all instances of that component. This can lead to issues if truly want something private for each instance -- if thats what you want, then you need to declare it in one of the lifecycle methods for the component perhaps like this

componentDidMount() {
    this.name = 'hello';
},

Answer 3

I don't think there's anything wrong with it. The syntax is a bit funky, but it's a smart trick.

I would question the need for a truly private variable. I can only think of two reasons why someone might want one, but both can be debunked.

1) You make a library to be consumed by others... If someone is poking around inside your library code where they're not supposed to be, their either breaking their own experience or working around bugs they have found in your code. Either way, no harm to you or others. Worse case, they break their own app. Private variables left a really bad taste in my mouth coming from Flex. JavaScript's openness is a breath of fresh air IMO.

2) You want to hide private data inside your app... With modern browsers, anything in JavaScript can be inspected and modified at run time. It's impossible to hide data from users in JavaScript. You can only make things hard to find.

I know this alternative isn't truly private, but the usage is the same. Since I'm not a big fan of fighting hard to make things private, I'll include it anyway. ;g)

var Hello = React.createClass({

    name: null,

    getInitialState: function() {
        this.name = "Sir " + this.props.name;
        return null;
    },

    render: function() {
        return <div>Hello {this.name}</div>;
    };
});

React.render(<Hello name="World" />, document.getElementById('container'));