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 }))

and also I forgot to mention, when you use something like Redux probably never gonna need to store data in the state, but I'm not sure if it'll limit the extensibility or not (Flarum extensions might need to manipulate the reducers or even it might make things a little hard for new comers). I'm not sure.

Context is also an alternative to Redux but I never used it, it might be easier to use it instead of Redux for storing data (but not for local states).

@tobscure there's a very good example of memoize-one usage: https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization