When you run code in Javascript it operates within an **Execution Context**. The execution Context is responsible for keeping track of what is going on: figuring out **which variables and functions are accesible** at a given point in time, determining the **value of this**, applying **hoisting rules** and setting up the **scope chain**.

## Types of Execution Context
 
1. Global Execution Context:
     - Is Created when Javascript engine starts executing the code
     - It sets up the global this (In the browser refers to the window object)
     -  There's only one global context
 
2. Function Execution Context:
     -  Created every time a function is invoked
     -  Each functuion has its own execution context (separate from the global context)
     -  A new execution context is created for each call, even if it's the same function  

## Phases of Execution Context:

1. **Creation Phase**:
    - Creation of the **Variable Environment**
    - Creation of The **Lexical Environment**
    - Establishing the **Scope Chain**
    - Determination of **this Binding**
    - **Hoisting**

2. **Execution Phase**
   - This phase runs the code line by line: Variables are assignet to their actual values, function are executed (if they are called)
    


## Lexical environment and Scope Chain:

Using the **lexical environment** javascript knows where a piece of code was **declared** (this is known as lexical scoping).
Each execution context's lexical environment gets **linked to its outer environment**, forming the **scope chain**. 
Javascript uses the scope chain to determine the variable accessibility (it starts from the current context and works its way to the global context)


         
 ```js
const globalVariable = "Global Variable";

function a() {
  return globalVariable; // 'a' accesses variable from the global lexical environment
}

function b() {
  connst bVariable = "Inside b function variable";

  function c() {
    return bVariable+ " and " + globalVariable; // 'c' accesses variable from 'b's lexical environment
  }

  return c();
}

console.log(a()); // Outputs: Global Variable
console.log(b()); // Outputs: "Inside b function variable and Global Variable"

```

**Explanation**:  a accesses a variable declared in the **global lexical environment** , c accesses a variable declared in the **lexical environment of b and global lexical environment**. The scope chain links c's environment to b's then to global

**Types Of Scopes:**

1. Global Scope:
A variable declared **outside all functions or blocks** is in the **global scope** and accessible anywhere in your code.
```js
const globalVariable = "I'm in global scope";

function showGlobal() {
  console.log(globalVariable); // Accessible here
}

showGlobal(); // Output: I'm in global scope
```
2. Function Scope: 
A variable declared **inside a function** using var, let, or const is only accessible ** within that function**.
```js
function functionScopeExample() {
  const a = "Function Scope";
  console.log(a); // Works here
}

functionScopeExample();

console.log(a); // Error: a is not defined

```

3. Block scope: 
 Variables declared inside a block (e.g., an if, for, or {} block) using let or const are only accessible within that block. Variables declared with var aren't block scoped they are function scoped.
 
 ```js
{
  let blockLet = "I'm a block-scoped let variable";
  const blockConst = "I'm a block-scoped const variable";
  var blockVar = "I'm declared with var inside a block";
  console.log(blockLet);   // Accessible here
  console.log(blockConst); // Accessible here
}

console.log(blockLet);   //  Error: blockLet is not defined
console.log(blockConst); //  Error: blockConst is not defined
console.log(blockVar); //  Still accessible here — var is not block-scoped



```
 
## Variable environment:

   During the creation phase of an execution context, the variable enviroment  is responsable for creating memory space   for all the variables and functions declared in that scope applying hoisting. Hoisting allows certain declarations to be accesed before their line of code is actually reached.  

 Example:
 
 ```js

function one(){
var variable;
}

function two(){
var variable = true;
one(); // new Execution Context
}

var variable = false

two();

// Execution Contexts:
// one --> 'variable' is undefined in the 'one' functions local scope
//two() -->'variable' is true in the two functions local scope
//global() --> 'variable' is false in the global scope

// Each execution context has its own **Variable Environment**, the same variable can exist in all three without conflict.
```

## Hoisting

Hoisting is the behaviour of "moving" the variables or function declarations to the top of their respective environments during the creation phase. Variables declared with **var** are **partially** **hoisted**, **functions are fully hoisted**, variables declared with **let and const**  are **hoisted but not initialized** (They reimain in a Temporal Dead Zone and accessing them before declaration causes a RefrenceError) . 

Example2:
```js
console.log(partialyHoisted);
console.log(fullyHoisted);

var partialyHoisted = "partialyHoisted";

function fullyHoisted(){
   console.log("Fully Hoisted");
}

// Logs: 
// undefined
// "Fully hoisted"
```

## This binding

**What is  _this_  ?**

**This** is the object that the function is a property of

Example:

```js

function example() {
  console.log(this); // Global object
}



const user = {
  name: "Marko",
  example() {
    console.log(this);
  }
};

user.example(); 

// {
//   name: "Marko",
//   example: ƒ example()
//  }

```

JavaScript Execution Context, Scope, Hoisting, this keyword

How Javascript creates and manages execution context

Javascript

JavaScript Execution Context, Scope, Hoisting, and this

JavaScript's object-oriented behavior is built on the **prototype chain**. When an object is created via a constructor function, all instances inherit shared methods and properties from the constructor’s **.prototype**.

```js
function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function () {
  console.log(`${this.name} makes a noise.`);
};
  
const dog = new Animal("Rex");
dog.speak(); // Rex makes a noise.

```

Behind the scenes:
- dog. __ proto __ points to Animal.prototype
- That’s how dog can access speak() even though it’s not directly on the dog object

When you use the new keyword, JavaScript performs these steps:

1. Creates a new empty object
2. Sets its internal [[Prototype]] (i.e., __proto__) to the constructor's .prototype
3. Calls the constructor function with this bound to the new object
4. Returns the new object

```js
const rex = new Animal("Rex");

//equivalent to:

const rex = {};
rex.__proto__ = Animal.prototype;
Animal.call(rex, "Rex");
```

The class syntax introduced in ES6 provides a cleaner, more familiar structure for OOP, but it's just syntactic sugar—the underlying prototype-based inheritance model remains unchanged.

```js
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}
```

This modern syntax feels more like traditional OOP, but under the hood:

- It still creates a constructor function
- Methods are still placed on the prototype
- Inheritance still uses the prototype chain


OOP in Javascript: Classes, prototypes and constructors

JavaScript’s object-oriented model. How class syntax simplifies, but doesn't replace, prototype-based inheritance. What happens under the hood with prototype, __proto__, and new.

OOP in JavaScript

## What is a single-threaded language?

A **shingle-threaded** language is one that can execute only **one task at a time**. It executes the tasks one after the other, and each task has to finish before the next task starts. There is only one call stack, no parallel execution like in multhithreaded languages such as Java and C++

## How works the Call Stack in a single-threaded language?
 
