DEV Community: Mark Tony

Hooks in React

Mark Tony — Fri, 25 Sep 2026 13:26:39 +0000

What is a hook in React?
A Hook is just a function whose name starts with use, and it lets you tap into React's internals — state, context, refs, lifecycle timing, etc. — from a plain function component.

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

The Two Rules of Hooks

1. Only call Hooks at the top level — not inside loops, conditions, or nested functions. This ensures React calls them in the same order every render.
2. Only call Hooks from React function components or custom Hooks — not regular JavaScript functions.

Custom Hooks

You can also build your own Hooks by combining existing ones — this is how you extract and reuse stateful logic across components. A custom Hook is just a function that starts with use and calls other Hooks inside it.

Ultimately, Hooks are the bridge that let function components do everything class components could do — and more — with less code.

Introduction to React

Mark Tony — Thu, 24 Sep 2026 14:51:58 +0000

What is React?
React is a JavaScript library for building websites and apps. It was created by Meta (Facebook). Instead of writing one big messy page, you build small reusable pieces called components and snap them together.

function Welcome() {
return <h1> Hello, React </h1>;
}

Why Do We Use It?
Before React, developers had to manually update the webpage every time something changed — which got messy fast. React makes this easier:

Components – build once, reuse everywhere
Fast updates – React only changes the parts of the page that actually changed (instead of reloading everything)
Easy to read – you just describe what you want, React figures out how to do it.

Advantages

Reusable code — saves time
Fast performance
Huge community — easy to find help and tutorials
High demand — great skill for jobs
Works for web and mobile (React Native)

In Short
React helps you build websites faster, using small reusable pieces, with a huge community backing you up. That's why it's one of the most popular tools for beginners to learn.

JS - Array Methods

Mark Tony — Fri, 18 Sep 2026 05:21:12 +0000

An array method is simply a function that:

Is called on an array (using dot notation: array.methodName())
Does something with the array's elements
Returns a result — either a new array, a single value, or undefined

JavaScript Array Methods:

1. Adding / Removing Elements (mutate the array):

let Actors = ["Surya", "Vikram", "Karthi","Chillian", "Leo"]

1. push - Actors.push("Brad Fitt"); 

// add to the End -[ 'Surya', 'Vikram', 'Karthi', 'Chillian', 'Leo', 'Brad Fitt' ]

2.pop -  Actors.pop()  

// removes the last element - [ 'Surya', 'Vikram', 'Karthi', 'Chillian' ]

3.shift - Actors.shift() 

// removes the first element - [ 'Vikram', 'Karthi', 'Chillian', 'Leo' ]

4. unshift - Actors.unshift("Surya") 

// adds element at the beginning - ["Surya", "Vikram", "Karthi","Chillian", "Leo"]

5. splice - Actors.splice(1,1,"Rio") 

// removes one element index and adds Rio - [ 'Surya', 'Rio', 'Karthi', 'Chillian', 'Leo' ]

2. Copying / Extracting (do NOT mutate)

let Actors = ["Surya", "Vikram", "Karthi","Chillian", "Leo"]

1. slice- const sliced = Actors.slice(1,3); 

// portion copy [ 'Vikram', 'Karthi' ]

2. concat - const add =Actors.concat(["Chadwik", "Jordan"]); 

// joins array 

[
  'Surya',  'Vikram',
  'Karthi', 'Chillian',
  'Leo',    'Chadwik',
  'Jordan'
]

3. Searching / Checking

let Actors = ["Surya", "Vikram", "Karthi","Chillian", "Leo"]

1. indexof - console.log(Actors.indexOf("Leo")); 

// finds the position/index of value - 4

2.includes - console.log(Actors.find(x=> x = "Leo")); 

// checks whether the particular element is in the array - true

3.find - Actors.find(x => x.startsWith("K")) 

// The first match as a value (not index) -  Karthi

4. Looping / Transforming (very important, used constantly)

