React useState Hook

In React, to create a UI with two buttons (Increment and Decrement), we use the onClick event instead of addEventListener in JavaScript. The function can be defined separately or directly inside {} in JSX. Why Doesn't UI Update Initially? When clicking the buttons, console.log(count) shows the value changing, but the UI does not update. In vanilla JavaScript, we manually manipulate the DOM to reflect the changes. While we can do the same in React by selecting tags and updating them, React handles DOM manipulation internally, keeping our code clean. Why Clean Code Matters? Direct DOM manipulation results in repeated code, especially when updating the same variable across multiple elements. React simplifies this by introducing hooks, which are just functions. The most commonly used hook is useState. Understanding useState When a variable's value changes, we say its state is changing. The useState hook helps manage state in React. const [count, setCount] = useState(0); useState(0) returns an array with two values: count → initialized with 0. setCount → a function to update count. Why a function? Instead of direct manipulation, React says: "Call my function (setCount(newValue)) whenever you update the variable, and I’ll handle UI updates automatically." How does React update the UI? When setCount(count) is called, React rerenders the component. Any JSX that uses count will automatically show the updated value. This prevents repetitive code for updating the UI. Understanding Sorting in JavaScript let arr = [10, 2, 5, 1]; arr.sort((a, b) => a - b); console.log(arr); // Output: [1, 2, 5, 10] If a - b is negative, a comes first. If positive, b comes first. The useState Twist

Apr 3, 2025 - 22:20

In React, to create a UI with two buttons (Increment and Decrement), we use the onClick event instead of addEventListener in JavaScript. The function can be defined separately or directly inside {} in JSX.

Why Doesn't UI Update Initially?
When clicking the buttons, console.log(count) shows the value changing, but the UI does not update. In vanilla JavaScript, we manually manipulate the DOM to reflect the changes. While we can do the same in React by selecting tags and updating them, React handles DOM manipulation internally, keeping our code clean.

Why Clean Code Matters?
Direct DOM manipulation results in repeated code, especially when updating the same variable across multiple elements.

React simplifies this by introducing hooks, which are just functions.

The most commonly used hook is useState.

Understanding useState
When a variable's value changes, we say its state is changing. The useState hook helps manage state in React.
const [count, setCount] = useState(0);

useState(0) returns an array with two values:

count → initialized with 0.

setCount → a function to update count.

Why a function? Instead of direct manipulation, React says:
"Call my function (setCount(newValue)) whenever you update the variable, and I’ll handle UI updates automatically."

How does React update the UI?

When setCount(count) is called, React rerenders the component.

Any JSX that uses count will automatically show the updated value.

This prevents repetitive code for updating the UI.

Understanding Sorting in JavaScript

let arr = [10, 2, 5, 1];  
arr.sort((a, b) => a - b);  
console.log(arr); // Output: [1, 2, 5, 10]

If a - b is negative, a comes first.

If positive, b comes first.

The useState Twist