JavaScript Best Practices — React Components and Promises

To make code easy to read and maintain, we should follow some best practices.

In this article, we’ll look at some best practices we should follow to make everyone’s lives easier.

Prefer await to then() for reading Promise values

async and await is shorter than the callback pattern, so we can sue that instead.

For instance, instead of writing:

myPromise
  .then((val) => {
    return foo();
  })
  .then((val) => {
    return bar();
  })
  .then((val) => {
    return val;
  })

We write:

const foo = async () => {
  const val1 = await myPromise;
  const val2 = await foo();
  const val3 = await bar();
  return va3;
}

Now we have no more callbacks.

Ensures the Proper Number of Arguments are Passed to Promise Functions

We should pass in the proper argument to promise methods.

Promise.all is called with an array of promises.

Same with Promise.race .

Promise.resolve is called with the resolved value.

Promise.reject is called with the reason for rejection.

then is called a success and optionally and failure callback.

catch is called with a callback.

finally is the same as catch .

Quotes Around Object Literal Property Names

If a property name isn’t a valid identifier, then we need quote around then.

For instance, we write:

const obj = {
  "foo bar": true
};

Otherwise, we don’t need the quotes:

const obj = {
  foo: true
};

Consistent Use of Either Backticks, Double, or Single quotes

If we pick one string delimiter to use everywhere, it would be the backtick.

We can use template strings whether we need to interpolate expressions or not.

For instance, we can write:

const backtick = `backtick`;

or:

const greet = `hello ${name}`;

We can even write multiline string with them:

const backtick = `foo
bar`;

If there’s a linebreak in the string, then it’ll be rendered as such.

Require Radix Parameter

We should puyt the radix argument in the parseInt method call to make sure we parse the number with the right base.

For instance, the following:

const num = parseInt("091");

may be interpreted as an octal number.

Instead, we should write:

const num = parseInt("091", 10);

to convert it as a decimal number.

Enforces Consistent Naming for Boolean Props

In React, we shoild make sure boolean props have a consistent naming scheme to reduce confusion.

For instance, instead of writing:

import PropTypes from 'prop-types';

class Heading extends React.Component {
  render() {
    return (
      <h1>{this.props.enabled}</h1>
    );
  }
}

Heading.propTypes = {
  enabled: PropTypes.boolean
};

We write:

import PropTypes from 'prop-types';

class Heading extends React.Component {
  render() {
    return (
      <h1>{this.props.enabled}</h1>
    );
  }
}

Heading.propTypes = {
  isEnabled: PropTypes.boolean
};

The is prefix tells us it’s a boolean prop easily.

Don’t Use button Elements without an Explicit Type Attribute

We shouldn’t use the button element without an explicit type attribute.

Otherwise, we may get unexpected results.

For instance, instead of writing:

const Foo = <button>Foo</button>

We write:

const Foo = <button type='button'>Foo</button>

Default Props should have a Corresponding Non-required PropType

We should have a default prop for non-rrquire prop types.

This way, the props are never undefined .

For instance, insteaf of writing:

function FooBar({ foo, bar }) {
  return <div>{foo}{bar}</div>;
}

FooBar.propTypes = {
  foo: React.PropTypes.string.isRequired,
  bar: React.PropTypes.string
};

FooBar.defaultProps = {
  foo: "foo"
};

We write:

function FooBar({ foo, bar }) {
  return <div>{foo}{bar}</div>;
}

FooBar.propTypes = {
  foo: React.PropTypes.string.isRequired,
  bar: React.PropTypes.string
};

FooBar.defaultProps = {
  bar: "bar"
};

Enforce Consistent Usage of Destructuring Assignment of Props, State, and Context

We should use the destructuring assignment of props, state, and context consistent.

For instance, we should write:

const IdComponent = ({id}) => {
  return (<div id={id} />)
};

or:

const Foo = class extends React.PureComponent {
  render() {
    const { name } = this.state;
    return <div>{name}</div>;
  }
};

Add displayName in a React component Definition

We should set the displayNamne property so that we see the name when we debug with React dev tools.

For instance, we write:

export default function Greet({ name }) {
  return <div>hello {name}</div>;
}
Greet.displayName = 'Greet';

Conclusion

We sure make sure we define and use promises properly.

Also, when we create React components, we should have some prop validations and default props for optional ones.

Also, displayName is useful for debugging.