I am using Webstorm and I wrote a React ponent, my code looks like:

async onDrop( banner, e ) {
    banner.classList.remove( 'dragover' );
    e.preventDefault();

    const file = e.dataTransfer.files[ 0 ], reader = new FileReader();
    const { dispatch } = this.props;

    const result = await this.readFile( file, reader );

    banner.style.background = `url( ${ result } ) no-repeat center`;
    dispatch( addLayer( file ) );

    return false;
}


@isImage( 0 )
readFile( file, reader ) {
    reader.readAsDataURL( file );

    return new Promise( function ( resolve, reject ) {
        reader.onload = ( event ) => resolve( event.target.result );
        reader.onerror = reject;
    } );
}


onDragOver( banner ) {
    banner.classList.add( 'dragover' );
    return false;
}

Webstorm's code inspection suggest me that Method can be static for the onDragOver method. My question is:

Are there any real benefit from having the method as static or this suggestion is somehow useless?

I am using Webstorm and I wrote a React ponent, my code looks like:

async onDrop( banner, e ) {
    banner.classList.remove( 'dragover' );
    e.preventDefault();

    const file = e.dataTransfer.files[ 0 ], reader = new FileReader();
    const { dispatch } = this.props;

    const result = await this.readFile( file, reader );

    banner.style.background = `url( ${ result } ) no-repeat center`;
    dispatch( addLayer( file ) );

    return false;
}


@isImage( 0 )
readFile( file, reader ) {
    reader.readAsDataURL( file );

    return new Promise( function ( resolve, reject ) {
        reader.onload = ( event ) => resolve( event.target.result );
        reader.onerror = reject;
    } );
}


onDragOver( banner ) {
    banner.classList.add( 'dragover' );
    return false;
}

Webstorm's code inspection suggest me that Method can be static for the onDragOver method. My question is:

Are there any real benefit from having the method as static or this suggestion is somehow useless?

• javascript
• ecmascript-6

• The suggestion is issued because the method doesn't use any instance data. Of course, if you do have similar methods in other classes that do use instance data, and you might do here as well, you shouldn't make it static. – Bergi Commented Jan 27, 2016 at 15:15
• @Bergi thx. That makes sense. And makes it more clear. – Avraam Mavridis Commented Jan 27, 2016 at 15:17

2 Answers 2

Yes, you don't need an instance of the object when invoking a static function. All you need is a reference to the constructor:

class Foo {
  static bar() { console.log("foo"); }
}

Foo.bar(); // outputs "foo" to console

No need for a new Foo() anywhere.

By convention, instance methods should be used when you actually need state (either to read state, or to write state) from an instance.

The inspection will tell you that when you have a prototype/class method that does not have a this in it (and thus doesn't need an instance).

https://www.newmediacampaigns./blog/refactoring-react-ponents-to-es6-classes

http://aristid.es/react-es6-ponents-static-declarations/

Source to book

import {Image} from '.../some';
Image.fetch() //call static method 

I think when different ponents can same use method then it's case for use static