let Actors = ["Surya", "Vikram", "Karthi","Chillian", "Leo"]

1. forEach - Actors.forEach(Actors => console.log(Actors));

// Just to loop and do something (no new array)
Surya
Vikram
Karthi
Chillian
Leo

2.map - It runs a function on every element, and returns a new array with the results (same length as original).

const upper = Actors.map(Actors => Actors.toUpperCase());
console.log(upper);

[ 'SURYA', 'VIKRAM', 'KARTHI', 'CHILLIAN', 'LEO' ]

3. filter - filter() goes through every element and keeps only the ones where your function returns true. It builds a new array with just the matches — the original array stays unchanged, same rule as slice(), map(), and concat().

const longNames= Actors.filter(x=> x.length >3);
console.log(longNames);

[ 'Surya', 'Vikram', 'Karthi', 'Chillian' ]

const endwith = Actors.filter(x=> x.endsWith("o"))
console.log(endwith);

[ 'Leo' ]


4. reduce - reduce() goes through every element and combines them all into a single value (not an array). You control what that final value looks like. 

const joined = Actors.reduce((acc,ce) => acc + " " + ce, "")
console.log(joined);

 Surya Vikram Karthi Chillian Leo

5. Sorting / Reversing (mutate the array)

let Actors = ["Surya", "Vikram", "Karthi","Chillian", "Leo"]

1. Sort: (default: sorts as strings!)
Actors.sort()
console.log(Actors);

[ 'Chillian', 'Karthi', 'Leo', 'Surya', 'Vikram' ]

let arr = [3, 1, 2];
arr.sort((a,b) => a - b);  // → [1,2,3]  (correct numeric sort)

2. reverse - reversing the index of the array.
Actors.reverse()
console.log(Actors);

[ 'Leo', 'Chillian', 'Karthi', 'Vikram', 'Surya' ]

6. Joining / Converting

let Actors = ["Surya", "Vikram", "Karthi","Chillian", "Leo"]

1.join - const join = Actors.join("-")
console.log(join);

Surya-Vikram-Karthi-Chillian-Leo

2.tostring - console.log(Actors.toString());

"Surya,Vikram,Karthi,Chillian,Leo"

JS - Closures

Mark Tony — Thu, 10 Sep 2026 05:50:59 +0000

Closures in JavaScript is when a function "remembers" the variable from the place where it was created, even after that outer scope has finished running.

function outer() {
  let count = 0; // variable in outer's scope

  function inner() {
    count++;
    console.log(count);
  }

  return inner;
}

const counter = outer();
counter(); // 1
counter(); // 2
counter(); // 3

Here's what's happening:

outer() runs, creates a variable count, and defines inner().
outer() returns inner, and its execution finishes.
Normally, you'd expect count to be gone once outer returns — its scope is done.
But inner still has access to count, because it "closed over" that variable when it was created.

Each call to counter() doesn't reset count to 0 — it keeps incrementing the same count variable, tucked away inside the closure.

Why this happens

JavaScript functions retain a reference to the lexical scope (the scope where they were textually defined), not just at creation but for their entire lifetime. So inner carries a link back to outer's variable environment wherever it goes.

JS - Promise

Mark Tony — Wed, 09 Sep 2026 05:31:59 +0000

Promise Object

Promise is an object that holds an eventual result of an asynchronous operation.
Promises used to avoid nested callbacks (Callback Hell).
It makes readablilty and debuging easy.

Promise is like a promise statement made to a person that someone will fulfill what they have promised

const result = new Promise((resolve, reject) => {
  // async work happens here
});

Promise has three states

Pending (Initial Stage)
Fulfilled
Rejected

Pending (Initial Stage)
It is the initial stage indicating that the operation is being done.

Fulfilled:
It represents the success of the operation.

Rejected:
It indicates the error in the input or gives the failure output.

Example

