A. Leveraging Performance Hooks Effectively
Learn about Performance Hooks in detail and use them judiciously. You should refrain from using useMemo, useCallback, React.memo everywhere.
B. Don’t repeat yourself (DRY)
Create reusable components and functions to avoid writing the same code again.
Ex. util functions, hooks, HOC etc.
C. Prioritize Accessibility
Make sure the application is designed for inclusive use. Meaning it’s accessible to people with disabilities, works seamlessly on mobile devices, functions well on slow internet connections, and can be easily operated using just a keyboard.
D. Avoid unnecessary HTML elements, and use fragments.
E. Declare svg in .svg file
F. Never Use Inline Styles
G. Focus semantic elements
This creates clearer code, improves accessibility, and reduces the overall size of the DOM, leading to better performance.
H. Combine related state values into a single object
For simpler state management, aim to combine related state values into a single object. This keeps your code organized and reduces the number of useState hooks you need. If your state updates become complex, consider using useReducer for improved readability and control.
I. Avoid Rewriting over CSS
Write strategic CSS that considers future needs. This reduces the need for “patching” later and ensures a more maintainable codebase.
J. Px units can’t be in decimals.
K. Follow SOLID principles wherever possible.
L. Consider using switch-case
Consider using switch-case when evaluating a single value against several options. If your conditions involve complex logic or data manipulation, if-else statements with appropriate boolean checks might be more suitable. Additionally, JSON can be a powerful tool for storing and accessing conditional logic in specific scenarios.
M. Run unit tests before pushing for continuous code quality.
- First code change checks before raising PR
- Functional changes confirmation
- UI test and responsiveness
- Cross-browser testing
N. Remove unused, unwanted code from time to time.
O. Flow where any API call is there
User action -> Loading state -> API call -> Update state (data or error) -> Update view
P. Create component as per guidelines
Q. Please read the documentation carefully – Ex. for NextJs Nextjs Docs
R. Follow naming convention for file name, route name as per Coding standards.
S. Write functions in different files instead of inserting everything in a component.
T. Async/await and .then() do the same job. Just pick one per function for cleaner code!
U. Use object destructing.
This insightful post is brought to you by Rupesh Gudmalwar, Senior Software Developer at FindingPi.
