## What are custom hooks?

Hooks were introduced in React 16.8. Hooks are simple functions that allow you to use React state and lifecycle in a functional component. React has built-in hooks that provide the basic functionality to use form and lifecycle.

Custom hooks are user-defined functions prefixed with the “use” keyword. Depending on your logic, custom hooks may call another react hook or custom hook. It may return the function or state that re-renders the react component.

## Why should we use custom hooks?

The main reasons to use customs hooks are:

It helps you to separate your logic from the user interface
It allows you to create re-usable logic blocks
It makes your component more understandable
It increases the modularity of your code

## When should we use custom hooks?

Below are some cases when you should use custom hooks

1. When you are using the same logic in different components
2. When your logic is very complex
3. When you are working on a large-scale project

## How should we use custom hooks?

Before discussing how to use custom hooks, let’s discuss how to write custom hooks.

We will create a basic form that persists the form data on local storage without a custom hook.

```
export default function App() {
  const [firstName, setFirstName] = useState(() => {
    if (localStorage.getItem("first-name"))
      return localStorage.getItem("first-name") ?? "";
    return "";
  });

  useEffect(() => {
    if (firstName) {
      localStorage.setItem("first-name", firstName);
    }
  }, [firstName]);

  return (
    <div className="App">
      <h1>Register Now</h1>
      <div className="input-wrapper">
        <label>First Name</label>
        <input
          value={firstName}
          onChange={(e) => setFirstName(e.target.value)}
        />
      </div>
      <button>Submit</button>
    </div>
  );
}
```

Now, if you want to add more input fields in the form like Last Name, Email, Phone, Address, and Password, then you have to write the useEffect() hook for each field, and soon your code will get messy and very hard to maintain.

Here custom hook solves this problem by extracting all the logic in the hook itself and returning the states that input fields can use.

Let’s create a custom hook for this logic.

```
import { useEffect, useState } from "react";

const useLocalStorageState = (key, state) => {
  const [localState, setLocalState] = useState(() => {
    if (localStorage.getItem(key))
      return JSON.parse(localStorage.getItem(key) ?? "");
    return state;
  });

  useEffect(() => {
    if (localState) {
      localStorage.setItem(key, JSON.stringify(localState));
    }
  }, [localState]);

  return [localState, setLocalState];
};

export default useLocalStorageState;
```

## Important rules for using custom hooks

1. Never call Hooks inside loops, conditions, or nested functions.
2. Always use Hooks at the top level of your React component.
3. Never call Hooks from regular JavaScript functions.
4. Instead, call Hooks from React function components or call Hooks from custom Hooks.

## Bonus Tip

If you want to follow these rules without checking manually, you can use eslint-plugin-react-hooks, which automatically gives an error on your IDE.

## Code sandbox

Try refreshing the code sandbox page after filling out the form.

<CodeSandbox codeSandboxId="custom-hooks-rbcw9b" />

## Conclusion

This article showed how custom hooks could help you separate your logic from the user interface and increase code reusability. We also saw the rules of hooks and how to use the custom hooks. Custom hooks can help you write more clean code and build large-scale projects.



Learn how custom hooks can help you to write clean code

Shashwat Nautiyal

Custom Hooks in React

## Why do you need to maintain code consistency?

Code Consistency is the uniformity of coding style in a project. Code consistency is critical when working on a large-scale project with more than 10 developers contributing. The different coding styles of every developer (whether to use single or double quote, pascal, or snake case for naming) give rise to code inconsistency. After some time, your project will become cluttered, decreasing code readability and consistency.

## How can you achieve code consistency?

You can achieve code consistency by forcing coding guidelines that every developer needs to follow while coding. These guidelines can include whether to use double or single quotes and how many empty lines must be between two lines or anything you like. However, the real problem occurs even if you document all the guidelines. It is challenging for every developer to remember and follow all the guidelines correctly. ESLint, Prettier, husky and lint-staged npm packages solve this problem by giving errors and warnings while coding in your IDE.