if (age >= 18) {
  resolve("You are eligible to vote");   // Fulfilled path
} else {
  reject("You are not eligible to vote"); // Rejected path
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1> Promises</h1>
    <p id="para"> </p>
    <p id="error" style="color: red;"></p>
    <script>
 const result = new  Promise ((resolve, reject) => {
    const age = 28;
    setTimeout (() => {
     if (age >= 18) {
        resolve ("You are eligible to vote");
        } else {
            reject ("You are not eligible to vote");
        }
    },2000 )
 } )
  .then((data) => {
    console.log(data);
    document.getElementById("para").textContent = data;

 })
 .catch ( (error) => {
    console.error(error);
    document.getElementById("error").textContent = error;


 } );
  </script>
</body>
</html>

The promise takes a function called executor. It runs immediately once the promise created.This executor receives two functions, resolve and reject.

resolve() and reject()

resolve(value) — marks the Promise as fulfilled, and value gets passed to .then().
reject(reason) — marks the Promise as rejected, and reason gets passed to .catch().

.then() and .catch()

Once a Promise settles, you get the outcome:

.then(callback) — runs if the Promise resolved; callback receives the resolved value.
.catch(callback) — runs if the Promise rejected; callback receives the rejection reason.

Promise chaining

.then() and .catch() are methods called on the Promise object, and each returns a new Promise, so you can chain more .then()s after it if needed.

JS - Callback Function

Mark Tony — Mon, 07 Sep 2026 14:27:06 +0000

1. First, what is a function?

A function is simply a block of code that we can call when we need it.

function greet() {
    console.log("Hello Tony");
}

greet();

Output:
Hello Tony

2. So what is a callback?

A callback function is a function that we give to another function as an argument, so that the other function can call it later. A callback function is intended to be executed later.

function greet() {
    console.log("Hello!");
}

function execute(callback) {
    callback();
}

execute(greet);

We are passing the greet function into execute.

Inside execute:

function execute(callback) {
    callback();
}

callback now contains the greet function. so the callback runs the greet function.

Output:
"Hello"

There are two types of callback functions:

Synchronized Task Callback
Asynchronized Task Callback

In Synchronized Task, The function executes the code line by line in an order.

const hotel = (serveOrder) => {
    console.log("vegetable cutting");
    console.log("vessel washing");
    console.log("cooking");
    console.log("Serve food");
    serveOrder();
    console.log("Clean Table");

};

const eatBriyani = () => {
 console.log("Eating");
};

hotel(eatBriyani);

Output:
vegetable cutting
vessel washing
cooking
Serve food
Eating
Clean Table

In the case of Asynchronized Task, the Particular assigned task will be processed parallelly with the other synchronized task.

const hotel = (serveOrder) => {
  console.log("Vegitable cutting");
  console.log("Vessel washing");
  console.log("Cooking");
  console.log("serve food");

  setTimeout(() => {
    console.log("Timer");
  }, 2000);
  serveOrder();
};

const eatBriyani = () => {
  console.log("Eating");
};

hotel(eatBriyani);

Output:
Vegitable cutting
Vessel washing
Cooking
serve food
Eating
(The below output is executed after 2seconds)
Timer

Asynchronous Operations:
Callbacks are essential for handling non-blocking tasks like fetching data from an API, reading files, or using setTimeout timers, ensuring subsequent code runs only after the background task finishes

JS - Functions

Mark Tony — Mon, 07 Sep 2026 06:03:20 +0000

Function
Functions are reuseable code blocks that are used for particular task. It is executed when the particular function is called. Functions are fundamental in all programming languages.

A function can be created with the function keyword, a name, and parentheses.
The code to run is written inside curly brackets.

  <script>         
     function sayHello() {
    return "Hello World";

}
let greeting = sayHello();   

console.log(sayHello());


      </script>

A function can be used many times,

function add(a, b) {
  return a + b;
}

let sum1 = add(5, 5);
let sum2 = add(50, 50);

Local Variables

Variables declared within a JavaScript function, become LOCAL to the function.
Local variables can only be accessed from within the function.

// code here can NOT use ActorName

function myFunction() {
  let ActorName = "Surya";
  // code here CAN use ActorName
}

// code here can NOT use ActorName

Local variables are created when a function starts, and deleted when the function is completed.

Function Input and Output

Parameters - some values are sent to the function
Arguments - some values are received by the function
Function Code - some work is done inside the function
Return Output - some value is returned from the function

The working flow of the Function:

1
The function returns the value "Hello world". But it will not run the code.

function sayHello() {
  return "Hello World";
}

2
The code below will call the function; but it will not use the result.

function sayHello() {
  return "Hello World";
}

sayHello();

3
When a function returns a value, you can store the value in a variable.

function sayHello() {
  return "Hello World";
}

let greeting = sayHello();

4
Display the result

function sayHello() {
  return "Hello World";
}

console.log(sayHello());

JS - Arrays

Mark Tony — Thu, 03 Sep 2026 09:50:36 +0000

Array

An Array is an object type designed for storing data collections. It contains list of values, known as elements.
Array elements are ordered based on their index.
The first element is at index 0, the second at index 1, and so on.
An Array can store any kind of data type (String, Number, Boolean, Objects, Null, Function)

Why Use Arrays?
An array can store multiple values under a single name,and you can access the values by referring to an index number.

Creating an array:

const cars = ["Saab", "Volvo", "BMW"];

Accessing Array Elements:

You access an array element by referring to the index number

const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];

