React Patterns — Writing Clean Code
By: John Au-Yeung
Tags: Software Development, React, JavaScript, Programming, Web Development

Photo by Zoë Reeve on Unsplash

React is a popular library for creating web apps and mobile apps.

In this article, we’ll look at how to clean up our React code.

Multi-Properties

If we have lots of attributes or props, we should put them in their own line.

For instance, we can write:

<Content

foo="bar"

anotherProp="baz"

onClick={this.handleClick}

/>

This way, we can see each prop clearly.

The props should have one indentation.

This way, we won’t have long lines that we’ve to scroll through.

Conditionals

We often have to write conditional statements or expressions to display something conditionally.

For instance, we may write:

let link;

if (isLoggedIn) {

link= <LogoutLink />

}

return <div>{link}</div>

However, that’s hard to read.

It’s even harder is we have multiple components and conditions.

To make this shorter, we can use an inline expression instead:

<div>

{isLoggedIn && <LogoutLink />}

</div>

This works because if isLoggedIn is false then the 2nd expression won’t be evaluated.

But if it is, then it will.

If we want to display something for the alternate case, instead of writing:

let link;

if (isLoggedIn) {

link = <LogoutLink />

} else {

link = <LoginLink />

}

return <div>{link}</div>

We can use a ternary expression to make this shorter:

<div>

{isLoggedIn ? <LogoutLink /> : <LoginLink />}

</div>

If we have longer boolean expressions, then we should put them in a function instead of writing them out:

const canShowSecretData = () => {

return dataLoaded && (isAdmin || userHasPermissions)

}

And then we can use that in our conditional expression to render something:

<div>

{canShowSecretData() && <Secret />}

</div>

If we have a class component, we can also define a getter:

get canShowSecretData(){

return dataLoaded && (isAdmin || userHasPermissions)

}

Then we can use:

<div>

{this.canShowSecretData && <Secret />}

</div>

Computed properties can also be put into a function.

For instance, we can write:

const getPriceAfterTax = () => {

return currency * (1 + taxRate);

}

In a class component, we can also write:

getPriceAfterTax() {

return this.props.currency * (1 + this.props.taxRate);

}

If it’s in a class, we can also use a getter:

get priceAfterTax() {

return this.props.currency * (1 + this.props.taxRate);

}

There’s also a render-if package that lets us pass in a component to conditionally display.

We can install it by writing:

npm install --save render-if

For instance, we can write:

const canShowSecretData = renderIf(

dataLoaded && (isAdmin || userHasPermissions)

)

Then we can conditionally render our component with:

<div>

{canShowSecretData(<Secret />)}

</div>

Alternatively, we can use the react-only-if package to create a component that’s conditionally rendered with the high-order component that comes with the package.

To install it, we write:

npm install --save react-only-if

Then we can write:

const SecretDataOnlyIf = onlyIf(

({ dataLoaded, isAdmin, userHasPermissions }) => {

return dataLoaded && (isAdmin || userHasPermissions)

}

)(Secret) ... <div>

<SecretOnlyIf

dataLoaded={...}

isAdmin={...}

userHasPermissions={...}

/>

</div>

Now we don’t have to have logic in our expression to display Secret in the JSX code.

We pass in the expressions to check before rendering something as props.

Loops

To render a list of objects, we use the map method.

For example, we can write:

<div>

{users.map(user => <p key={user.id}>{user.name}</p)}

</div>

Note that we’ve to use the key prop with a unique ID so React can keep track of the list items properly.

This is more important if we’re changing the entries dynamically.

Control Statements

There’s the jsx-control-statements package to let us render items conditionally, especially where there are multiple cases.

We install it by writing:

npm install - save jsx-control-statements

Then in the .babelrc file, we add:

"plugins": ["jsx-control-statements"]

Then we can write:

<If condition={canShowSecret}>

<Secret />

</If>

If we have more than one case, we can write:

<Choose>

<When condition={...}>

<span>if</span>

</When>

<When condition={...}>

<span>else if</span>

</When>

<Otherwise>

<span>else</span>

</Otherwise>

</Choose>

When is like case and Otherwise if like default in a switch statement.

Photo by Roksolana Zasiadko on Unsplash

Conclusion

There are many ways to render things cleaning in React components.

If we have lots of conditional statements, we may want to use those packages listed.

If we want to render a list, we use the array’s map method.

JavaScript In Plain English

Enjoyed this article? If so, get more similar content by subscribing to our YouTube channel!