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. Use Fragment We know React only allows you 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>
  );
}; Break 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>
  );
}; Use 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
}; Use 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>
  );
}; Use 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 button, the count will increase and only the parent component will get re-render. increment And that’s it for this topic. Thank you for reading. Connect with me | LinkedIn Twitter First Published here

Twitter

A Guide to Self-Hosting Your Own Website Analytics With Umami

7 Websites That are Useful for Web Developers

Read My Stories

Portfolio

Buy Me a Coffee

Hire Me

Newsletter

Nominated for 2022 - HackerNoon Contributor of the Year - React

Nominated for 2022 - HackerNoon Contributor of the Year - Best Practices

Too Long; Didn't Read

Make resilience your competitive advantage

My Top 5 Best Practices for ReactJs

My Top 5 Best Practices for ReactJs

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

7 Websites That are Useful for Web Developers

10 Reasons Why Less Is More in Your init/deinit Methods

10 Best Practices for Every React Developer

10 Best Practices for Using Kubernetes Network Policies

12 Essential Coding Standards for Quality Web Development

7 Websites That are Useful for Web Developers

10 Reasons Why Less Is More in Your init/deinit Methods

10 Best Practices for Every React Developer

10 Best Practices for Using Kubernetes Network Policies

12 Essential Coding Standards for Quality Web Development

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps