What to review in ReactJS Code?

1. Components

The first thing to check in the PR - "Is developer is following 'thinking in React'" suggested by the ReactJS team? If the developer hasn't broken the code in components then flag it.

Example: instead of making Homepage.jsx as one whole component, break the page into the components. This exercise should be done at 2 levels: Application level and page level.

At the application level, identifies the reusable (Global) components, and at the Page-level repeat the same exercise.

Think about: reusability, and global and generic components.

Code Example

Also, make sure that the developer has not put down all the business logic in one component.

2. props & props-drilling

As ReactJS developers or web developers, we are used to putting the content or values hardcoded in the code.

One of the features of ReactJS is props this gives flexibility as well as control over the content and values.

So, do review which value can be moved to the props? Also, props help in the flow of the data between the components.

But be cautious about "prop drilling". This could lead to a re-render which will be expensive for the performance.

Code Example

3. States

One more feature of ReactJS is states. As a beginner ReactJS developer, while handling events or the different states of the application, developers get confused about managing state in React or JavaScript way or states is UI or APP.

As a ReactJS developer, you should handle states via only the ReactJS way, not the JavaScript way.

Also, keep asking would this state is UI state or application state?

If it is a UI state then it should handle at the component level and if it is app-level then lift the states to the parent level.

Code Example

4. Consistency in styling method

Styling in React comes with a lot of options from CSS, SASS, Styled components, CSS Modules, etc. It is important to follow one way of styling.

If the developer has no consistency in styling then flag it.

Follow one way of styling. Consistency is important for the clean and maintainable code.

5. Consistency in file extension

React supports JS and JSX both extensions. Have consistency, you can have components in JSX or JS and follow the same with reducers, Actions, etc.

If the developer has no consistency in the file extension then flag it.

Consistency in file extension is important for the clean architecture of the project.

6. Semantic HTML

React's JSX at the end of the day is HTML only. Hence, it is important to write the semantic JSX(HTML). Why? because Header.jsx (<Header />) it not equivalent to HTML header tag.

So, review the JSX if the semantic code is written or not. If not, then flag it.

Write clean and semantic JSX (HTML).Always remember JSX is HTML at the end of the day.

Code Example

7. Context API before Redux

While starting with the React project review the scale of the project. When the project is small, use Context API. With large applications migrate to state management libraries such as MobX, Redux, etc.

If the developer is using Redux or MobX where the ContextAPI can be used, you know the drill :)

Start with small as per the project scope and scale when required.

Code Example

8. Functional Code

While creating components in ReactJS it is very common to see all the code is written within the component only. ReactJS is all about writing functional code.

Move the methods or functions from the component. This will break the code into functional code as well as this will make the components reusable.

Code Example

9. Props Validation

As ReactJS developers make habit of static props validation. This will help the developers to avoid early bugs and issues while doing development.

By using props validation we can also state which props are required, what the default value should be, and a lot more.

Use PropTypes, Flow, or TypeScript with ReactJS.

Code Example

10. Clean Folder Structure

Create React App (CRA) is the most popular way of the bootstrapping React project. However, most of the developers forget to clean the folder before pushing it to production. It is important to delete all the unnecessary files and folders which are not required. CRA allows developers to design their architecture. However, I would suggest sticking to what most of the popular react developers are following.

11. Testing

This is one more good practice for ReactJS developers. One can start with the snapshot testing then move to Unit testing, and E2E testing. Remember, that there are a lot of advantages of testing in the long term.

You can use Jest, Enzyme, or React-Testing library

12. Avoid Over Engineering

Avoid 'Over-Engineering' and Keep it Simple Silly.

Look at the problem and think of the simplest solution rather than over-complicated it. As well as, in the attempt of writing less code do not write non-readable code. Remember, we developers are working in collaboration. Our code should be readable.

13. Hooks before lifecycle

Thanks to Hooks from the ReactJS team. Now, instead of moving the components to class or smart we can keep the components functional and use hooks.

This will help in the performance improvement as now you are moving the components from class to functional.

Happy Code Review!!

Let me know what are your tips for the code review in the comments :)

Comments

[Feli (she/her)]

Thanks for sharing Neha, I love it. Today I host a CodeReview discussion round. Code Reviews are so important and I think we need to talk and write about more often. So, thanks a lot.

[Neha Sharma]

Oh!! awesome. 100% code reviews are very important

[RAJAT MEHRA]

That's a great article Neha. I'm glad I have been following most of these points in my daily work, and I'll be starting with snapshot testing soon too.
Your articles are really helpful. 🔥

[Joyan Serrao]

Thank you, this was very helpful