 ok Setup with Husky

This is the pre-commit hook set up a strategy I followed in our angular projects. By setting this hook we can ensure that committed codes will be linting error-free and formatted with prettier code-formatter.


### Step 1

We install the following *devDependencies*

`yarn add husky lint-staged prettier -D`

- `husky` makes it easy to use githooks as if they are npm scripts.
- `lint-staged` allows us to run scripts on staged files in git.
- `prettier` is the JavaScript formatter we will run before commits.

&nbsp;

### Step 2

Once those are installed, we add the below configuration to `package.json` file:

&nbsp;

```json
 "devDependencies": {
  // ...
 },
 "lint-staged": {
   "src/**/*.{js,ts,scss,md,html,json}": [
     "prettier --write",
     "git add"
   ]
 },
 "husky": {
   "hooks": {
     "pre-commit": "ng lint && lint-staged",
     "pre-push": "ng build --prod"
   }
 } 
```
&nbsp;


## Usage

Next time when you commit the changes, this script will auto-execute and will run `ng lint` first to lint the files. If there are any errors in formatting or coding style, then it will not proceed to commit the files, otherwise, the staged files will be formatted automatically and will be committed. 🥳

If you work in an environment where a pipeline is used for Continuous Integration, pre-commit hooks are incredibly important. Pre-committing allows us to both ensure we write quality code as well as save ourselves from embarrassment by catching bugs before anyone else does. Let's see how we can do this in an Angular project

A quick way to add Git pre-commits hooks into an Angular Project

**Fewer computations -> performance gain!** 🥳

As we all know, in terms of performance, DOM manipulations are rather expensive than regular JavaScript code.

Angular’s `ngFor` Directive is highly optimized in a way that reduces DOM manipulation to a bare minimum.
So, if an element is added or removed from an array, the whole list isn’t getting re-rendered. Whereas it’d use all the existing DOM elements and the only new element gets created or removed.\

Similarly, when the element changes its position in the array, only that change in position of DOM element get noticed.

*Angular determines all the DOM manipulation and does all optimisation since it conducts identification of each object in the array. It uses the** reference of the object** for that.*

#### **Why & when to use trackBy then?**
Unfortunately, Angular's default method of identifying objects by its reference is quite constrained especially in circumstances where a reference shift can’t be prevented.\
&nbsp;

If we are working with REST API or any type of immutable data structure, the reference of each object will be kept on changing. 
This forces Angular to give up its default optimisations and forces it to re-render the whole data set. This is because every reference is modified and therefore every object seems new to Angular.

As you can probably tell this heavily impact the performance. Especially if your collection is huge.
To avoid this, we can help Angular to identify each object in the collection by having a `trackBy` attribute. 
A trackBy attribute allows us to define a function that returns a unique identifier for each iterable element. 
This helps bypass unnecessary and expensive change detection when the data set changes, say for example on receiving new data from an API call.

#### **How to use `trackBy`?**
We need to create a function within our component that matches TrackByFunction interface.
The trackby function takes the index and the current element as arguments and it returns the unique identifier for this element.

```js
interface TrackByFunction<T> { 
    (index: number, item: T): any; 
} 

// component level function should look something like this
function trackByTransaction(index: number, item: Transaction): string { 
    return item.id; 
}
```

And use it in the template like this:
```html
<div *ngFor="let item of txnList; trackBy: trackByData">
   
</div>
````

Angular uses reference comparison for objects in the list by default. This might not be the optimal approach, especially when you update your list's data from the server.

Instead, you could be using some unique and stable identifier that your objects have. Thanks to comparing by the id, Angular won't need to rerender all elements every time you fetch an updated list from an API (object references will be changed but ids won't change).

Improve *ngFor performance with trackBy

At Cashrewards, I use Angular almost every day. It is a component-based front-end framework for building scalable web applications. Some of the challenges that arise when working with Angular are challenging to resolve but here is how I deal with them.