21 Best Practices for a Clean React Project
source link: https://dev.to/mohammadfaisal/21-best-practices-for-a-clean-react-project-jdf
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
To read more articles like this, visit my blog
React is very unopinionated about how things should be structured. This is exactly why it’s our responsibility to keep our projects clean and maintainable.
Today, we will discuss some best practices to improve your React application’s health. These rules are widely accepted. As such, having this knowledge is imperative.
Everything will be shown with code, so buckle up!
1. Use JSX ShortHand
Try to use JSX shorthand for passing boolean variables. Let’s say you want to control the title visibility of a Navbar component.
return (
<Navbar showTitle={true} />
);
return(
<Navbar showTitle />
)
2. Use Ternary Operators
Let’s say you want to show a user’s details based on role.
const { role } = user;
if(role === ADMIN) {
return <AdminUser />
}else{
return <NormalUser />
}
const { role } = user;
return role === ADMIN ? <AdminUser /> : <NormalUser />
3. Take Advantage of Object Literals
Object literals can help make our code more readable. Let’s say you want to show three types of users based on their roles. You can’t use ternary because the number of options exceeds two.
const {role} = user
switch(role){
case ADMIN:
return <AdminUser />
case EMPLOYEE:
return <EmployeeUser />
case USER:
return <NormalUser />
}
const {role} = user
const components = {
ADMIN: AdminUser,
EMPLOYEE: EmployeeUser,
USER: NormalUser
};
const Component = components[role];
return <Componenent />;
It looks much better now.
4. Use Fragments
Always use Fragment
over Div
. It keeps the code clean and is also beneficial for performance because one less node is created in the virtual DOM.
return (
<div>
<Component1 />
<Component2 />
<Component3 />
</div>
)
return (
<>
<Component1 />
<Component2 />
<Component3 />
</>
)
5. Don't Define a Function Inside Render
Don’t define a function inside render. Try to keep the logic inside render to an absolute minimum.
return (
<button onClick={() => dispatch(ACTION_TO_SEND_DATA)}> // NOTICE HERE
This is a bad example
</button>
)
const submitData = () => dispatch(ACTION_TO_SEND_DATA)
return (
<button onClick={submitData}>
This is a good example
</button>
)
6. Use Memo
React.PureComponent
and Memo
can significantly improve the performance of your application. They help us to avoid unnecessary rendering.
import React, { useState } from "react";
export const TestMemo = () => {
const [userName, setUserName] = useState("faisal");
const [count, setCount] = useState(0);
const increment = () => setCount((count) => count + 1);
return (
<>
<ChildrenComponent userName={userName} />
<button onClick={increment}> Increment </button>
</>
);
};
const ChildrenComponent =({ userName }) => {
console.log("rendered", userName);
return <div> {userName} </div>;
};
Although the child component should render only once because the value of count has nothing to do with the ChildComponent
. But, it renders each time you click on the button.
Let’s edit the ChildrenComponent
to this:
import React ,{useState} from "react";
const ChildrenComponent = React.memo(({userName}) => {
console.log('rendered')
return <div> {userName}</div>
})
Now, no matter how many times you click on the button, it will render only when necessary.
7. Put CSS in JavaScript
Avoid raw JavaScript when writing React applications because organizing CSS is far harder than organizing JS.
// CSS FILE
.body {
height: 10px;
}
//JSX
return <div className='body'>
</div>
const bodyStyle = {
height: "10px"
}
return <div style={bodyStyle}>
</div>
8. Use Object Destructuring
Use object destructuring to your advantage. Let’s say you need to show a user’s details.
return (
<>
<div> {user.name} </div>
<div> {user.age} </div>
<div> {user.profession} </div>
</>
)
const { name, age, profession } = user;
return (
<>
<div> {name} </div>
<div> {age} </div>
<div> {profession} </div>
</>
)
9. String Props Don’t Need Curly Braces
When passing string props to a children component.
return(
<Navbar title={"My Special App"} />
)
return(
<Navbar title="My Special App" />
)
10. Remove JS Code From JSX
Move any JS code out of JSX if that doesn’t serve any purpose of rendering or UI functionality.
return (
<ul>
{posts.map((post) => (
<li onClick={event => {
console.log(event.target, 'clicked!'); // <- THIS IS BAD
}} key={post.id}>{post.title}
</li>
))}
</ul>
);
const onClickHandler = (event) => {
console.log(event.target, 'clicked!');
}
return (
<ul>
{posts.map((post) => (
<li onClick={onClickHandler} key={post.id}> {post.title} </li>
))}
</ul>
);
11. Use Template Literals
Use template literals to build large strings. Avoid using string concatenation. It’s nice and clean.
const userDetails = user.name + "'s profession is" + user.proffession
return (
<div> {userDetails} </div>
)
Good
const userDetails = `${user.name}'s profession is ${user.proffession}`
return (
<div> {userDetails} </div>
)
12. Import in Order
Always try to import things in a certain order. It improves code readability.
import React from 'react';
import ErrorImg from '../../assets/images/error.png';
import styled from 'styled-components/native';
import colors from '../../styles/colors';
import { PropTypes } from 'prop-types';
The rule of thumb is to keep the import order like this:
Built-in
External
Internal
So the example above becomes:
import React from 'react';
import { PropTypes } from 'prop-types';
import styled from 'styled-components/native';
import ErrorImg from '../../assets/images/error.png';
import colors from '../../styles/colors';
13. Use Implicit return
Use the JavaScript feature implicit return
in writing beautiful code. Let’s say your function does a simple calculation and returns the result.
const add = (a, b) => {
return a + b;
}
const add = (a, b) => a + b;
14. Component Naming
Always use PascalCase for components and camelCase for instances.
import reservationCard from './ReservationCard';
const ReservationItem = <ReservationCard />;
import ReservationCard from './ReservationCard';
const reservationItem = <ReservationCard />;
15. Reserved Prop Naming
Don’t use DOM component prop names for passing props between components because others might not expect these names.
<MyComponent style="dark" />
<MyComponent className="dark" />
<MyComponent variant="fancy" />
16. Quotes
Use double quotes for JSX attributes and single quotes for all other JS.
<Foo bar='bar' />
<Foo style={{ left: "20px" }} />
<Foo bar="bar" />
<Foo style={{ left: '20px' }} />
17. Prop Naming
Always use camelCase for prop names or PascalCase if the prop value is a React component.
<Component
UserName="hello"
phone_number={12345678}
/>
<MyComponent
userName="hello"
phoneNumber={12345678}
Component={SomeComponent}
/>
18. JSX in Parentheses
If your component spans more than one line, always wrap it in parentheses.
return <MyComponent variant="long">
<MyChild />
</MyComponent>;
return (
<MyComponent variant="long">
<MyChild />
</MyComponent>
);
19. Self-Closing Tags
If your component doesn’t have any children, then use self-closing tags. It improves readability.
<SomeComponent variant="stuff"></SomeComponent>
<SomeComponent variant="stuff" />
20. Underscore in Method Name
Do not use underscores in any internal React method.
const _onClickHandler = () => {
// do stuff
}
const onClickHandler = () => {
// do stuff
}
21. Alt Prop
Always include an alt prop in your <img >
tags. And don’t use picture
or image
in your alt property
because the screenreaders already announce img
elements as images. No need to include that.
<img src="hello.jpg" />
<img src="hello.jpg" alt="Picture of me rowing a boat" />
<img src="hello.jpg" alt="Me waving hello" />
Conclusion
There you go. Congratulations if you’ve made it this far! I hope you learned a thing or two from this article.
I hope you have a wonderful day! :D
Have something to say?
Resources
- Airbnb Guideline: https://github.com/airbnb/javascript/tree/master/react
Get in touch with me via LinkedIn or my Personal Website.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK