5 Best practices for ReactJs

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 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>
  );
};

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 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.

Connect with me

LinkedIn | Twitter

Comments

[webstuff]

Break Large components into small components or Reusable components
Do you do that in different files? or you can export differnet components from a single file?

[Sachin Chaurasiya]

We can do it either way, but for unit test perspective we should keep components in different files.