DEV Community

martin rojas
martin rojas

Posted on • Edited on • Originally published at nextsteps.dev

5 2

Best practices for React 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));
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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (2)

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

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay