React best Practices
Stateless Components
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: React’s 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
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.
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
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/
