Mejores prácticas para componentes

Los componentes deberían poder reutilizarse en diferentes aplicaciones y, por lo tanto, no deberían estar ligados a un almacén de datos (store) en particular. Una forma anterior de lograr esto era usar el patrón de diseño container/component y crear archivos separados para los HOC (High Order Components o Componentes de Orden Superior). Una separación similar se puede lograr exportando el componente cuando no está conectado a Redux. Exporta directamente tu componente no conectado junto con la exportación por defecto del componente conectado. Por ejemplo:

  // componente puro, no conectado, para pruebas
  export function HeaderLinks(props) {
      ...
      return (
      <Grid container item className={classes.nav}>
          <HeaderMenu renderMenuLinks={() => menuLinks} />
      </Grid>
          )
  }
  // componente conectado (o cualquier otro tipo de HOC, etc.) para usar en la App
  export default connect(mapStateToProps)(compose(withStyles(styles), withWidth())(HeaderLinks));

Estilos

Para crear un código más autocontenido y reducir la sobrecarga de usar componentes HoC adicionales, cada componente debería tener sus propios estilos en el mismo archivo, a menos que ese objeto se vuelva demasiado grande y dificulte la lectura. Se prefiere el uso de makeStyles para añadir clases personalizadas.

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

Se deben usar PropTypes en cada componente. A continuación se presentan las formas en que deben implementarse en cada tipo de componente.

Class Components y 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;

Componente Funcional (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;