DEV Community

loading...

Best practices for React Components

martinrojas profile image martin rojas Updated on ・2 min read

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));
Enter fullscreen mode Exit fullscreen mode

Styles (for MaterialUI JSS for CSS)

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} />;
    }
Enter fullscreen mode Exit fullscreen mode

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:
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Discussion (2)

pic
Editor guide
Collapse
fetahokey profile image
fetahokey

Thank you for the efforts & explanations, everything's is understandable except "Each component should have their own styles in the same file", can you illustrate this.

Collapse
martinrojas profile image
martin rojas Author

Sure, this part is when using with styled-components, but more specifically with how it is done in the Material-UI framework material-ui.com/styles/basics/#hoo....

The main take away is that with the advent of CSS in JS it is possible to create fully self-contained components. By lowering the number of dependencies in other files it makes it easier when you or another developer in your team to clearly know what code affects the component.

Hope this clears it for you