Stateless Components

The idea with a stateless functional component is that it is state-less and just a function. So what’s great about this is that you are defining your component as a constant function that returns some data.

In simple words, stateless functional components are just functions that return JSX.

Update: Reacts latest version has brought us React hooks, which will let us state, effects and refs in functional components without needing to convert them into class components.

PureComponents

Using PureComponent will help you prevent this wasted re-render.

For instance, if a prop is a string or boolean and it changes, a PureComponent is going to recognise that, but if a property within an object is changing, a PureComponent is not going to trigger a re-render.

So how will you know when React is triggering an unnecessary re-render? You can check out this amazing React package called Why Did You Update. This package will notify you in the console when a potentially unnecessary re-render occurs.

Once you have recognised an unnecessary re-render, you can use a PureComponent rather than a Component to prevent things from having an unnecessary re-render.

Use Inline Conditional Statements

Take a look at this code snippet:

<div className="one-col">
{
isRole('affiliate', user._id) &&
<MyAffiliateInfo userId={user._id} />
}
</div>

References:

https://blog.bitsrc.io/how-to-write-better-code-in-react-best-practices-b8ca87d462b0

http://www.mattgreer.org/articles/react-internals-part-one-basic-rendering/

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.