## What are ESLint, Prettier, husky and lint-staged?

**Eslint** is an npm package that automatically analyzes your code to find and fix problems. It allows enforcing custom rules like whether a string should have single or double quotes.

**Prettier** helps format the code like proper indentation, trailing commas or maximum line length. It comes as an npm package as well as VS Code extension.

**Husky** is a pre-commit tool that lets you run commands or scripts before committing or pushing our code to git. It makes sure to format and fix code before committing.

**Lint-staged** can run multiple linter on your staged file that format and fix most of the file before committing. Lint-staged can run as a pre-commit script that formats your staged file before committing by husky.

## How do you set up ESLint, Prettier, husky and lint-staged?

Before diving into setup and integration, let us see how they all work together.

![Husky Flow chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ln75diaqkaxox9n1yfpb.png)

Run `git commit -m <message>` on your terminal. Husky will run the pre-commit script like the `npm run lint-staged`. Lint-staged runs all linter one by one on staged files that fix and format all the code. After all these checks and formatting, husky creates the commit on git.

## Pre-requisites

1. React Typescript or Javascript project created using `create-react-app` script.
2. Familiarity with `npm` and `package.json` scripts.
3. Knowledge of git commands.

## Installation

To set up eslint, you need to run the below command to ask questions about coding rules and install all dependencies.

`npm init @eslint/config`

Now, you have to install other npm packages using the below command.

`npm i -D husky lint-staged prettier eslint-config-prettier`

Create three new files with the name `.prettierrc.yml`, `.eslintignore` and `.prettierignore` in the root directory.

Copy the below lines to your `.eslintignore` and `.prettierignore` file

```
node_modules
public
build
dist
```

Copy the below config file to `.prettierrc.yml`

```
printWidth: 100
tabWidth: 2
singleQuote: true
semi: true
jsxSingleQuote: true
quoteProps: as-needed
trailingComma: none
bracketSpacing: true
bracketSameLine: false
```

## Configuration

Initialize the husky pre-commit script using the below command.

`npx husky-init`

Add the lint-staged script command in `package.json` file in the root layer.

```
"lint-staged": {
    "*.{js, jsx,ts,tsx}": [
      "eslint --quiet --fix"
    ],
    "*.{json,js,ts,jsx,tsx,html}": [
      "prettier --write --ignore-unknown"
    ]
  },
```

Open `.husky/pre-commit` file and change the command to `npm run lint-staged`

## Testing

It is time to test everything. Try committing using your terminal.

```
git add .
git commit -m "initial commit"
```

Husky will run the pre-commit script as lint-staged, run all the linter in that format, and fix all the staged files whenever you try to commit.

**Bonus tip:** Sometimes, there is a situation when you do not want to run husky pre-commit. You can use the git flag `--no-verify` in your commit command to ignore any pre-commit script and directly commit into git.

Ex- `git commit -m "intitial commit" --no-verify` ignores the pre-commit script.

## Conclusion

In this article, we saw why it is important to maintain code consistency in a project and how to achieve code consistency by enforcing coding guidelines. In a react project, we also learned how to set up the ESLint, Prettier, husky, and lint-staged. Husky will ensure to run the linter, which formats and fixes errors in your staged files.


Detailed guide on how to install ESLint, Prettier, husky and lint-staged ✍🏻

Complete guide to ESLint, Prettier, husky and lint-staged

## What are generics in TypeScript?

Generics in typescript give you the advantage of writing functions or classes where that single function or class can operate with any data type, like an array, string, number, or object.

Ex- You want to create a stack data structure that can be used with any data type or write a custom hook for API services that returns typed data instead of “any” type.

## Let us understand with code 🧑🏻‍💻

```
class Stack<StackType> {
    private items: StackType[];
    private top: number;
    constructor() {
        this.items = [];
        this.top = -1;
    }
    
    push(element: StackType) {
        this.items[++this.top] = element
    }
    
    pop() {
        return this.items[this.top--];
    }
    
    peek(){
        return this.items[this.top];   
    } 
    
    isEmpty(){
       return this.top === 0;   
    }
   
    size(){
        return this.top + 1;
    }
}
let stack = new Stack<string>();
```

