ReactJS component methods – STATIC context

One of the interesting things I came across with new linting rules is static functions in components. To make the linting happy, I had to add the word static in front of some functions. This was because the function did not make any reference to theĀ this scope.

Let’s take a look at the specific rule, class-methods-use-this:

If a class method does not use this, it can safely be made a static function.

However, once you add the word static, and the linting is happy, the context of that function changed and your code is now broken!

To fix it, you just need to update all references to that function.

Before static:

this.foo( )

After static:

componentName.foo( )

Now run any unit tests against it, and check the code in real-world use on your site.