Code faster with React using these techniques

React has truly become an essential tool for front-end developers. However, there is a real difference between those who use React and those who truly understand it: execution speed and code readability are two crucial skills for any experienced developer.

If you want to optimize your development time and write clean code, these few techniques can help you save precious time. 😉

1. Use Ternary Conditions with &&

Using ternary conditions is already a good first approach with React! You can indeed condense your code to make it clearer.

However, it is not uncommon to see this type of ternary condition among beginner developers:

{
    isLoggedIn ? <LogoutButton /> : null
}

Here's what you should do:

{
    isLoggedIn && <LogoutButton />
}

Here, we simply used &&. It's a shortcut that tells React: if my condition is validated, then display what's on the right. Otherwise, do nothing.

2. Use Destructuring Assignment

Destructuring assignment is very important with React. It improves code clarity and reduces its length, which facilitates good reading.

Here's what a junior developer's code would do:

const value = this.props.value;
const other = this.props.other;
const again = this.props.again;

Here's what you should do instead as an experienced developer:

const { value, other, again } = this.props

Much simpler! 👀

3. Use React Fragments Properly

When you want to return multiple elements in a React component without encapsulating them in a div, you can use Fragments.

This helps keep the DOM clean, but you can go even faster by using the shorthand version of Fragments: <> </>.

Here's what you should not do:

<React.Fragment>
    <Component />
    <Component />
</React.Fragment>

Here's what you should prefer:

<>
    <Component />
    <Component />
</>

It's cleaner! ✨

4. Use the Spread Operator

The spread operator (...) is extremely useful for copying or extending objects and arrays.

Don't do this anymore:

<Component
    propA={props.propA}
    propB={props.propB}
/>

But prefer this way:

<Component {...props} />

Here, we're passing our props to our component dynamically: no need to bother passing each property one by one. When we add a new property to the parent component, it will be dynamically brought to the child component.

5. Use Optional Chaining

It is extremely important to use optional chaining with React. But you first need to know how to use it.

For example, here's what you should not do:

const name = props.user && props.user.name;

Use optional chaining:

const name = props.user?.name;

The idea is to ask React to check if the user value exists, otherwise return null.

The Importance of Being Well Trained

Too often, junior developers graduate from training that teaches them React with bad techniques and conventions. Sometimes, they learn React on older versions (see one of our articles that talks about this). This means that in the end, you'll end up with skills that no one will want, or with ways of creating your projects that will make your life very complicated throughout your career.

By choosing a very good, comprehensive training.

It's obvious, you'll tell me, and yet, how many actually do it?

If you enjoyed this article, know that you're not at the end of your surprises. If you want to avoid wasting your time on things that aren't worth it, go check out our React training.

It will be the best decision of your day. 😇