## Explanation 🙇🏻‍♂️

We have created a generic stack class that accepts the type argument in angle brackets `<>`. This stack class will create an items array of type parameter StackType, and the push function will only accept the StackType in a parameter.

Ex- If we create a number Stack by `let stack = new Stack<number>()` then `stack.push("hello world")` will throw an error. You can only pass numbers in the push function like `stack.push(1)`.

## Diving deep into generics

There are mainly 3 main types of generics.

1. Generic classes
2. Generic functions
3. Generic constraints

Generic classes are mainly used to create a generic data structure with multiple methods and variables. The type argument is passed only once in the generic class when instantiated.

```
class Todo<TodoType> {
  todos: TodoType[];
  constructor() {
    this.todos = [];
  }
addTodo(todo: TodoType) {
    this.todos.push(todo);
  }
getTodos() {
    return this.todos;
  }
}
```

Generic functions can accept any data type and return data accordingly. This makes the function more reusable and flexible.

```
let todos: any[] = [];
function addTodo<TodoType>(todo: TodoType) {
  todos.push(todo);
}
```

Generic constraints are very similar to generic types, but it uses the extend keyword to force the user to add required parameters in a function call. The generic constraints add the constraint in the generic type function or class.

```
function removeKey<Type, Key extends keyof Type>(obj: Type, key: Key) {
  const _obj = {...obj}
  delete _obj[key];
  return _obj;
}
function updateTodo<TodoType extends {
  id: number
}>(newTodo: TodoType) {
  todos.forEach((todo, index) => {
    if(todo.id === newTodo.id) {
      todos[index] = {todo: removeKey(newTodo, "id"), id: newTodo.id}
    }
  })
}
```

In the above example, the “extends” keyword ensures that the id property exists in the newTodo and we can use the id in the function to find the todo and update it accordingly.

## Code sandbox

<CodeSandbox codeSandboxId="generics-typescript-dxvryl" />

## How can generics help you in React?

You can take advantage of generics in React to create generic functions, custom hooks, or generic components. I will give an example of each that can help you write your generics.

## Use-cases 👀

Generic custom hook for fetching API

```
export const useFetch = <DataT>(api: string) => {
  
  const [status, setStatus] = useState<
    "fetching" | "success" | "error"
  >("fetching")
  const [data, setData] = useState<DataT>();
  const [error, setError] = useState<string>();
useEffect(() => {
    const fetchApi = async () => {
      try {
        setStatus("fetching")
        const res = await fetch(api);
        const data = await res.json();
        setData(data);
        setStatus("success")
      } catch(err) {
        setError(err)
        setStatus("error")
      }
    }
    fetchApi();
  }, [api])
 
  return {data, status, error} as const;
}
const { data, status, error } = useFetch<{
  title: string,
  description: string,
  id: number
}>(API);
```

Generic function for creating an array of mixed data type

```
function createArray<Type>(
  ...values: Type[]
): Type[] {
  return [...values]
}
const myArray = createArray<number | string>(
  "Hello", "World", 2022
);
```

Generic component that renders a list without using map

```
const List = <T extends unknown>({
  data,
  keyExtractor,
  renderItem
}: {
  data: T[];
  keyExtractor: (item: T) => string | number;
  renderItem: (item: T) => React.ReactNode;
}) => {
  return (
    <>
      {data.map((item) => (
        <React.Fragment key={keyExtractor(item)}>
          {renderItem(item)}
        </React.Fragment>
      ))}
    </>
  );
};
<List
  data={data}
  keyExtractor={({ id }) => id}
  renderItem={(item) => <div>{item.title}</div>}
/>
```

## Code sandbox

<CodeSandbox codeSandboxId="generics-in-react-p69s2k" />

## Conclusion

