React Best Practices — Expressions
By: John Au-Yeung
Tags: Programming, JavaScript, Software Development, Web Development, Technology

Photo by Annie Spratt on Unsplash

Like any kind of apps, React apps also have to be written well.

Otherwise, we run into all kinds of issues later on.

In this article, we’ll look at some best practices when we’re writing React apps.

Spaces Aounr Equal Signs

We should have spaces around equal signs.

For instance, we should have:

<Hello sameName={firstname === lastName} />;

Now we can see the expressions we compare easily.

File Extensions of Files That Can Have JSX

We should have JSX code in .js or .jsx files.

This way, we know that they’re part of our React project.

Position of the First Property

The first prop may be on the same line as the component or element name if it fits on one line,

Otherwise, we can put them on the next line.

For example, we can write:

<Hello personal={true} />

or:

<Hello

personal={true}

foo="bar"

/>

They are both easy to read and won’t overflow the page horizontally.

React Fragments

We can use React Fragements to make our lives easier since it lets us have a wrapper than does render any element or component.

We can write:

<React.Fragment><Foo /></React.Fragment>

or:

<><Foo /></>

for short.

However, if we need to pass a prop to a fragment, then we must use React.Fragment :

<React.Fragment key="key"><Foo /></React.Fragment>

Event Handler Naming Conventions

Our event handler should h8ave some naming conventions so that we can find them easier.

For example, we may stick to a prefix like handle or on :

<MyComponent handleChange={handleChange} />

or:

<MyComponent onChange={onChange} />

This way, we know anything with those prefixes are event handlers.

JSX Indentation

2 spaces are an ideal length for indentation. It minimizes typing while we can still see the indentation.

Tabs have issues when they’re rendered on different platforms, so it’s probably a good idea not to use it.

However, we can convert spaces to tabs.

For instance, we can write:

<App>

<Hello />

</App>

We can also convert tabs to 2 spaces in our text editors.

If we do that, we can use tabs.

Prop Indentation

Props should be indented if there’s one on each line.

Again, 2 spaces are ideal for the same reasons.

For example, we should write:

<Hello

firstName="John"

/>

Now we can see our code easily.

Always Include key Prop with Lists

Whenever we’re rendering an array of stuff into lists, we should add the key prop.

This way, React can keep track of the properly.

We should make sure it’s a unique value that we’re passing in.

For instance, we can write:

data.map(item => <Hello key={item.id}>{item.name}</Hello>);

This way, we won’t get errors from React and we won’t unexpected behaviors when manipulating the lists.

Maximum Depth of JSX Code

Nested code is hard to read, so we should minimize them.

For example, we should write:

<Foo>

<Bar />

</Foo>

but not:

<App>

<Foo>

<Bar>

<Baz />

</Bar>

</Foo>

</App>

It’s just too much nested.

Probably more than 3 levels of nesting are too much for our eyes.

Maximum Number of Props of a Single Line

We shouldn’t have too many props on a single line since it’s going to overflow the page.

This way, we won’t have to scroll horizontally when reading our code.

For example, we can stick with one or 2 props per line:

<Hello lastName="Smith" firstName="John" />;

or:

<Hello

lastName="Smith"

firstName="John"

/>;

This way, we won’t have to scroll.

Use Arrow Functions in JSX Props

If we don’t need to reference this in rthe function that we pass in as a prop value, then we should use arrow functions.

They’re shorter and they don’t have their own value of this .

For instance, we should write:

<Foo onClick={() => console.log('Hello!')}></Foo>

We need to use bind and traditional functions if we need to specify the value of this .

So we’ve to write:

<Foo onClick={function() { console.log(this.foo) }.bind(this)}></Foo>

Photo by Annie Spratt on Unsplash

Conclusion

We should reduce the length of our code so that we don’t have to scroll horizontally.

Also, we shouldn’t have too much nesting since it’s hard to read.

If we don’t need to set the value of this with bind , then we can use arrow functions.

We can use fragments to wrap around elements but don’t want to render anything.