The output will be Saab

JS - Loops

Mark Tony — Tue, 01 Sep 2026 04:51:44 +0000

What is loop?
JavaScript loops are control structures that are used for executing a block of code repeatedly as long as the specified condition evaluates true.

Various types of loops

1.for loop
The most common loop, used when the number of iterations is known. It initializes a variable, checks a condition, and updates the variable in a single line.

 let star= "";
for (let count = 0; count< 5; count++) {
 star = star + "1 "
 console.log(star);
 }

2. while loop
It executes a block of code as long as a condition is true, checking the condition before each iteration. It is ideal when the number of iterations is unknown.

 let count = 0 
 while (count<5){
    console.log(3);

    count = count +1;

 }

3. do...while loop
It is similar to the while loop, but it guarantees that the code block executes at least once before checking the condition.

do {
    console.log(3);
    count = count + 1;    

 } while (6 < 5);

JS - If, else and else if Statements

Mark Tony — Thu, 27 Aug 2026 09:51:34 +0000

Conditional Statements

JavaScript uses the conditional Statements (if,else and else if) to decide the flow of the code based on the validation of statements. The statements are the boolean values (True/False).

1. if Statement:
The if statement executes the block of code when the condition is true. Otherwise it skips it.

function calculate (){
  const leftOperand = Number (previousValue);
  const rightOperand = Number (currentValue);
  if(operator == "+") {
    currentValue = leftOperand + rightOperand;
      }

This if statement will execute the block of code, when the operator is + addition.

2. if else Statement:
The else statement will be executed when the if statement is false and the block of code of the else statement takes up the flow.

    <script>
let mark = 80

if(mark > 90 && mark <= 100){
  console.log("Grade O");

}</script>

When the condition is true, the output will be

you are eligible to vote

when the conditon is false, the output will be

you are not eligible to vote

3. else if statement:

The else if statement is used to check more than one conditions. It executes the different block of code in a chain pattern.

let mark = 91

if(mark > 90 && mark <= 100){
  console.log("Grade O");

} else if (mark > 80) {
  console.log("Grade A");
} else if (mark > 70) {
  console.log("Grade B");
} else if ( mark < 40) {
  console.log("you are fail");  
} else {
  console.log("Invalid mark Entered, Please enter the mark within 100"); 
}

Here the else if statement is used to test the different block of code for a grade validation function. The flow of code is decided based on the input.

CSS Selectors

Mark Tony — Wed, 26 Aug 2026 05:40:40 +0000

CSS selectors are patterns used to select HTML elements so we can apply CSS styles to them.
CSS selectors are patterns used to select HTML elements so that CSS styles can be applied to them.

1. Element Selector

An element selector selects all HTML elements of a particular type.

p {
  color: blue;
}

This selects all <p> elements.

2. Class Selector

A class selector selects elements using their class attribute.

.box {
  color: red;
}

It starts with a dot (.).

3. ID Selector

An ID selector selects an element using its id attribute.

#header {
  background-color: blue;
}

