Sam Sam - 7 days ago 6
React JSX Question

const or let in React component

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

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.

Comments