7 Tips to Write Informed React Code

ReactJS is a highly intuitive open-source JavaScript Library. It creates impressive web apps in less time, effort, and with minimal coding. ReactJS primarily is used to develop User Interfaces (UI) that improve the speed of the apps. Despite being the latest technology with numerous high-end attributes some aspects can make the code messy, wordy and unreadable. As a result, bad practices are introduced into the coding. In this blog, you’ll explore a couple of ways that will ensure code maintains readability and usability for developers. 

1.Use Good Linting

It is essential to have good linting to write better code as having a good set of linting rules setup enables the code editor to catch anything that has the potential to cause problems in the code. Apart from this ESLint setup will always keep you in touch with React best practices and shape your coding knowledge.

For Example – Let’s say you want to reference a new property this.props.hello in your render() function. 

Your Linter will turn red and display:’hello’ is missing in props validation (react/prop-types).

Once you have a good understanding of linting sooner or later you will start dodging mistakes while writing code in react.

Linters are one of the great means to impose consistent code patterns, reducing syntax errors, and making code more readable and reliable. 

2. Avoid Redundancy

Many projects consist of redundant components or structures which require simplification. As far as React is concerned,  developing shared styles, components for common things (for example cards), and other generic functionalities are brought into use over and over again throughout the application. As your application expands, this makes it easier to refactor or alter vast quantities of code easily.

However, avoid making the code too DRY (Don’t Repeat Yourself), as it can escalate different levels of abstraction and create a heap of numerous unreadable abstractions which can make it very complex to figure and sort out the situation.

3. Proper Naming Conventions

There are no specific rules stating when you can turn your code into a component. But make sure you change your code into a component only when they fall into the following criteria:

• The functionality of the code is unmanageable?
• Is it self-contained?
• Are you planning to reuse the code?

If the answer to any of these questions is yes, then you need to change your code into components. 

You can greatly improve the readability of your application by naming the components. It makes a developer’s job easy as by reading a component’s name, a developer can easily configure what it does. Use standard conventions such as capitalizing the components. 

4. Use propTypes and Default props

There are cases when the userIsLoaded is not required, then the code will be :

static defaultProps = {
userIsLoaded: false,
}

So whenever a PropType is used in the component, you need to inform React that userIsLoaded is always going to be a boolean value.

Further again if you fall into the situation where userIsLoaded is not required then you’ll need to have a default prop. And in case it’s required, there is no need to define a default prop for it. Also, as per the rules, there shouldn’t be vague propTypes like objects or arrays.

This is why the shape is used to validate a user, it holds another id in it, which is a propType of string, and a complete user object is required.

Confirm that you have your propTypes and defaultProps installed on every individual component that uses props.

When those props just do not get the data they expect, the error notifies that either something wrong is getting transferred or something that expects it is missing, making error detection much simpler, particularly if a lot of reusable components are being written. Hence, they become more comprehensible.

5. Separate UI and Business Logic

Make sure you keep the stateful data-loading logic and rendering logic separate. It streamlines components and makes debugging and refactoring easier. For example, if your application is making an API call, manage the API call in a parent component and pass data via props into the component to be rendered. This makes the code easier to understand and more readable.

6.Use Inline Conditional Statements

Inline-Conditional Statements significantly help in cleaning React code.

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

In the above example, the basic function called validates whether the person is an “affiliate”, followed by a component called <MyAffiliateInfo/>.

What we observe here is that

• You didn’t have to write a separate function.
• No separate “if” statement is required in my render function.
• No need to create a “link” to somewhere else in the component.

Writing inline-conditional statements is not very difficult. All you need to do is begin with the conditional statement. Say true and it will always show the <MyAffiliateInfo /> component.

Now link the conditional statement with <MyAffiliateInfo /> using &&. This way, the component will only be rendered when the conditional statement returns true.

7. Use React Dev Tools

React Developer Tools enables developers to inspect a React application. They come with an inspector that gives you access to the entire structure of your React app that builds your page, and for each component, you can go and check the props, the state, hooks, and lots more.

React Dev Tools are available for all major browsers such as chrome and firefox. React Dev Tools is an excellent way to explore our React components and helps diagnose any issues in your app.

Conclusion

These are some informed tips helpful to the ones who have an idea but don’t quite know how and where to execute their code. In case you face any issues with something, React internals will help you understand the crux well.

We at Brainvire hold significant experience in React Native Application Services that will provide actionable insight into your business needs and build stunning, high functionality apps with a robust mobile experience.