DEV Community: ViGnEsH

useEffect

ViGnEsH — Mon, 01 Jun 2026 06:58:12 +0000

June 01 2026

What is useEffect?

The useEffect hook is a built-in React function component. useEffect accepts two arguments. The second argument is optional.
useEffect ( < function >, < dependency > )

Example

API calls
Updating document title
Event listeners
Timers (setTimeout, setInterval)

setTimeout:

setTimeout() = runs only once after the given time.

setInterval

setInterval() = repeats again and again

Use Navigate & BrowserRouter

ViGnEsH — Sat, 30 May 2026 07:44:51 +0000

May 30 2026

import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
import About from "./About";
import Contact from "./Content";
import Home from "./Home";

function App(){

  return(
<>
<BrowserRouter>

<Link to ={"/"}>Home</Link>
<Link to ={"/About"}>About</Link>
<Link to ={"/Contact"}>Contact</Link>

< Routes >
  <Route path='/' element={<Home />} / >
  <Route path='/About' element={<About/ > } /  >
  < Route path='/Contact' element={< Contact / > } / >


</Routes>
</BrowserRouter>

{/* <Home /> */}
{/* <About/>  */}


</>
  )
}
export default App;

Link creates navigation links:
Home
About
Contact

Home

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

function About() {

  const navigate = useNavigate();


  function handleHome() {


    navigate("/")
  }

  return (

    <>
      About

      <button onClick={handleHome}>BACK TO HOME</button>
    </>
  )
}
export default About;

About

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

function About() {

  const navigate = useNavigate();


  function handleHome() {


    navigate("/")
  }

  return (

    <>
      About

      <button onClick={handleHome}>BACK TO HOME</button>
    </>
  )
}
export default About;

Content

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

function Contact(){

 const navigate = useNavigate();
  function handleContact() {
    navigate ("/About")
  }
  return(

    <>Contact

    <button onClick={handleContact}>Back About</button>
    </>
  )
}
export default Contact;

React – useState Scenarios

ViGnEsH — Tue, 26 May 2026 10:36:33 +0000

2026 May 26

1) Toggle Button

