Image for post
Image for post

Stateless functional components are one of the most common types of components in your arsenal. They provide us with a nice and concise way to create components that are not using any kind of state, refs, or lifecycle methods.

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.

Usually, when a component gets a new prop into it, React will re-render that component. But sometimes, a component gets new props that haven’t really changed, but React will still trigger a re-render.

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.

Image for post
Image for post

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.

This opinion might ruffle a few feathers but I have found that using Inline-Conditional Statements considerably cleans up my React code.

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.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store