The **Javascript call stack** works on a **"last in, first out"**. Only one function runs at a time. When a function finishes, it's removed of the stack. If something takes too long to finish, it blocks the stack, which means nothing else can run until it's done. For more information about how the call stack works, you can see my [post](http://localhost:3000/blog/article/call-stack-and-memory-heap) about the call stack.

## How can we prevent long running tasks from blocking our code?

There are several approaches to **prevent long-running tasks from blocking our code**. Some of these include using **asynchronous programming** techniques, such as Web API's callbacks, promises, async/await or **web workers**.

Web workers don't block our code because they run on a **separate thread** in the browser.

Asynchronous programming doesn't block our code because it uses the **event loop**,

## How does the event loop work?

1. The event loop starts by executing the code that is on the call stack. When it encounters asynchronous operations, it sends them to the Web Api, which is responsible to place them in the right queue. once the stack is empty (all synchronous tasks are completed), it checks the queues (callback queue, microtask queue )  to decide what will execute next. 
2.  Microtask queue has higher priority than the callback queue. The event loop will process all microtasks such as (promises resolutions, .then . catch) before moving to the callback queue.
4.  After microtask queue is emptied, the event loop will start procesing the calback queue (callbacks from web Api such as setTimeout, setInterval, event listeners)
5.  Will repeat this cycle over and over again
 
## Example:

```js
console.log('1: Start');

setTimeout(() => {
  console.log('2: setTimeout callback');
}, 0);

Promise.resolve().then(() => {
  console.log('3: Promise resolved');
});

console.log('4: End');

```

## The output will be:

1. Start
2. End
3. Promise resolved
4. setTimeout callback



The Single-Threaded Nature of Javascript

Understand how Javascript, being single-threaded, handles asynchronous operations using the call stack and event loop

JavaScript Internals

When you run Javascript code it's processed by a javascript engine. At a high level, the engine performs two key tasks:

-    **Manages Execution(Call Stack)**: it determines what piece of code to run and when
-    **Manages Memory(Memory Heap):** It allocates memory for variables and objects, and cleans up memory that is no longer needed.
 
## What is the Call Stack?
 
The **Call Stack** is a data structure where the JavaScript engine keeps track of where your code is during execution. Every time a function is called, it gets **pushed** onto the stack. Once a function finishes executing, it’s **popped** off the stack. When the stack is empty, it indicates that the engine has finished executing the script. You can think of the call stack like a stack of plates where you can only remove the plate on top (first in,last out). Newer function calls are placed on top, while older ones stay lower until they’re done. If functions keep calling each other endlessly (like a recursive function without an exit condition), a **"Stack Overflow"** error occurs because the stack grows too large for the engine to manage.

## How the Call Stack Works? (Example) 

```js
function secondFunction() {
  console.log('End of the stack');
}

function firstFunction() {
  secondFunction();
}

firstFunction();

```

## Execution step by step:

1.  firstFunction() is called → pushed onto the stack.
2.  Inside firstFunction, secondFunction() is called → pushed onto the stack.
3.  Inside secondFunction, console.log('End of the stack') is called → pushed onto the stack.
4.  console.log('End of the stack') executes and returns → popped off the stack.
5.  secondFunction() finishes → popped off the stack.
6.  sayHi() finishes → popped off the stack.

## What is the Memory Heap?

The **Memory Heap** is a large region of memory where objects, functions, and variables are stored. Whenever you create objects, arrays, or even functions, they are allocated in the memory heap (primitive constants are stored in the call stack or in the global execution context -ex: window in the browser-).

## Example of Memory Allocation:

```js

const person = {
  name: 'Marko',
  gender: 'male'
};
```

When this code runs:

- The object  **{name: 'Marko', gender: 'male'}** is stored in the heap.
- The variable **person** holds a reference (a pointer) to that location in memory.

## Example of Call Stack and Memory Heap usage:


```js

function createProfile(name, gender) {
  return {
    name: name,
    gender: gender
  };
}

const userProfile = createProfile('Marko', 'male');

console.log(userProfile);

```

## What happens:

- **createProfile('Marko', 'male')** is called → pushed onto the **call stack**.
- a new object is created in the **memory heap** (the function is still on the stack)
- **createProfile** returns a reference to the object -> poped of the **call stack**
- reference is stored in the **userProfile** variable
- **console.log(userProfile)**  logs the object, accessing it via the reference.


## How the Call Stack and Memory Heap Interact

- The **call stack** manages where you are in the code and what function is currently running (keeps track of function calls)
- The **memory** heap manages where your data lives in memory (stores actual data during function calls)


Call Stack and Memory Heap

How Javascript manages execution and memory, focusing on the call stack and memory heap.

Interfaces are used to create reusable, modular types that describe the shape of objects. They serve almost the exact same purposes as type aliases with a slightly different syntax.

```ts
// Interface
interface Person = {
name: string
age: number
}

// Use interface in the annotation
const greetPerson = (person: Person) => {
    return `Hello, ${person.name}! You are ${person.age} years old.`;
}
```

 **Reopening Interfaces:** you can declare the same interface more than once, and TypeScript will merge all declarations together.
 
 ```ts
// Interface
interface Person = {
name: string;
}

interface Person = {
age: number;
}

const person: Person = {
  name: "Valentin",
  age: 100
};

```

**Extending interfaces** allows one interface to inherit the properties of another.

 ```ts
// Interface
interface Person = {
name: string;
age: number;
}


interface Employee  extends Person {
email: string
}

const person: Employee = {
  name: "Valentin",
  age: 100,
  email: valentin@gmail.com
};

```

**Multiple Inheritance**: typeScript lets an interface extend multiple interfaces , combining all their properties. 


 ```ts

interface Person = {
name: string;
age: number;
}


interface Employee   {
readonly id: number;
email: string
}

interface Engineer extends Person,Employee {
 level: string.
 languages: string[]
}

const person: Engineer = {
  id: 12345,
  name: "Valentin",
  age: 100,
  email: valentin@gmail.com,
  level: "Senior",
  languages: ["Javascript", "Typescript"]
};

```


Typescript Interfaces

Typescript Interfaces, reopening Interfaces, extending interfaces, multiple inheritance

TypeScript

Interfaces in Typescript

**Type aliases** let you create new names for types. This makes your code easier to read and reuse.


```ts
// Type alias
type Person = {
name:string
age:number
}

// Use type alias in the annotation
const greetPerson = (person: Person) => {
    return `Hello, ${person.name}! You are ${person.age} years old.`;
}
```

**Union Types** allow us to give a value a few different possible types. We can create a union type by using the single | (pipe character) to separate the types we want to include

```ts
function formatInput(input: string | number) {
  if (typeof input === "number") {
    return input.toFixed(2);
  } else {
    return input.toUpperCase();
  }
}
```
**Intersection Types** combine multiple types into one that has all properties of the intersected types.

```ts

type Circle ={
radius: number;
}

type Colored = {
color: string;
}

type ColoredCircle = Circle & Colored;

const circleExample: ColoredCircle = {
color: "red",
radius:  5
}

```

A **literal type** allows a variable to be assigned **only one specific value**.  A **union of literal types** is a type that allows a value to be **one of several exact, predefined values**, enhancing type safety by restricting inputs to a specific set of possibilities.

```ts

const getTrafficLight = (trafficLight: "red" | "yellow" | "green") => {
     return `The traffic light is : ${trafficLight}`
}

getTrafficLight("red");     //  Works
getTrafficLight("yellow");  //  Works
getTrafficLight("green");   //  Works

getTrafficLight("blue");    //  Error

```


Type Aliases, Union, Literal, and Intersection Types in TypeScript

Define custom types using type aliases, combine types with unions, and merge types with intersections to write flexible, reusable TypeScript code.

TypeScript Advanced Types

TypeScript is a superset of JavaScript that adds static typing. One of its core features is **type annotations** — a way to explicitly define the types of variables, function parameters, return values, and more. Type annotations enhance code readability, catch errors at compile time, and provide better tooling support. 

Type annotations let you specify the type of a variable or function component. This helps TypeScript understand the expected structure of your code and flag any inconsistencies.

```ts
const username: string = "Alice";
const age: number = 30;
const isLoggedIn: boolean = true;
```
Here, \`username\` must always be a string, \`age\` a number, and \`isLoggedIn\` a boolean.

TypeScript doesn’t require you to annotate everything thanks to type inference. Its built-in ability to automatically determine a variable’s type based on the value it’s assigned.


```ts
const username = "Alice";       // inferred as string
const age = 30;                 // inferred as number
const isLoggedIn = true;        // inferred as boolean
```
Writing const username: string = "Alice" is correct, but unnecessary. And in larger codebases, this kind of repetition can actually clutter your code.

You can annotate both parameters and return types in functions.

```ts
function greet(name: string): string {
  return `Hello, ${name}!`;
}

```

Without proper types, this function could be misused or produce unexpected behavior. Type annotations also work with optional parameters using \`?\`, and default values.

```ts
function log(
  message: string,          // required
  userId?: number,          // optional parameter
  level: string = "info"    // parameter with default value
): void {
  console.log(`[${userId ?? "anonymous"}] (${level}): ${message}`);
}
```

Complex structures like arrays and objects can also be annotated:

```ts
const user: { id: number; name: string } = {
  id: 1,
  name: "Alice"
};

const scores: number[] = [85, 90, 92];

```

 Special Built-in Types: **void**, **never**,  **any**, and **unknown**



Use **void** to indicate a function does **not return a value**.

```ts
function logMessage(message: string): void {
  console.log(message);
}
```

This helps TypeScript understand that return values are irrelevant here.


Use **never** when a function **never returns** — either because it throws an error or runs infinitely.

```ts
function throwError(message: string): never {
  throw new Error(message);
}

function infiniteLoop(): never {
  while (true) {}
}
```

**never** tells TypeScript that this code path will not continue normally.



The **any** type disables type checking for a variable — it's like opting out of TypeScript's safety.

```ts
let randomValue: any = 42;
randomValue = "Now it's a string";
randomValue = true;
```

Use **any** **minimally**, as it removes the benefits of TypeScript’s type system.

Prefer using **unknown** if you want type safety with flexibility. The **unknown** type is safer than **any**. It represents a value that could be anything, but you must perform type checks before using it.

```ts
let uncertainValue: unknown = 10;
uncertainValue = "hello";

// TypeScript error if you try to use it directly:
// console.log(uncertainValue.toUpperCase()); // Error!

if (typeof uncertainValue === "string") {
  // Now TypeScript knows it's a string
  console.log(uncertainValue.toUpperCase());
}
```

## Benefits of Type Annotations

- **Improved readability**: Makes code self-documenting.
- **Better IDE support**: Autocompletion and inline documentation.
- **Early error detection**: Catch mistakes before runtime.
- **Easier refactoring**: Code changes are safer and more predictable.

Use **type annotations** where they **add clarity** or are **required**, but rely on **inference** to reduce repetition for basic assignments. 


Type Annotations and Inference in TypeScript

How type annotations improve code clarity, safety, and developer experience in TypeScript.

TypeScript Basics

A **tuple** is a typed array with a fixed length and known element types.

```ts
let user: [string, number];

user = ["Alice", 30]; //  OK
// user = [30, "Alice"]; //  Error: wrong order/types

```

**Enums** let you define a set of **named values**. These values can be numeric or string-based.

```ts
// numeric enums
enum OrderStatus {
  PENDING, // 0
  SHIPED,   // 1
  DELIVERED,  // 2
  RETURNED,  // 3
}

const status = OrderStatus.DELIVERED;

function isDelivered (status:OrderStatus ){
     return status === OrderStatus.DELIVERED
}

isDelivered(OrderStatus.RETURNED)

// string enums
enum Direction {
  Left = "LEFT",
  Right = "RIGHT",
  Up = "UP",
  Down = "DOWN"
}

const move = (dir: Direction) => {
  console.log("Moving:", dir);
};

move(Direction.Left);
```


Tuples and Enums in TypeScript

How to use tuples for fixed-length typed arrays and enums for named constants in TypeScript

TypeScript Intermediate Features

##  Live Example 

Open the interactive demo to see how `useEffect` behaves during mounting, updating, and unmounting. 
Change articles, trigger autosaves, and unmount the component to observe effect cleanup in real time.
 [Open the live example](https://www.valentinmarko.com/examples/hooks/useeffect)

## What is **useEffect** ?

**useEffect** is a built in React hook that lets you perform side effects in function components, such as fetching data, subscribing to events, or interacting with the DOM.Tasks that occur outside of React’s render cycle.

### **A side effect in React is anything that occurs outside the normal render cycle, such as:**
- Fetching or sending data over the network
- Setting timers or intervals
- Interacting with browser APIs 
- Subscribing or unsubscribing from events

### How **useEffect** behaves:
- **Mounting Phase:** runs once after first render. Cleanup does not run yet.
- **Updating Phase:** runs whenever a dependency changes. Cleanup from the previous effect runs first.
-  **Unmounting Phase:**  cleanup runs when the dependency changes or before the component is removed.

###  **useEffect**  Lifecycle:

```jsx
useEffect(() => {
  // Runs AFTER the component is rendered (painted)
  // Good for: fetching data, subscriptions, timers, DOM updates

  return () => {
    // Runs BEFORE:
    // Component is removed (unmount)
    //  Effect is re-run due to dependency change
    // Good for: clearing timers, unsubscribing, cancelling fetches
  };
}, [dependencies]);
```



### **Example that fetches articles, autosaves, and manages cleanup when components unmount.**

**The Component**

We have an **ArticleViewer** component that:
1. Fetches article data when articleId changes
2. Autosaves every 2 seconds
3. Cleans up timers when the component unmounts


```jsx
function ArticleViewer({ articleId, onUnmount, addLog }) {
  const [article, setArticle] = useState(null);
  const [loading, setLoading] = useState(true);
  const [autosaveCount, setAutosaveCount] = useState(0);

  // Fetch article when articleId changes
  useEffect(() => {
    setLoading(true);
    addLog(`🔄 Fetching article ${articleId}...`);

    const fetchArticle = async () => {
      await new Promise(res => setTimeout(res, 1000));
      setArticle({ id: articleId, title: `Article ${articleId}`, content: `This is the content of article ${articleId}.` });
      setLoading(false);
      addLog(`✅ Article ${articleId} loaded.`);
    };

    fetchArticle();
  }, [articleId, addLog]);

  // Autosave every 2s
  useEffect(() => {
    const interval = setInterval(() => {
      setAutosaveCount(c => c + 1);
      addLog(`💾 Autosaved article ${articleId}`);
    }, 2000);

    return () => {
      clearInterval(interval);
      setAutosaveCount(0);
      addLog(`🛑 Cleared autosave interval for article ${articleId}`);
    };
  }, [articleId, addLog]);

  // Cleanup on unmount
  useEffect(() => {
    return () => {
      addLog(`❌ Viewer component for article ${articleId} unmounted.`);
      if (onUnmount) onUnmount();
    };
  }, [articleId, addLog, onUnmount]);

  return (
    <Paper elevation={3} sx={{ padding: 4, mt: 4 }}>
      <Typography variant="h5" gutterBottom>Article Viewer</Typography>
      {loading ? (
        <Box display="flex" alignItems="center" gap={2}>
          <CircularProgress size={24} />
          <Typography>Loading article...</Typography>
        </Box>
      ) : (
        <Box>
          <Typography variant="h6">{article.title}</Typography>
          <Typography>{article.content}</Typography>
          <Typography variant="body2">Autosaved {autosaveCount} time{autosaveCount !== 1 ? 's' : ''}</Typography>
        </Box>
      )}
    </Paper>
  );
}

```



The **ExamplesUseEffect** component manages:

1. Changing article IDs
2. Mounting/unmounting the viewer
3. Logging activity

```jsx
function ExamplesUseEffect() {
  const [articleId, setArticleId] = useState(1);
  const [showViewer, setShowViewer] = useState(true);
  const [status, setStatus] = useState("🟢 Viewer is active.");
  const [log, setLog] = useState(["🚀 Viewer mounted."]);

  const handleUnmount = useCallback(() => setStatus("🔴 Viewer was unmounted."), []);
  const addLog = useCallback(entry => setLog(prev => [...prev, entry]), []);

  return (
    <Box sx={{ p: 4 }}>
      <Typography variant="h4" gutterBottom>useEffect Lifecycle Example</Typography>
      <Typography variant="body2" sx={{ mb: 2 }}>{status}</Typography>

      <Stack direction="row" spacing={2} sx={{ mb: 2 }}>
        <Button variant="contained" onClick={() => setArticleId(prev => prev + 1)} disabled={!showViewer}>
          Load Next Article
        </Button>
        <Button variant="contained" onClick={() => setLog([])}>Clear logs</Button>
        <Button variant="outlined" color="secondary" onClick={() => {
          if (showViewer) setShowViewer(false);
          else { setShowViewer(true); setStatus("🟢 Viewer is active."); addLog("🚀 Viewer remounted."); }
        }}>
          {showViewer ? "Unmount Viewer" : "Mount Viewer"}
        </Button>
      </Stack>

      {showViewer ? (
        <ArticleViewer articleId={articleId} onUnmount={handleUnmount} addLog={addLog} />
      ) : (
        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>Viewer is not visible.</Typography>
      )}

      {/* Activity logs */}
      <Box mt={4}>
        <Typography variant="h6">📋 Activity Log:</Typography>
        <ul>
          {log.map((item, i) =>   (
          <li key={`${index}-${item}`}>
            <Typography variant="caption">
            {item}
            </Typography>
          </li>)}
        </ul>
      </Box>
    </Box>
  );
}

```


Managing SideEffects in React: useEffect hook

How useEffect hook manages side effects like component mounting, updating and unmounting. Helping you handle data fetching, subscriptions and cleanup

React

useEffect Hook in React

## Live Example (Try It First)

Click the link to explore how `useState` works with batching, closures, and functional updates.
Try clicking quickly and observe how the counter behaves in different scenarios. [Open the live example](https://www.valentinmarko.com/examples/hooks/usestate)

## What is **useState** ?

**useState** is a built in React hook that always you to add state to a functional component. It returns an array containing two values:
1. The current state value.
2. A function that allows you to update that state

Example:


```jsx
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

```

In this example:

- **count** is the current state value.
- **setCount** is the function used to update it.
- the component re-renders every time you call **setCount**.

## How does useState work?
When React renders your component for the first time, it initializes the state with the value you pass to **useState**. On subsequent renders, React preserves and returns the most recent state value, even if the component’s logic runs again.

Each time you update the state using the setter function , React triggers a re-render so your UI always reflects the latest state.

In React, state updates are **batched**. This means that react groups multiple setState calls (which happen during the same task and its microtask) togheter before performing a re-render. This batching helps improve performance by avoiding unnecessary renders.

So when batching happens, it’s recommended to use functional updates if the next state depends on the previous state. This ensures React uses the correct, most recent value.

Using state directly (can lead to incorrect results when batching)


```jsx

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
  // Both updates use the old value of count (0)
    setCount(count + 1);
    setCount(count + 1);
  };

  return (
    <div>
    {/* On click, count will only increase by 1 instead of 2 */}
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increase</button>
    </div>
  );
}
```

Because of batching, both updates use the same old value of count, so React only increases it by 1.

Using functional updates (uses the latest value each time)
```jsx
function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    // Each update receives the latest count value
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      {/* On click, count will correctly increase by 2 */}
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increase</button>
    </div>
  );
}
```
Here, React uses the most up-to-date value for each update, so the counter correctly increases by 2 after one click.

Incrementing inside setTimeout without functional updates:

```jsx
function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setTimeout(() => {
      setCount(count + 1); //  uses the 'count' from when Counter last rendered
    }, 1000);
  };

  return (
    <div>
      {/* Even if you click 5 times quickly (within the 1-second timer interval), 
      it will only go up by 1 */}
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increase</button>
    </div>
  );
}
```

**What happens:**

- Each time the component renders, React runs the **Counter()** function ,this creates a new closure that holds the current value of **count**.
- When you click, the **setTimeout** callback is created inside that closure, so it “remembers” the **count** value from that render (for example: 0).
- If you click 5 times quickly (within the 1-second timer interval), you create 5 timers — but all of them remember the same old value (0).
- After 1 second, all the timeouts run and call setCount(0 + 1), so the final value is 1, not 5.

You can explore how these examples work by [clicking here](http://localhost:3000/examples/hooks/usestate)

#### Batching across diferent situations

1) Same task ( inside an event handler) →  Batched

```jsx
function Example() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(c => c + 1);
    setCount(c => c + 1);
    // Batched — React will render once
  };

  return (
    <button onClick={handleClick}>
      Count: {count}
    </button>
  );
}
```

2. Microtask ( inside a Promise or after await) → Still Batched

```jsx
function Example() {
  const [count, setCount] = useState(0);

  const handleClick = async () => {
    setCount(c => c + 1);
    await Promise.resolve();
    setCount(c => c + 1);
    //  Still batched in React 18+ — one render
  };

  return (
    <button onClick={handleClick}>
      Count: {count}
    </button>
  );
}
```
3. New task (setTimeout) →  Not Batched

```jsx
function Example() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(c => c + 1);

    setTimeout(() => {
      setCount(c => c + 1);
      //  New task → triggers another render
    }, 0);
  };

  return (
    <button onClick={handleClick}>
      Count: {count}
    </button>
  );
}
```

4. Multiple updates inside the same timeout →   Batched

```jsx
function Example() {
  const [count, setCount] = useState(0);

  const handleClick = () => {

    setTimeout(() => {
      setCount(c => c + 1);
    setCount(c => c + 1);
      
      //  In the same timeout task → batched togheter
    }, 0);
  };

  return (
    <button onClick={handleClick}>
      Count: {count}
    </button>
  );
}
```


Managing State in React: useState Hook

How useState hook works in React, how to manage component state, common patterns and best practices.

UseState Hook in React

## Live Example
Click the link to see a live comparison between `useLayoutEffect` and `useEffect`.
Toggle between them to observe layout flicker.
[Open the live example](https://www.valentinmarko.com/examples/hooks/uselayouteffect)

## What Is useLayoutEffect?

**useLayoutEffect** is a React hook that runs **synchronously after the DOM has been updated**, but **before the browser paints the screen**.

This means:
- The DOM is already updated  
- The user hasn't seen the update yet  
- You can measure layout and perform changes *before* the screen visually updates  


## How useLayoutEffect Differs from useEffect

 **useEffect:**
- Runs **after** the browser paints  
- Does **not** block rendering  
- Best for async tasks, fetching, subscriptions  

**useLayoutEffect:**
- Runs **before** painting  
- Blocks rendering  
- Best for layout reads/writes (e.g., measuring size, position, scroll)





Managing SideEffects in React: useLayoutEffect hook

How useLayoutEffect  manages synchronous side effects in React and how it differs from useEffect maybe enhance it

useLayoutEffect Hook in React

Before React 18, complex rendering during user interactions such as typing or clicking often caused performance issues. Because React’s rendering was synchronous and blocking, heavy updates could freeze the UI, making input laggy and clicks feel unresponsive.

With React 18, Concurrent React introduces a new rendering model where updates are interruptible, prioritized, and non-blocking.

Rendering is broken down into small units of work that React can pause, resume, or cancel if something more urgent happens, like user input.
 
**Key features:**

- **Interruptible rendering**: React 18 can pause ongoing work to quickly respond to user actions such as clicks or typing.
- **Cancelable and restartable rendering**: If new data arrives while React is rendering, it can discard the current work and restart with the latest updates.
- **Prioritization**: Urgent updates (like typing or clicking) are prioritized over less critical ones (like data fetching).


**How It Works Under the Hood**

React still uses the Virtual DOM, diffing, and reconciliation, but:
- rendering is split into chunks
- these chunks can be paused or interrupted
- only after rendering is complete, React commits the changes to the DOM (this is still synchronous)

**APIs and Hooks for Enabling Concurrent Features**

**1.Concurrent Rendering Root API**
The **createRoot()** method enables concurrent rendering in React by allowing React to batch state updates more efficiently and prepare the app for concurrent behavior. However, it doesn’t activate any specific concurrent features on its own. To actually take advantage of concurrent capabilities, you need to use additional APIs like the **Suspense** component, **useTransition**, or **useDeferredValue** hooks.

```jsx
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

```

**2.Suspense**
Lets you **pause rendering** while waiting for async data or lazy-loaded components. It shows a fallback UI during the wait.

```jsx
<Suspense fallback={<Loading />}>
  <LazyComponent />
</Suspense>
```


**3.useTransition()**

**useTransition** lets you mark some state updates as “low priority” or “non-urgent”  to defer heavy UI tasks, keeping the interface responsive for urgent actions like typing or clicking.

```jsx
const [isPending, startTransition] = useTransition();

const handleChange = (newValue) => {
  startTransition(() => {
    setSearchQuery(newValue); // This update is low priority
  });
};
```

**4.useDeferredValue()**
Allows you to defer a value until the UI has finished more urgent updates. Ideal for delaying expensive computations or rendering based on changing input.

```jsx
 const deferredQuery = useDeferredValue(query);
```

How Concurrent React Improves UI Responsiveness

Concurrent React introduces a new, interruptible rendering model that makes UIs more responsive

Blog Articles by Technology