DEV Community: QUBE

React Hooks

QUBE — Fri, 29 May 2026 07:04:19 +0000

React Hooks are functions that allow you to hook into React state and lifecycle features from functional components.

useState()

-It returns variable & function

-It triggers rerendering

import { useState } from "react";

function Count() {

  const [count, setCount] = useState(10);

  function increase() {
    setCount(count + 1);
  }

  function decrease() {
    setCount(count - 1);
  }

  function reset() {
    setCount(0);
  }

  return (
    <div>
      <h1>Counter App</h1>

      <h3>Count: {count}</h3>

      <button onClick={increase}>+</button>

      <button onClick={decrease}>-</button>

      <button onClick={reset}>Reset</button>
    </div>
  );
}

export default Count;

useEffect

useEffect is a React Hook that lets you synchronize a component with an external system.
The useEffect Hook takes two arguments: a function containing your side effect code and an optional dependency array .

import { useEffect } from "react";

function App() {

  useEffect(() => {
    console.log("Component Mounted");
  }, []);

  return (
    <div>
      <h1>Hello React</h1>
    </div>
  );
}

export default App;

useNavigate

useNavigate is a hook in React Router used to move from one page to another programmatically.

import { useNavigate } from "react-router-dom";

function Home() {
  const navigate = useNavigate();

  function goToAbout() {
    navigate("/about");
  }

  return (
    <div>
      <h1>Home Page</h1>

      <button onClick={goToAbout}>
        Go to About
      </button>
    </div>
  );
}

export default Home;

DOM Exercises

QUBE — Wed, 27 May 2026 09:06:21 +0000

1.Character Count:

<!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>
    <input  id="inp" type="text" oninput="charcount()">
    <h1>Character Count:<span id="char">0</span></h1>
</body>
<script>
    function charcount() {  
        const inp=document.getElementById("inp")
        const char=document.getElementById("char")
        char.innerText=inp.value.length;

    }
</script>
</html>

React Basics

QUBE — Fri, 15 May 2026 08:07:13 +0000

React is a powerful JavaScript library for building fast, scalable front-end applications. Created by Facebook, it's known for its component-based structure, single-page applications (SPAs), and virtual DOM, enabling efficient UI updates and a seamless user experience.
You need npm to create a project. npm stands for node package manager.

React is JavaScript library.
Used to create single page applications.

3.Allows for the creation of reusable UI components.

Importance of React
Before React, front-end development struggled with:

Manual DOM Manipulation: Traditional JavaScript directly modified the DOM, slowing down the performance.
Complex State Management: Maintaining UI state became messy and hard to debug.
Tight Coupling in Frameworks: Frameworks like Angular introduced complex two-way data binding that made code harder to manage.

Core Features

Virtual DOM: React updates only the changed parts of the DOM, resulting in faster rendering.
One-Way Data Binding: Ensures predictable and easy to debug data flow.
Component-Based Architecture: Breaks UI into reusable pieces, improving the code reusability and scalability.

Sample Program

import React from 'react';

function App() {
    return (
        <div>
            <h1>Hello World</h1>
        </div>
    );
}

export default App;

HTML DOM

QUBE — Wed, 29 Apr 2026 08:21:19 +0000

The HTML DOM (Document Object Model) is a structured representation of a web page that allows developers to access, modify, and control its content and structure using JavaScript.

It powers most dynamic website interactions, enabling features like real-time updates, form validation, and interactive user interfaces.
The HTML Document Object Model is a tree structure, where each HTML tag becomes a node in the hierarchy.

Structure of the HTML DOM
If we imagine our webpage as a tree:

The document is the root.
HTML tags like html, head and body are branches.
Attributes, text, and other elements are the leaves.

Working Of DOM
The DOM connects your webpage to JavaScript, allowing you to:

Access elements .
Modify Content.
React to Events.
Create or remove elements dynamically.

Types of DOM:
The DOM is seperated into 3 parts.

Core DOM - It is standard model for all document types.
XML DOM - It is standard model for XML Documents.
HTML DOM: It is standard model for HTML documents .

Selecting elements in the document

getElementById()
In HTML, ids are used as unique identifiers for the HTML elements. This means you cannot have the same id name for two different elements.

<p id="para1">This is my first paragraph.</p>
<p id="para2">This is my second paragraph.</p>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Browser</title>
</head>
<body>
    <p id="para">DOM</p>
    <button id="btn" onclick="change()">Change</button>
  <script>
    const p1=document.getElementById("para");
    function change() {
        p1.innerText="Welcome DOM"
    }
  </script>
</body>

</html>

O/P

querySelector() (TBD)
querySelectorAll() (TBD)

*Simple DOM Exercises *

<html>
<!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>
    <img id="bulbimg" src="https://www.w3schools.com/js/pic_bulboff.gif">
    <button id="btn">ON</button>
</body>
<script>
    const img=document.getElementById("bulbimg");
    const button=document.getElementById("btn");
    btn.addEventListener('click',bulb);
    function bulb(){
        if(img.src=="https://www.w3schools.com/js/pic_bulboff.gif"){
            img.src="https://www.w3schools.com/js/pic_bulbon.gif";
            btn.innerText="OFF";
        }
        else{
            img.src="https://www.w3schools.com/js/pic_bulboff.gif";
            btn.innerText="ON";
        }

    }
</script>
</html>

O/P

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input id="in" type="password">
   <button id="btn">Show</button>
</body>
<script>
    const inp=document.getElementById("in")
    const btn=document.getElementById("btn")
    btn.addEventListener('click',showhide);
    function showhide(){
    if(inp.type=="password"){
        inp.type="text"
        btn.innerText="Hide"
    }
    else{
        inp.type="password"
        btn.innerText="Show"
    }
}

