Redux Best Practices

Types

Always good practices to set types.

export namespace ISampleComponent {
  export interface OwnProps {
    sampleId: number;
  }
  export interface ApiProps {
    removeSample?: (args: any) => any;
  }
  export interface StateProps {
    openSample: IContent[];
  }
  // redux dispatch props
  export interface DispatchProps {
    close: typeof removeSampleAction;
    keepOpen: typeof keepSampleAction;
    deselectFile: typeof deselectFileAction;
  }

  export type Props = OwnProps & StateProps & ApiProps & DispatchProps;
}

Reduce Computation and rendering of component multiple times unnecessary

• Eliminate unnecessary recomputations by returning a new object from the state update function only when a deep equality check has found that the list of todos has actually changed:

import isEqual from 'lodash.isEqual'
...
export default function todos(state = initialState, action) {
  switch (action.type) {
  case REMOVE_OLD:
    const updatedState =  state.filter(todo => {
      return todo.timestamp + 30 * 24 * 60 * 60 * 1000 > Date.now()
    })
    return isEqual(updatedState, state) ? state : updatedState
  default:
    return state
  }
}

• Having a debounced or throttled version of our functions is useful when we attach any DOM event. It lets us reduce the number of calls to this function to the bare minimum we wanted and thereby improve the performance.

export default class UnleashedOne extends React.Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
  }
  onChange(e) {
    this.props.onChange(e.target.value);
  }
  render () {
    return (
      <input onChange={this.onChange}/>
    );
  }
}

Reference: https://medium.com/myheritage-engineering/how-to-greatly-improve-your-react-app-performance-e70f7cbbb5f6