5 Best practices for ReactJs
In this article we will be discussing the 5 best ReactJs practices that will help you simplify the building of great and high-performance applications
Howdy people, In this article we will be discussing the 5 best ReactJs practices that will help you simplify the building of great and high-performance applications.
PermalinkUse Fragment
We know React only allows to return one JSX element at a time, To wrap multiple elements we use div that gets added to the Dom which will need some computations so try to use Fragment instead of unnecessary div.
const withoutFragment = () => {
return (
<div>
<h2>Without Fragment</h2>
<p>Using div as external element</p>
</div>
);
};
const withFragment = () => {
return (
<React.Fragment>
<h2>With Fragment</h2>
<p>Using React Fragment as external element</p>
</React.Fragment>
);
};
PermalinkBreak Large components into small components or Reusable components
If the component is too large then break down that component and compose small components to one component and reuse them as per requirements.
// Component (Before)
const ProfileCard = (props) => {
return (
<div className="card">
<div className="avatar">
<div className="icon">
<span>{props.icon}</span>
</div>
<div className="name">
<h2>{props.name}</h2>
</div>
</div>
<div className="stats">
<div className="followers">
<span>{props.followers}</span>
<p> Followers</p>
</div>
<div className="blogs">
<span>{props.blogs}</span>
<p> Articles</p>
</div>
<div className="revenue">
<span>{props.revenue}</span>
<p>MRR</p>
</div>
</div>
</div>
);
};
// Small components with composition
const Avatar = ({ icon, name }) => {
return (
<div className="avatar">
<div className="icon">
<span>{icon}</span>
</div>
<div className="name">
<h2>{name}</h2>
</div>
</div>
);
};
const Stats = ({ followers, blogs, revenue }) => {
return (
<div className="stats">
<div className="followers">
<span>{followers}</span>
<p> Followers</p>
</div>
<div className="blogs">
<span>{blogs}</span>
<p> Articles</p>
</div>
<div className="revenue">
<span>{revenue}</span>
<p> MRR</p>
</div>
</div>
);
};
// Component with simplify JSX (After)
const ProfileCard = (props) => {
return (
<div className="card">
<Avatar icon={props.icon} name={props.name} />
<Stats
followers={props.followers}
blogs={props.blogs}
revenue={props.revenue}
/>
</div>
);
};
PermalinkUse TypeChecking
Use propTypes or TypeScript for type checking in your application to catch mistakes early and prevent bugs.
import PropTypes from 'prop-types';
const TypeChecking = ({ name }) => {
return <h1>Hello, {name}</h1>;
};
TypeChecking.propTypes = {
name: PropTypes.string.isRequired
};
PermalinkUse Functional components
React haș introduced hooks, which is great to create a functional component in ReactJs and it lets you manage the state without any complexity.
const Counter = () => {
const [count, setCount] = React.useState(0);
const handleClick = () => {
setCount((prevCount) => prevCount + 1);
};
React.useEffect(() => {
// It will be logged when count value changes
console.log('Count: ', count);
}, [count]);
return (
<React.Fragment>
<button onClick={handleClick}>Increment</button>
<h2>{count}</h2>
</React.Fragment>
);
};
PermalinkUse Memoization
Try to use React memo to avoid unnecessary re-rendering and boost your application performance.
const Child = React.memo(({ name }) => {
console.log('Child rendering');
return <p>{name}</p>;
});
const Parent = () => {
const [count, setCount] = React.useState(0);
const handleClick = () => {
setCount((prevCount) => prevCount + 1);
};
console.log('Parent rendering');
return (
<React.Fragment>
<button onClick={handleClick}>Increment</button>
<h2>{count}</h2>
<Child name={'deuex solutions'} />
</React.Fragment>
);
};
If you execute the code then you will see the child component gets rendered only once. On the Click of the increment
button, the count will increase and only the parent component will get re-render.
And that’s it for this topic. Thank you for reading.
PermalinkConnect with me
Written by
Hi there 👋, I’m Sachin Chaurasiya, a software engineer with over 4 years of experience in building scalable, performant, and user-centric products. I enjoy solving challenging problems and creating products that make a difference for users.
Collaboration is a big part of my work. I’ve worked closely with designers, backend engineers, and other teams to deliver solutions that are efficient and easy to use. I also enjoy mentoring and guiding other engineers to help them grow in their careers.
I believe in taking ownership of my work and always strive to go the extra mile to ensure high-quality results. Beyond work, I love sharing knowledge through writing technical blogs and contributing to open-source projects, and I am currently contributing to OpenMetadata and ReactPlay.
If you’re looking for someone who’s passionate about building impactful products and working as part of a team, let’s connect and create something amazing together. You can reach me at sachinchaurasiya.dev@gmail.com.
Hi there 👋, I’m Sachin Chaurasiya, a software engineer with over 4 years of experience in building scalable, performant, and user-centric products. I enjoy solving challenging problems and creating products that make a difference for users.
Collaboration is a big part of my work. I’ve worked closely with designers, backend engineers, and other teams to deliver solutions that are efficient and easy to use. I also enjoy mentoring and guiding other engineers to help them grow in their careers.
I believe in taking ownership of my work and always strive to go the extra mile to ensure high-quality results. Beyond work, I love sharing knowledge through writing technical blogs and contributing to open-source projects, and I am currently contributing to OpenMetadata and ReactPlay.
If you’re looking for someone who’s passionate about building impactful products and working as part of a team, let’s connect and create something amazing together. You can reach me at sachinchaurasiya.dev@gmail.com.
Published on
ReactPlay Blog
ReactPlay is an opensource platform to help you learn ReactJS faster with hands-on practice model. ReactPlay Blog is another step ahead to give you insights about JavaScript, React, Next.js, and more.
ReactPlay is an opensource platform to help you learn ReactJS faster with hands-on practice model. ReactPlay Blog is another step ahead to give you insights about JavaScript, React, Next.js, and more.