const or let in React component

Question

Say I have a React component -- dumb or not -- and I want to grab something from the store and put it in a variable to make my code a bit more terse. Should I use const or let? Clearly the state will change.

Here's an example of what I'm talking about. Again, I want to emphasize that myValues WILL change as user interacts with my app.

class MyComponent extends Component {      render() {          // Here, should I use const or let?         const myValues = this.props.someData;          return(             <div>              {myValues.map(item => (                     <SomeOtherComponent key={item.id} data={item} />                 ))}              </div>         );     }; }  function mapStateToProps(state) {     return {         someData: state.someValuesComingFromApi     } }  export default connect(mapStateToProps)(MyComponent) 

Answer 1

const is a signal that the variable won’t be reassigned.

let is a signal that the variable may be reassigned

Additional things to ponder:

• Use const by default
• Use let only if rebinding is needed

• const does not indicate that a value is ‘constant’ or immutable.

  const foo = {}; foo.bar = 10; console.log(foo.bar); // --> 10 

  Only the binding is immutable. ie using an assignment operator or a unary or postfix -- or ++ operator on a const variable throws a TypeError exception

• ES6 const and let are hoisted too. Although the identifiers has the same memory reference from compile time, they cannot be accessed before declaration in the code. (but not as we thought the declaration would be physically moved to the top in the scope) ;)

Answer 2

const vs let is mostly to do with "changing" in a code block. It only matters in situations like this:

const myValues = this.props.someData; if (*some condition*) {   myValues = []; } 

In this situation you would need to use let because you are changing the value assigned to the variable myValues:

let myValues = this.props.someData; if (*some condition*) {   myValues = []; } 

If props.someData is changing it will trigger a re-render of the component. So const vs let does not come in to play. The entire render method is re-run.

So that said, I use const in the situations you are describing. Unless you are directly manipulating the valuable of a variable, use const.