In this article, we saw how generics could help you to write more reusable functions, components, and custom hooks. We also saw the different use cases of generics that helps you to build your logic with generics in React. It also provides a very good experience with IntelliSense integration in the IDE.




Learn how generics in TypeScript can save your time in development

Understanding Generics in Typescript

## How I got this opportunity?
Groww came to our college (GL BAJAJ) for a 6-month internship program.

## Eligibility Criteria

The eligibility criteria for all branches were resume shortlisting. Students were shortlisted on their previous internship experience.
## Process (1 week)

The whole process was conducted in 4 rounds, including the resume screening round. It was Resume Screening + Assignment + Technical Interview + Cultural fit round.

Here is the brief info about each process 👇🏻

### Resume Shortlisting 📄

It was the first elimination round in which out of 400 students, around 20 students were shortlisted. The process of determining whether a candidate qualifies for a role was based on their previous internship experience.

### Assignment Round ⏳

In this round, I had to develop a react application with pretty good features in 2–3 days. The basic features mentioned were API integration, Responsive Design, Error Handling, Caching, Debouncing, Throttling and Pagination, and Hosting website.

It was an online bank search application where Groww already provided API. In this application, you can find your bank details using IFSC, city name, branch, etc.

> Source code ⬇️:
[GitHub - ShashwatNautiyal/find-my-bank](https://github.com/ShashwatNautiyal/find-my-bank)

After 2–3 days, I got a call from HR that I had cleared my assignment round, and the next day my interview got scheduled 😬

### Technical Interview 🧑🏻‍💻

The interview began with a regular discussion about me and the interviewer. He started questioning me about my previous internship. It briefly discussed the points I mentioned in my resume for 20 minutes.

After the resume discussion, I was asked to rate myself from 1 to 5 in HTML/CSS, Javascript and React, where 1 was the lowest, and 5 was the highest point. I ranked 5 in HTML/CSS and 4 in Javascript/React.

From here, the actual interview started. I was asked basic questions about HTML, like the difference between inline and block elements and different ways to define CSS in HTML.

Now comes the CSS part. I have listed some questions on CSS below.
- Difference between position absolute, relative, sticky, static and fixed.
- Box model in CSS
- Specificity in CSS
- Different ways to hide a div element

The questions on CSS were finished in 15 minutes. Then He started giving me questions on advanced javascript, which were from topics like call, bind, prototype chaining, etc.

This is one of the tricky questions.
```
let name1 = {
  firstname: "Ram",
  lastname: "Sharma",
  printFullName: function (firstname, lastname) {
    console. log (this.firstname + " " + this.lastname)
  }
}

let name2 = {
  firstname: "Sachin",
  lastname: "Tendulkar"
}
// Print firstname and lastname of name2 object using name1 printFullName
// function without modifing existing objects or creating new object. 
```

**Hint:** You need to use call and bind functions here.

After grinding on JS for around 20 minutes, we moved to ReactJS, and he asked about Lifecycle methods and virtual DOM. He asked me about typescript as I had some experience with typescript language. He also told me they had migrated the groww project from javascript to typescript.

After nearly 50–60 minutes, we ended our call, and I was very excited and nervous about my interview result. I was going out for dinner when I got the mail from HR for my last round (Cultural Fit)

### Cultural Fit Interview
This was the easiest and a chill interview round in which the interviewer asked me about my college, location, and hobbies. He asked me some general questions like

1. Why do I want to join Groww?
2. What are my three most used applications, and what can I do to improve the user experience of the application?
3. What is one of my skills that I can teach in 5 minutes?

He asked me if I had any questions for him. So I asked about the work culture and technologies used in Groww. This round was about 30–35 minutes.

## Results

After 30 minutes of the cultural fit interview, I got a call from HR that I had cleared all the rounds, and I was selected 🥳

## ***Important Tips***
- Be confident, and try to keep a smile on your face while giving answers.
- Reach out to company employees about the interview process.
- Check out company blogs and history.
- Don't try to be over-smart and over confident while giving an interview.


Detailed interview process of Groww SDE Intern 2022