✅Elevating Code Quality: Best Practices for Developers🚀

Starting a new job is always exciting, but the initial thrill can quickly turn into dismay when faced with a chaotic codebase. In this post, we'll explore common challenges developers encounter in new projects and propose essential practices for maintaining clean, organized, and efficient code.

1. Use of Absolute Paths Instead of Relative Paths:

When entering a new project, replace convoluted relative paths with absolute paths for improved readability. Configuration adjustments may be needed, especially when using Webpack or TypeScript.

// Webpack (create-react-app)
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

// TypeScript
{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"]
}

This practice simplifies imports, transforming code like this:

import { Button } from '../../../../components/Button'

Into something cleaner:

import { Button } from '@/components/Button'

2. Using “Export Barrel” for Module Organization:

Enhance code readability and maintenance by adopting the "export barrel" technique. Create an index.js file in a folder and export all modules from that folder.

// components/index.ts
export * from './Button'
export * from './Icon'
export * from './Input'

Now, importing components becomes concise:

import { Button, Icon, Input } from '@/components'

3. Choosing Between “Export Default” and “Named Export”:

Prefer "Named Export" over "Export Default" to avoid conflicts and improve code clarity. Reserve "Export Default" for specific use cases like Next.js routes or React.lazy.

// components/Button.tsx
export const Button = () => {
  return <button>Button</button>
}

// Importing
import { Button } from '@/components'

4. Proper File Naming Conventions:

Organize your project by adopting a clear file naming convention. Group related files within dedicated folders, specifying the purpose of each file.

--components
----Button
------index.ts
------types.ts
------styles.css
------utils.ts
------component.tsx

This structure facilitates easy identification of file roles and simplifies searches.

5. Proper Use of ESLint and Prettier for Code Standardization:

Maintain code consistency across teams by integrating ESLint and Prettier. Enforce coding standards and formatting rules to ensure a unified codebase.

// Example ESLint configuration
{
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
    // Other rules
  }
}

6. Husky and Lint-Staged: Reinforcing Code Standardization:

Enhance code quality by employing Husky and Lint-Staged to enforce ESLint and Prettier rules before committing or pushing code.

// Example Husky configuration
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

These tools provide an extra layer of control, ensuring code adheres to established guidelines.

7. Custom Hooks for Logic Reusability:

Improve code modularity by creating custom hooks for logic that needs reuse. Whether it's navigation, API calls, or other functionalities, encapsulating logic in custom hooks promotes clean and reusable code.

// Example custom navigation hook
export const useRouter = () => {
  const navigate = useCallback((path: Routes) => goTo(path), [goTo])
  return { navigate }
}

8. The Difference Between Hooks and Utility Functions:

Distinguish between hooks and utility functions. Hooks are components without a visual part, created externally to React, while utility functions are created once and used anywhere.

// Example utility function
export const formatHour = (date: number) => {
  return new Date(date).toLocaleTimeString('pt', { timeStyle: 'short' })
}

9. Using useCallback and useMemo for Performance Optimization:

Optimize React performance by selectively using useCallback and useMemo to memoize functions and values. Be cautious not to overuse these hooks, as excessive memoization can impact performance negatively.

10. Logic Separation:

Keep pages simple and separate logic when possible. Create dedicated components or hooks for specific functionalities like toast logic, API calls, and reusable components.

By incorporating these best practices into your workflow, you can contribute to maintaining a clean, organized, and efficient codebase. Continuous learning and adaptability are key in the ever-evolving field of software development. Elevate the quality of your work, stand out as a developer, and keep exploring new approaches for long-term success. #CodeQuality #BestPractices #SoftwareDevelopment