This content originally appeared on DEV Community and was authored by Shubham Sananse
1. Functional Components > Class Components
Functional components have much simple syntax than class components and more readable.
As of now, you can't create error boundaries with class components but if you want but you can also use packages like react-error-boundary.
// ? Class components are verbose
class Counter extends React.Component {
state = {
counter: 0,
}
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
this.setState({ counter: this.state.counter + 1 })
}
render() {
return (
<div>
<p>counter: {this.state.counter}</p>
<button onClick={this.handleClick}>Increment</button>
</div>
)
}
}
// ? Functional components are easier to read and maintain
function Counter() {
const [counter, setCounter] = useState(0)
handleClick = () => setCounter(counter + 1)
return (
<div>
<p>counter: {counter}</p>
<button onClick={handleClick}>Increment</button>
</div>
)
}
2. Keep your styling consistent
Using prettier and Eslint will save you a lot of time. another thing that you can do is to fix how your components will differ from your methods or helper functions.
one thing that you can do is to use function declaration for your components and arrow functions with other methods which are used inside components. easy search and reads.
3. Don't use the default export
With named exports, you don't just get the editor to autocomplete but also consistent naming for your components and variables.
I personally don't like to use export function add(){} and would rather prefer export {add} cause in any file I can just go to the end and know which functions are exported rather than searching for export.
// ?
export default function Counter(){
return ...
}
// -----------------------//
// ?
function Counter(){
return ...
}
export {Counter}
With lazy-loaded components there is no escape, you need to
export defaultthem.
4. Early exit with return keyword
early exits makes your code look much cleaner than using ternary operators or if-else.
// ?
function Posts(){
const [posts, setPosts] = useState()
///
return (!posts ? <CreatePost /> : <PostsList />)
}
// -----------------------//
// ?
function Counter(){
const [posts, setPosts] = useState()
///
if(!posts) return <CreatePost />
return <PostsList />
}
5. Avoid Nested Ternary Operators
// ? Nested ternaries are hard to read
isLoading ? (
<Loading />
) : posts.length > 0 ? (
<PostsList />
) : (
<CreatePost />
)
// ? Place them inside a component on their own
function PostsPage({ isLoading, posts }) {
if (isLoading) {
return <Loading />
}
if (posts.length > 0) {
return <PostsList />
}
return <CreatePost />
}
there's an Eslint rule for this named as
no-nested-ternary
6. Destructure props
With all props destructured at the top, you always know which props this component is using and it also makes your code cleaner. there's no need to write props everywhere.
// ? Don't repeat props everywhere in your component
function Input(props) {
return <input value={props.value} onChange={props.onChange} />
}
// ? Destructure and use the values directly
function Component({ value, onChange }) {
const [state, setState] = useState('')
return <div>...</div>
}
7. Don't create Components inside Component
This is a very common mistake beginners make. whenever a component re-renders everything inside the component is recreated so if you create a component inside another component every time the parent component re-renders the child component will unnecessary unmount and then remount.
// run this code and check console logs
function Parent() {
const [count, setCount] = useState(0);
// ? Avoid doing this
function ChildComponent() {
useEffect(() => {
console.log("I am mounted");
return () => console.log("I am unmounted");
}, []);
return "I am child";
}
return (
<div>
Parent : {count}
<button onClick={() => setCount((c) => c + 1)}>add </button>
<br />
<ChildComponent />
</div>
);
}
8. You might not need State Management Library
React provides state management API like useState and useReducer. You can also use context API for making a piece of state accessible to multiple nested components. consider using redux, recoil, or any other state management library only when your app grows complex.
9. Use Absolute Paths
With absolute paths, you will have to change less when you move files from one place to another, o it makes it easier to find out where everything is getting pulled from.
you can create a jsconfig.json file at the root of your folder and have an absolute path for each directory.
// jsconfig.json
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@/components/*": ["components/*"],
"@/lib/*": ["lib/*"],
"@/styles/*": ["styles/*"],
"@/assets/*": ["assets/*"],
"@/utils/*": ["utils/*"]
}
}
}
with jsconfig file in the root of your folder now you can import files like this
// ? Don't use relative paths
import {Input} from '../../../components/common/input'
// ? Absolute ones don't change
import {Input} from '@/components/common/input'
10. Use Data Fetching Libraries
React applications do not come with an opinionated way of fetching or updating data from your components so developers end up building their own ways of fetching data.
With data fetching libraries like react-query, you can cache, fetch, invalidate and mutate server state easily with very minimal code.
This content originally appeared on DEV Community and was authored by Shubham Sananse
Shubham Sananse | Sciencx (2021-04-29T07:08:16+00:00) 10 React Practices To Make Your Code Better.. Retrieved from https://www.scien.cx/2021/04/29/10-react-practices-to-make-your-code-better/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.