Naming Conventions

Naming conventions, while more rigid, provide the following advantages:

1. Code Readability: Consistent naming conventions enhance code readability, making it easier for developers to understand the purpose and usage of variables, functions, and components within the codebase.

2. Maintainability: Following naming conventions provides a standardized structure, facilitating code maintenance. Developers can quickly locate and update specific elements, reducing the likelihood of introducing errors during modifications.

3. Collaboration: When multiple developers work on a project, adhering to naming conventions promotes a shared understanding of the code. Consistency in naming fosters collaboration and helps team members navigate and contribute to the codebase seamlessly.

Context

In the javascript world, the convention is to use camelCase (wiki).

In the React world, Components are written using PascalCase (wiki).

Constants values

The naming convention for constants (like environment variables) is to write them using UPPER_SNAKE_CASE (capital letter words separated by underscored).

For example: API_TIMEOUT

Boolean values

Boolean try to read as a question using is (most of the time) or has (less frequent).

For example: isOpen

Styled Components

In this project, we use the following for naming our styled components: Styled<ComponentName>

For example: StyledCenterCell

Function Declaration vs Arrow Function

In Javascript (TypeScript), there are multiple ways, to declare functions. Here are two:

// Function declaration
function add(a, b) {
  return a + b
}

// Arrow Function
const add = (a, b) => a + b

Arrow functions, introduced in ES6, have become widely popular due to their concise syntax and lexical scoping of the this keyword.

In this project, we mostly use arrow functions.

The exception to this is for React Components which are Function Declaration as seen above

Handler functions

In this project, we use the following for naming our event handlers functions: handle<EventName> OR on<EventName>.

For example: handleClick

Props vs Params

When defining a function, we use params for its parameters.

For example:

export const clampValueInRange = (params: ValueAndRange): number => {
  const { maximum, minimum, value } = params
  return Math.max(Math.min(value, maximum), minimum)
}

When defining a React Component, we use props for its “properties”.

For example:

export function BooleanStateGridCell(
  props: BooleanStateCellProps,
): React.JSX.Element {
  const { checked } = props
  return (
    <StyledCenterCell>
      <StyledBooleanStateCell checked={checked} />
    </StyledCenterCell>
  )
}

Custom React Hooks

The naming convention for React’s hooks is to start the name with use.

For example: useFetch