Best Practices Components

Components should be able to be reusable in different applications and therefore should not be bound to a particular store. A previous way to accomplish this was to use the container/component design pattern and create separate files for the HOC (High Order Components). A similar separation can be accomplished by exporting the component when not connected to Redux. Directly export your unconnected component alongside default export of the connected component. E.g.:

  // raw, unconnected component for testing
  export function HeaderLinks(props) {
      ...
      return (
      <Grid container item className={classes.nav}>
          <HeaderMenu renderMenuLinks={() => menuLinks} />
      </Grid>
          )
  }
  // connected (or any other sort of HOC component, etc) for use in App
  export default connect(mapStateToProps)(compose(withStyles(styles), withWidth())(HeaderLinks));

Styles

In order to create more self-contained code and to reduce the overhead of using extra HoC components. Each component should have their own styles in the same file unless that object becomes too large and it makes it harder to read. makeStyles is preferred for adding custom classes.

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  root: {
    backgroundColor: "red",
    color: props => props.color
  }
});

export default function MyComponent(props) {
  const classes = useStyles(props);
  return <div className={classes.root} />;
}

PropTypes

PropTypes should be used on every component. The following are the ways that they should be implemented on each type of component.

Class Components and PureComponent

import React from "react";
import PropTypes from "prop-types";

export class MyComponent extends React.Component {
  static propTypes = {
    prop1: PropTypes.string.isRequired,
    prop2: PropTypes.bool,
    prop3: PropTypes.func
  };

  defaultProps = {
    prop2: false,
    prop3: () => {}
  };

  constructor() {}
  render() {}
}

export default MyComponent;

Functional Component

import React from "react";
import PropTypes from "prop-types";

export const MyComponent = props => {};

MyComponent.propTypes = {
  prop1: PropTypes.string.isRequired,
  prop2: PropTypes.bool,
  prop3: PropTypes.func
};
MyComponent.defaultProps = {
  prop2: false,
  prop3: () => {}
};

export default MyComponent;