When I started learning how to code and develop ReactJS applications, a mentor suggested reading up on the best practices that are to be followed beforehand just so that I have these in mind while creating a web application complying to React standards. However, a general google search suggests 100 different articles to read, the irony of which is that this article will soon be one among these. But here is a compilation of some of the best points I found.
At first glance, it’s always a good idea to go ahead and study the original React documentation, and here are a few key points that stood out :
- Breaking up the UI into component hierarchy, ideally following the single-responsibility principle where one component only does one designated task.
- Build a static version of your application without using state at all initially.
- React’s one-way data flow or one-way binding keeps everything modular and fast.
- Identify minimal set of mutable states required by application.
- Figure out which data constitutes a state, i.e., not passed from parent via props, changes over time, or cannot compute data based on other state or props in component, etc. (general qualities of a state).
- For each piece of state, components that render data based on state and common owner component must be identified.
- Common owner component or higher component in hierarchy must own the state.
- Create component for holding the state and add it in hierarchy above common owner to make it easier.
- Add inverse data flow once the data flow down the hierarchy is supported.
- In case the user needs to enter data in application, states must be updated to reflect user input, components should only update their own state.
While the documentation provides key points to be followed, a better-compiled list is found in tech blog posts, and here’s a list of best practices I found :
- Keep components small and function-specific.
- Reusability is key, minimum creation of new components recommended.
- Consolidate duplicate code by scrutinising for patterns and similarities.
- Keep code visually clutter free by keeping comments to a minimum.
- Name component after function to make it more recognisable.
- Component names need to begin with Uppercase letters so that JSX can identify them differently from default HTML tags.
- Any component that you create for React in JSX should be named in Pascal case, or upper camel case.
- Separate stateful aspects from rendering, stateful components store information about the state and stateless components require no memory.
- Keep code behaviour, execution and testing up to date and as expected.
- All files (CSS files, icons, images, tests and any other sub-components) related to a component should stored be in a single folder.
- Ensure adequate testing is done for any new code added to your project to test functionality and integration with existing code.
- Follow linting (program that analyses code for potential errors) rules, break up lines that are too long.
- Ensure testing is done for overall application and all code written.
- Use external tools (such as Bit) to reuse and maintain code and syncing, and snippet libraries (ES7 React, Redux, JS Snippets, etc) to keep up with the best and most recent syntax and keep code relatively bug free.
Note :
This article is not sponsored and is purely based on the author’s opinions and personal experience on the journey of learning. None of the links provided here are affiliate links and are provided only for the purpose of learning.
The author is a student completing an Engineering Degree in Computer Science with a Specialization in Cloud Technology and Mobile Applications.
Check out this article on my Medium Blog : React JS Best Practices – A Compilation
References :
[I]. Thinking in React – React
[II]. SOLID Part 1 – The Single Responsibility Principle – Envatotuts+
[III]. Getting Started – React
[IV]. 15 React Best Practices in 2021 – codeinwp.com
[V]. Bit: The platform for modular web – bit.dev
[V]. ES7 React/Redux/GraphQL/React-Native snippets in CodeSandbox
[VI]. Redux – A predictable state container for JavaScript Applications
JOTMOS 