ESLint: prefer-const doesn't throw an error even if variable is not reassigned

Question

In my .eslintrc file, the value of prefer-const has been set to 2 and I do not override rules in the file.

All the rules seem to work fine. Even prefer-const rule seems to work fine. But, just for this particular code it's not throwing me any error. I am not re-assigning the value and I expect eslint to throw an error. I am using Atom as an editor.

  /**
   * Main render function
   */
  render: function () {
    // TODO: Show title based on the modal being opened i.e if New FAQ Modal
    // is opened show NEW FAQ else show the title of the FAQ.
    let title = "";

    return (
      <Modal title={title}
             className="faq-modal"
             loading={this.state.isModalLoading}
             hideHeader={this.state.isModalLoading}
             width="900px" />
    );
  }

Editor, Plugins and Library

Atom: 1.12.9

linter (atom): 1.11.8

linter-eslint (atom): 8.1.2

eslint: 2.7.0

Answer 1

When variable title is used as an attribute of Modal, eslint-plugin-react adding a property called eslintUsed(which is being used, by eslint, to decide whether or not the variable is reassigned).

I don't completely know how this is being evaluated and all, but here is what I found out so far.

acorn-jsx

acorn-jsxmodule decides, while parsing JSX expressions, whether or not the variable is reassigned.

file: acorn-jsx\inject.js

Then eslint-plugin-react will set the eslintUsed prop on the variable.

eslint-plugin-react:

file: eslint-plugin-react\lib\rules\jsx-uses-vars.js

file: eslint-plugin-react\lib\util\variable.js

Finally, this prop(eslintUsed) is being used in prefer-const rule in eslint to(or not to) throw error/warning.

Hope this helps.