React

Summary

React-specific style guide and best practices.

React

use functional component

This should go without saying, functional components are preferred over class components.

In the case you need to perform side effect when a component mount/unmount, use useEffect with an empty dependency list.

const MyComponent = () => {
    useEffect(() => {
        // do something when the component mount
        return () => {
            // do something when the component unmount
        };
    }, []);
    return <div>{Hello}</div>;
};

no need to import React for jsx

From React 17, it's no longer neceessary to import React in order to use JSX.

use named imports

Named import enables bundler, like webpack do things like tree-shaking that optmize unused code out of the compiled bundle. This works for source files and for dependencies(like lodash)

Tree-shaking can not be performed on default import.

// bad
import Bootstrap from "react-bootstrap";

const component = () => <Boostrap.Button></Boostrap.Button>;

// good
import { Button } from "react-bootstrap";

const component = () => <Button></Button>;

use named exports

Likewise, you should use named exports over default exports. Also, named exports enable the editor to prompt useful suggestions of the potential import.

use Hooks

Hooks are awesome for separating logic from view. It's often unnecessary to create a component just to wrap another component. Use hooks instead!

// bad
class WrapperComponent extends React.Component {
  useEffect(() => {
    // ...
  }, [])
  render() {
    return <div>{this.props.children}</div>;
  }
}

// good
const useMagic = () => {
    useEffect(() => {
        // ...
    }, []);
};

use React Fragment

It's generally unnecessary to nest things in plain <div>s. Most of the time the usecase can be handled by a <Fragment>, or <> for short.

// bad
<div>
    <header></header>
    <main></main>
    <footer></footer>
</div>

// good
<>
    <header></header>
    <main></main>
    <footer></footer>
</>