</script>
</html>

O/P

References:

w3schools.com

JavaScript Scenario Questions(variables,operators,conditional statements)

QUBE — Mon, 20 Apr 2026 08:02:19 +0000

10.

12.

11.

12.

13.

14.

16.

17.

18.

19.

20.

Object & Array Scenario Questions

QUBE — Mon, 20 Apr 2026 06:25:14 +0000

QUBE

Apr 20

Object & Array Scenario Questions

Comments

1 min read

Object & Array Scenario Questions

QUBE — Mon, 20 Apr 2026 06:24:22 +0000

1.User Profile Update:

2.Shopping Cart Total:

3.Find Specific Object:

4.Add Item to Array:

5. Count Items in Object:

Array Iterations in JavaScript

QUBE — Thu, 16 Apr 2026 08:35:26 +0000

Array forEach()

The forEach() method calls a function (a callback function) once for each array element.

Array map()

The map() method creates a new array by performing a function on each array element.
The map() method does not execute the function for array elements without values.
The map() method does not change the original array.

Array flatMap()

The flatMap() method first maps all elements of an array and then creates a new array by flattening the array.

Array filter()

The filter() method creates a new array with array elements that pass a test.

Array reduce()

The reduce() method runs a function on each array element to produce a single value.

Array reduceRight()

The reduceRight() works from right-to-left in the array. See also reduce().

Array every()

The every() method checks if all array values pass a test.

Array some()

The some() method checks if some array values pass a test.

Array Spread (...)

The ... operator expands an array into individual elements.

TBD(Array from(),Array keys(),Array entries(),Array with() & Array Rest (...)).

References:

w3schools.com

Callback Function in JavaScript

QUBE — Wed, 15 Apr 2026 09:17:49 +0000

A callback function in javascript is a function passed as an arguement into another function and executed later.
The benefit of using a callback function is that you can wait for the result of a previous function call and then execute another function call.

How Callbacks Work

Passing the Function: The function you want to run after some operation is passed as an argument to another function.
Executing the Callback: The main function executes the callback function at the appropriate time. This can be after a delay, once a task is complete, or when an event occurs.

Types of Callbacks:

Asynchronous Callbacks

Asynchronous callbacks are executed at a later time, allowing the main program to continue running without waiting.
This is essential for preventing the application from freezing during long-running tasks like network requests.

Synchronous Callbacks

Synchronous Callbacks are executed immediately within the outer function, blocking further operations until completion.
Array methods like map(), filter(), and forEach() use synchronous callbacks.

Example For Callback Function:

Avoid callbacks when:

Code becomes nested and unreadable (use Promises or async/await).
You need error handling in asynchronous operations (Promises are better).

References:

How to Use Callback Functions in JavaScript

When you're building dynamic applications with JavaScript that display real-time data – like a weather app or live sports dashboard – you'll need a way to automatically fetch new data from an external source without disrupting the user experience. Yo...

freecodecamp.org

JavaScript Callbacks - GeeksforGeeks

Your All-in-One Learning Portal: GeeksforGeeks is a comprehensive educational platform that empowers learners across domains-spanning computer science and programming, school education, upskilling, commerce, software tools, competitive exams, and more.

geeksforgeeks.org

//Object Constructors in JavaScript//

QUBE — Wed, 08 Apr 2026 08:27:01 +0000

In JavaScript, an Object Constructor is a special function used to create multiple objects with the same structure (properties and methods). It’s useful when you want to create many similar objects (like users, cars, teams, etc.).

In the constructor function, this has no value. The value of this will become the new object when a new object is created.

this in Objects:

The this keyword refers to an object.
In JavaScript, this is used to access the object that is calling a method.

Example:

Instead of creating seperate objects ,we can use Object Constructors for efficiency.

References:

w3schools.com

//Objects in JavaScript//

QUBE — Mon, 06 Apr 2026 18:08:06 +0000

An object is a dynamic data structure that stores related data as key-value pairs, where each key uniquely identifies its value.

The values of properties can be primitives, objects, or functions (known as methods when defined inside an object).
Objects are mutable and dynamic properties can be added, modified, or deleted at any time.
Objects allow data grouping and encapsulation, making it easier to manage related information and behaviour together.

1. Creating Object Using Object Literal

The object literal syntax allows you to define and initialize an object with curly braces {}, setting properties as key-value pairs.

2.Basic Operations on JavaScript Objects

CRUD Operations in Objects

Creating an Object in JavaScript:

Read through Objects:

Updating Values in Objects:

Deleting Values in Objects:

References:

Objects in JavaScript - GeeksforGeeks

geeksforgeeks.org

//Functions in JavaScript//

QUBE — Mon, 06 Apr 2026 06:28:41 +0000

1. What are Functions?

Functions or reusable code blocks designed for particular tasks
Functions are executed when they are called or invoked
Functions are fundamental in all programming languages

Functions are defined with the function keyword:

followed by the function name
followed by parentheses ( )
followed by brackets { }

Sample Program using Function:

2. Calling Functions

Functions are executed when they are called or invoked
You call a function by adding parentheses to its name: name()

3. Function Parameters

Parameters allow you to send values to a function
Parameters are listed in parentheses in the function definition

4. Function Return Values

A function can return a value back to the code that called it
The return statement is used to return a value from a function

5. Function Arguments

Function parameters and arguments are distinct concepts
Parameters are the names listed in the function definition
Arguments are the values received by the function

References:

w3schools.com