sijad/my-react-best-practice.md

## my-react-best-practice.md

      
    Raw
  

              my-react-best-practice.md
            
          
    use a state managmer for storing data

Redux or MobX
use react eslint

most important rules that I can think of:

react/jsx-no-bind (it gonna bost performance to another level)
react/prefer-stateless-function (for performance)
eact/no-multi-comp
react/prop-types (maybe, with typescript doesn't make much sense I guess)
react/jsx-handler-names
react/destructuring-assignment
react/forbid-component-props (maybe)
react/jsx-filename-extension (maybe)

more rules:
https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules
compute refrences

this'll be optimize performance, there's might be an eslint rule for this
bad:
class myComponent {
  computeObject() {
    retrun {
      a: 1,
      b: 2,
    }; // it'll re-create a new object each time
  }
  
  render() {
    const myArray = [1,2,3,4,5,6,7,8]; // it'll re-create a new array with a different refrence
    const myObject = this.computeObject();
    retrun (
      <MyOtherComponent
        myArray={myArray}
        myObject={myObject}
      />
    );
  }
}
good:
class myComponent {
  computeObject() {
    if (!this.myObject) {
      this.myObject = {
        a: 1,
        b: 2,
      };
    }
    
    return this.myObject;
  }
  
  render() {
    const myObject = this.computeObject();
    retrun (
      <MyOtherComponent
        myArray={myArray}
        myObject={myObject}
      />
    );
  }
}

const myArray = [1,2,3,4,5,6,7,8];
somthing like https://github.com/alexreardon/memoize-one can become handy.
use decorations

decorations can become very handy in some cases, for example:
import {
  get,
  put,
} from '../api';

@get('users/1')
@get('users/2', {
  name: 'user2', // prop name
})
@put()
class myComponent {

  handleEditUser(data) {
    this.props.put('users/1', data);
  }

  render() {
    if (this.props.data.loading || this.props.user2.loading) {
      retrun (
        <Loading/>
      );      
    }
    
    const {
      data: {
        user,
      },
      user2: {
        secondUser: user,
      },
    } = this.props;
    
    retrun (
      <ShowUsers
        firstUser={user}
        secondUser={secondUser}
      />
    );
  }
}
I think decorations can be useful for api call or even forms (e.g. @form({ fields, options }))