Switch between "ON" and "OFF"`

      <h1>ToggleButton</h1>
      <img className="base" width="100" height="100" src={isOn ?  " https://images.pexels.com/photos/37705633/pexels-photo-37705633.jpeg " : "https://images.pexels.com/photos/32179609/pexels-photo-32179609.jpeg" } alt="" />
      <button className="base" width="20" height="20" onClick={()=> setOn(!isOn)}>{isOn ? "SUN": "MOON"}</button>

Best state type: Boolean
False => Off
True => On
Initially set to false (Moon mode)

Conditional Rendering
The magic happens with the ternary operator (? :):
src={isOn? "sun-url.jpg" : "moon-url.jpg"}
When isOn = true → shows Sun image
When isOn = false → shows Moon image

onClick={() => setOn(!isOn)}
Every click inverts the current state
!true becomes false ! false becomes true.

2) Input Field Value

useState("") / Creates memory for your text (starts empty)
onChange={(e) => setText(e.target.value)} / Captures every keystroke
Hello, {text} / Displays your text instantly

3) Show / Hide Text

Best state type: Boolean
False => Hide
True => Show
button onClick={()=>setShow(!show)} - is a created arrow function inside the useState Function. Every click inverts the current state
!true becomes false ! false becomes true.

{show && <p>I am Vignesh K</p>} - condition true show a this line

4) CharacterCount

value={count} Links input to React state
onChange={(e)=>setCount(e.target.value)} Updates state on every keystroke

CharacterCount: {count.length}

Displays character count live

5) Form with Multiple Inputs

1 const [from, setFrom] = useState({...}) -> Stores all form data in ONE object
2 const handleFrom = (e) => { ( Function that runs on every ) input change
3 ...from ( copies of all existing data )
4 [e.target.name]: e.target.value ( Updates ONLY the field being typed in )
5 ( Each input updates state automatically )
6 < p >Name : {from.name} < / p > ( Displays live data below form )

Hooks

ViGnEsH — Tue, 19 May 2026 08:02:33 +0000

May 19 2026

Hooks are a special function in React, introduced in version 16.8, that allow you to "hook into" state and lifecycle features from functional components without writing a class.

Core Built-in Hooks

React provides several built-in Hooks to handle common tasks:

useState
useEffect
useContext
useReducer
useMomo & useCallback
useRef
use

useState

useState adds local state to a functional component, allowing it to "remember" information like user input or counter values.

**Toggle Button**

function set(){
  const [isOn, setIsOn] = useState(false);

return(
<div>
 <button onClick={() => setIsOn(!isOn)}>
                {isOn? "ON ": "OFF"}
            </button>
</div>
}

components

ViGnEsH — Fri, 15 May 2026 09:11:16 +0000

May 15 2026

components are mainly 2 types:

*1. Function compoents *

A Functional Component is a simple JavaScript function that returns JSX.

It is the modern and most commonly used component type in React.

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

export default Welcome;

2. Class Component

A Class Component is a React component created using an ES6 class.
It extends React.Component and must contain a render() method that returns JSX.

import React, { Component } from "react";

class Welcome extends Component {
  render() {
    return <h1>Hello Vignesh</h1>;
  }
}

export default Welcome;

What is react js

ViGnEsH — Thu, 14 May 2026 07:22:18 +0000

May 14 2026

React js

React is an open-source javascript library for building user interface,
Create in Facebook company used for single-page application
npm (Note Package Manager) is the standard tool .Used in node.js

npm create vite@latest
project name
-> react
-> JavaScript
yes

Difference between libraries and frameworks?

libraries:A library is like a toolbox. It is command for codes in create role running process.
It is collection of codes .You control the flow
Libraries
React
jQuery
Axios

frameworks:Framework controls the flow Usually larger. give a full structure for applicatiuon.

Frameworks
Angular
Vue.js
Next.js
Express.js

ECommerce

ViGnEsH — Tue, 12 May 2026 08:54:37 +0000

May 12 2026

code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        *{
            bottom: 0;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body {
            border: 1px solid rgb(195, 235, 17);
            display: grid;
            grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
            padding: 20px;
            gap: 20px;
                background:linear-gradient(rgb(247, 246, 246),rgb(4, 4, 4)) ;


        }

          /* Header */








        div{
            border: 3px solid rgb(78, 251, 3);
            padding: 20px;
            border-radius: 20px;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            background:linear-gradient(rgb(252, 251, 251),white) ;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        h2{
            color: rgb(250, 248, 248);
            font-family: 'Times New Roman', Times, serif;
             /* display: flex; */
            /* flex-direction: column; */
            /* justify-content: center; */
            /* align-items: center; */
        }

        img {
            width: 100%;
            height: 250px;
            object-fit: contain;
            background-color: #f8f9fa;
            padding: 20px;
            transition: transform 0.3s ease;
        }

     img:hover {
            transform: scale(1.05);
        }
        h3{
            color: rgb(5, 252, 5);
            margin-bottom: 20px;
        }
        h4{
            color: rgb(251, 223, 7);
            margin-bottom: 20px;
        }

        p{
               color:#666;
        }

        #h{
            color: #f8f9fa;
            border: 1px solid wheat;
            display:flex;
            flex-direction: column;
        }


    </style>
</head>

<body>

    <script>


        async function product() {

            try {

                const rec = await fetch('https://fakestoreapi.com/products');
                const data = await rec.json();

                console.log(data);

                data.forEach(name);

                function name(params) {

                    const bigbox= document.createElement("div")
                    const box = document.createElement("div");
                    const title = document.createElement("h2")
                    const image = document.createElement("img")
                    const price = document.createElement("h3")
                    const rating = document.createElement("h4")
                    const description = document.createElement("p")

                    title.innerText = params.title;
                    image.src = params.image;
                    price.innerHTML = `💰 Price ${params.price}`;
                    rating.innerText = `⭐ Rating ${params.rating.rate}`;
                    description.innerText = `Description ${params.description.substring(0, 120)}...`;


                    box.appendChild(image)
                    box.appendChild(title)
                    box.appendChild(price)
                    box.appendChild(rating)
                    box.appendChild(description)

                    document.body.appendChild(box)

                }


            } catch (error) {
                 console.log("Loading...")
            }

        }

        product();


    </script>
</body>

</html>

output

Promise in html

ViGnEsH — Fri, 08 May 2026 07:40:47 +0000

May 08 2026

TO DO List

ViGnEsH — Wed, 06 May 2026 07:10:07 +0000

_May -6 2026 _

HTML

SCRIPT

STYLE

ONE

TWO

Calculator projects

ViGnEsH — Tue, 05 May 2026 07:50:52 +0000

May 25 2026

Calculator projects

HTML

SCRIPT

STYLE

RESULT

Two mine projects in javaScript

ViGnEsH — Thu, 30 Apr 2026 17:11:43 +0000

April/30/2026

Change Text on Button Click

Touch next buttom

Light On / Off Toggle

DOM

ViGnEsH — Tue, 28 Apr 2026 08:31:43 +0000

April/28/2026

1.What is a dom ?

DOM from is documents object model. it is used for responding website create

2.What is Document Object ?
document is the root object to access the page.

3.Tree Structure ?
The HTML page is represented as nodes (elements, text, attributes).

4.Who to modify html page ?
You can add, remove, or update elements, styles, and content. used like object.

5.How do you select elements in the DOM?
Document.getElementById, Document.getElementByclass ect..

What is the difference between DOM and BOM, and how do window and document relate? (TBD)

What is the difference between NodeList and HTMLCollection?(TBD)