7 Clean Code Practices in React

In this article I'll show how to write clean code using some inbuilt features, these features are inherited from ES6+ so feel free to use them outside React. These are fairly simple to use but once you get the gist you'll love them. So after that not-needed paragraph, Let's get started.

Practices by example

1. Arrow Functions ( => )

// Normal Version
function App() {
    return (
        <div className="App">
            <h1>Hello Word!</h1>
        </div>
    );
}

// Advanced Version
const App = () => {
    return (
        <div>
            <h1>Hello World!</h1>
        </div>
    )
}

2. No "return" Keyword

If we use round braces "()" instead of curly braces "{}", we don't need return keyword. Thats it.

// Normal Version
function App() {
    return (
        <div className="App">
            <h1>Hello Word!</h1>
        </div>
    );
}

// Advanced Version
const App = () => (
    <div>
        <h1>Hello World!</h1>
    </div>
)

3. Use less braces "(), {}"

// Normal Version
const App = () => (
    <div>
        <h1>Hello World!</h1>
    </div>
)

// Advance Version
const App = () => <div><h1>Hello World!</h1></div>
// if using props or inputs
const App = props => <div><h1>Hello {props.name}</h1></div>

4. Code-splitting

Split your code (if you can) into reusable components. Follow DRY = Don't repeat yourself For example I transfer my "Hello Word" code into HelloWorld.js and then import it to App.js

// Hello World.js
const HelloWorld = () => <div><h1>Hello World!</h1></div>
export default HelloWorld

// App.js
import HelloWorld from "./HelloWorld"
const App = () => (
    <HelloWorld />
)
/* or make components folder and place your components
there and further splitting it on and on and on - preferably on
large Codebase. */

5. Destructuring - arrays, props, objects

For example props - as props return object, we can destucture it

// Normal version 
const App = props => <div><h1>Hello {props.name}</h1></div>

// Advanced Version
const App = ({name}) => <div><h1>Hello {name}</h1></div>

6. Fragments

As react dosen't allow you to render more than one component unless enclosed in a parent component, you can use fragments instead of --div(s)-- to render those components.

const App = () => (
    <>
        <h1>Hello</h1>
        <h1>World</h1>
    </>
    /* the above empty opening and closing tags are called
--react fragments or simply fragments--.
Now fragments play the role of parent component so react won't
complain now. */
)

7. Optional Chaining

As you map through array to render names of user resting inside an object you use conditional rendering to confirm if that object instance is defined then only pass/render names. Another way of doing that is by optional chaining

const App = () => (
    <div className="App">
        {
            // Normal Version
            users.map(user => <h1>{user && user.first} {user && user.last}</h1>)
        }

        {/* OR */}

        {
            // Advanced Version
            users.map(user => <h1>{user?.first} {user?.last}</h1>)
            // also you can Destructure the user object
            users.map({first, last} => <h1>{first && first} {last && last}</h1>)
        }
    </div>
)

Conclusion

Thanks for reading. Hope you folks like it. Share with other react and js developers you know. Well that's me signing off for now. Good day/afternoon/evening/night.