It starts with a hash (#)An ID is normally unique on a page.

4. Attribute Selector

An attribute selector selects elements based on their attributes or attribute values.

input[type="text"] {
  border: 1px solid black;
}

This selects text input elements.

5. Universal Selector

The universal selector (*) selects all elements on the page.

* {
  margin: 0;
  padding: 0;
}

6. Group Selector

A group selector allows you to apply the same style to multiple selectors.

h1, h2, p {
  color: green;
}

7. Descendant Selector

A descendant selector selects elements that are inside another element.

div p {
  color: red;
}

This selects all <p>elements inside a <div>.

8. Child Selector

A child selector (>) selects only the direct children of an element.

div > p {
  color: blue;
}

9. Adjacent Sibling Selector

The adjacent sibling selector (+) selects the element immediately following another element.

h1 + p {
  color: red;
}

10. General Sibling Selector

The general sibling selector (~) selects all matching siblings that come after an element.

h1 ~ p {
  color: green;
}

11. Nesting Selector

The nesting selector (&) is used to show a relationship between a parent selector and its nested rules.

.box {
  color: black;

  & p {
    color: red;
  }
}

12. Pseudo-class Selector

A pseudo-class selects an element based on its state or position.

button:hover {
  background-color: blue;
}

Common Examples:
:hover
:focus
:first-child
:last-child
:nth-child()

13. Pseudo-element Selector

A pseudo-element styles a specific part of an element.

p::first-letter {
  font-size: 30px;
}

Common Examples:
::before
::after
::first-letter
::first-line

Data Types in JavaScript

Mark Tony — Tue, 25 Aug 2026 09:59:40 +0000

A data type tells the computer what kind of data a variable stores and what operations can be done with it.

For example:

10 → number
"Hello" → text
true → boolean

In simple words, a data type defines what kind of value a variable can hold.

There are Two types of Data types used in JavaScript:

Primitive Data Type
Non- Primitive Data Type

Primitive Data Type:
It can hold only single value. For example:
let Name= "Tony"

A memory will be created on the key "Name" and the value "Tony" will be stored. The Primitive Data Types are immutable.

If I give another value in the same key "Name" and give the value "Parthipan"

Name="Parthipan"

A new memory will be created and the value "Parthipan" will be stored.

Non- Primitive Data Type
Unlike Primitive,It can Store multiple values. It is called an Object. The object contains the Arrays and Functions.

  let userDetails = {
      name: "Mark Tony",
      email: "tony@gmail.com",
      location: "chennai",
      welcome: function (a,b){
        return a+b;
      },
    };

Various Primitive data types:

String: A string is a sequence of text or characters written inside single quotes (' ') or double quotes (" ").
Number: A number represents both integer and decimal (floating-point) values.
BigInt: BigInt is used to represent very large integers accurately beyond the safe range of the Number type.
Boolean: A Boolean represents a logical value that can be either true or false.
Null: Null represents the intentional absence of a value.
Undefined: Undefined means a variable has been declared but no value has been assigned to it.
Symbol: A Symbol is a unique and immutable primitive value, commonly used to create unique object property keys.

Easy way to remember

String → Text
Number → Numbers
BigInt → Very large integers
Boolean → True/False
Null → Intentional empty value
Undefined → No value assigned
Symbol → Unique value