DEV Community: Deva I

useRef Hook in react

Deva I — Wed, 10 Jun 2026 05:49:12 +0000

useRef :

The useRef Hook allows you to persist values between renders.

It can be used to store a mutable value that does not cause a re-render when updated.

It can be used to access a DOM element directly.

Syntax :

import { useRef } from 'react';

const myRef = useRef(initialValue);

Important Points :

When you call useRef, it returns a plain JavaScript object with a single property called current.

The most important useRef is that changing its value does not trigger a component re-render.

Example Code :

import React from 'react'

import { useState, useRef } from "react";

function UserRef() {

    let normalVar = 5;

    const myRef = useRef(5);

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

    return (
        <div>
            <p>Normal Variable: {normalVar}</p>
            <p>Ref Variable: {myRef.current}</p>
            <p>State Variable: {count}</p>

            {/* Increments value in memory, but UI does not change */}
            <button onClick={() => normalVar++}>
                Increment Normal
            </button>

            {/* Increments ref.current, but UI does not change */}
            <button onClick={() => myRef.current = myRef.current + 1}>
                Increment Ref
            </button>

            {/* Increments state and forces the component to re-render, displaying new values */}
            <button onClick={() => setCount(count + 1)}>
                Increment State
            </button>
        </div>
    );
}
export default UserRef;

Explanation :

First you click a normal variable button the value change only memory but, dosen't change the UI.

Then click the useRef variable button two time it's also dosen't change UI.

Then click the state variable button it changes and updates the values both useRef and state variables.

Because ,the useRef remembers the values and shows the values when the component re-renders.

The useRef button clicked by two times so, it's updates 7 and state variable clicked by one time it shows the value 6.

Output :

useMemo Hook in React

Deva I — Tue, 09 Jun 2026 16:51:28 +0000

useMemo :

The useMemohook is designed to optimize performance by caching (memoizing) the result of a calculation between component re-renders.

The useMemo Hook only runs when one of its dependencies update.

syntax :

const Value = useMemo(() => calculateValue(a, b), [a, b]);

useMemo have two arguments one is Calculate Function and another one is dependency array.

Example Code :


function App() {
  const [count, setCount] = useState(0)
  const [arr, setArr] = useState([1, 2, 3, 4])

  const showMax = useMemo(() => {
    console.log("Component re-rendered");
    return Math.max(...arr)
  },
    [arr]);

  const addNew = () => {
    setArr([count + 5]);
  }
  return (
    <div>
      <h2>Count = {count}</h2>
      <button onClick={() => setCount(count + 1)}>count</button>
      <button onClick={addNew}>Addnew</button>
      <p>Max value = {showMax}</p>

    </div>

  )
}

export default App

Output :

useReducer hook

Deva I — Fri, 05 Jun 2026 07:24:10 +0000

Definition of `useReducer`

✓ The useReducer hook in React is an alternative to Usestatedesigned for managing complex or structured state logic.

Syntax :

 const [state, dispatch] = useReducer(reducer, Initial state)

✓ The useReducer have two arguments one is reducer function and another one is Initial value.

🔹 reducer: Custom state Processing function.

🔹 initialState: The initial value your state holds upon component mounting.

🔹 state: representing your current data.

🔹 dispatch: The unique trigger function used to call the Reducer function.

Example Code :

import { useReducer } from 'react'
import './App.css'

function App() {

    function reducerFn(state, action) {
        switch (action.type) {
            case "increment":
                return { count: state.count + 1 }

            case "decrement":
                return { count: state.count - 1 }

            case "reset":
                return { count: state.count + 1 }

        }

    }

    const [state, dispatch] = useReducer(reducerFn, { count: 0 })


    return (
        <div>
            <h1>count:{state.count}</h1>

            <button onClick={() => dispatch({ type: "increment" })}>+</button>
            <button onClick={() => dispatch({ type: "decrement" })}>-</button>
            <button onClick={() => dispatch({ type: "reset" })}>reset</button>
        </div>

    )
}
export default App;

Output :

Product Card Like E-Commerce Website

Deva I — Thu, 04 Jun 2026 12:35:59 +0000

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>
        body {
            background-color: #f9f9f9;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            padding: 20px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            gap: 20px;
            /* border: 1px solid green; */

        }

        div {
            background: white;
            /* border: 1px solid #ddd; */
            border-radius: 10px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            border: 1px solid #e7e7e7;
            /* background-color: #ffffff; */
            background: linear-gradient(135deg, #232f3e, #37475a, #131a22);

        }

        /* background: linear-gradient(145deg,#1f2937,#111827,#0f172a,  #020617); */
        /* background: linear-gradient(145deg, #232f3e, #1e293b, #0f172a, #000000); */
        /* background: linear-gradient(135deg, #131921, #232f3e, #37475a); */
        /* background: linear-gradient(135deg, #667eea, #764ba2); */
        /* background: linear-gradient(135deg, #3d2b1f, #a67c52, #f4d03f); */
        /* background: linear-gradient(135deg, #2c3e50, #4ca1af); */
        /* background: linear-gradient(135deg, #000428, #004e92); */
        /* background: linear-gradient(135deg, #200122, #6f0000); */
        /* background: linear-gradient(135deg, #232526, #414345); */



        h2 {
            font-size: 1rem;
            height: 3em;
            overflow: hidden;
            text-align: center;
            margin: 10px 0;
            color: #ff9900;
        }

        h3 {
            color: #d9dfe6;
            margin: 5px 0;

        }

        img {
            height: 150px;
            width: auto;
            object-fit: contain;
            margin-bottom: 15px;
        }

        p {
            font-size: 0.85rem;
            color: #c7c0c0;
            height: 4.5em;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
    </style>
</head>

<body>

    <script>
        async function fetchproducts() {
            try {

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

                data.forEach(element => {
                    const newDivision = document.createElement("div")
                    const title = document.createElement("h2")
                    const img = document.createElement("img")
                    const price = document.createElement("h3")
                    const rating = document.createElement("h3")
                    const description = document.createElement("p");


                    title.innerText = element.title;
                    img.src = element.image;
                    price.innerText = `PRICE   $${element.price}`;
                    rating.innerText = `RATING ${element.rating.rate}`;
                    description.innerText = `Product Description   ${element.description}`



                    newDivision.appendChild(title);
                    newDivision.appendChild(img);
                    newDivision.appendChild(price);
                    newDivision.appendChild(rating);
                    newDivision.appendChild(description);
                    document.body.appendChild(newDivision);


                });



            }
            catch (error) {
                console.log(error);

            }

        }
        fetchproducts();    
    </script>
</body>

</html>

OUTPUT :

useState Scenario questions - 2

Deva I — Wed, 03 Jun 2026 11:33:30 +0000

5. You have 5 input fields (name, email, phone, city, password).

1.Better to use:
5.separate useState? OR one object state? Why?

✓ One object state is generally better for 5 input fields .

✓ Why: It keeps the code cleaner, allows for a single handleChange function using the name attribute of inputs, and makes the data easier to send to an API.

2.What problem happens if you update object state incorrectly?

✓ If you update an object state without spreading(...spread) the previous state, you will overwrite and lose all other fields (email, phone, etc.).

CODE :

import { useState } from "react";

function MultiInput() {
    const [form, setForm] = useState({
        name: "",
        email: "",
        phone: "",
        city: "",
        password: "",
    })
    const handleChange = (d) => {
        setForm({ ...form, [d.target.name]: d.target.value });
    }

    return (
        <div>
            <input type="text"
                name="name"
                placeholder="Name"
                value={form.name}
                onChange={handleChange} />

            <br />

            <input type="email"
                name="email"
                placeholder="Email"
                value={form.email}
                onChange={handleChange} />

            <br />

            <input type="text"
                name="phone"
                placeholder="Phone"
                value={form.phone}
                onChange={handleChange} />

            <br />

            <input type="text"
                name="city"
                placeholder="City"
                value={form.city}
                onChange={handleChange} />

            <br />

            <input
                type="password"
                name="password"
                placeholder="Password"
                value={form.password}
                onChange={handleChange} />

            <h2>Form Data</h2>

            <p>Name: {form.name}</p>
            <p>Email: {form.email}</p>
            <p>Phone: {form.phone}</p>
            <p>City: {form.city}</p>
            <p>Password: {form.password}</p>


        </div>
    )
}
export default MultiInput;

OUTPUT :

6. Checkbox Selection List

User can select multiple skills:
React,Node,Java,SQL

1.What should be the state type?

✓ An array of strings

2.How will you add/remove values from state array?

✓ Add: Use the spread operator.

✓ Remove: Use the .filter() method.

CODE :

import { useState } from "react";

function Checkboxhandling() {
    const [courses, setCourses] = useState([])

    function getUserInput(e) {
        const { value, checked } = e.target;

        if (checked) {
            setCourses([...courses, value])
        }
        else {
            setCourses(courses.filter((course) => course != value))
        }
    }

    return (
        <div>
            <label htmlFor="react">React</label>
            <input id="react" value="React" type="checkbox" onChange={getUserInput} />
            <br />

            <label htmlFor="node">Node</label>
            <input id="node" value="Node" type="checkbox" onChange={getUserInput} />
            <br />

            <label htmlFor="js">Javascript</label>
            <input id="js" value="javascript" type="checkbox" onChange={getUserInput} />
            <br />

            <label htmlFor="java">Java</label>
            <input id="java" value="Java" type="checkbox" onChange={getUserInput} />
            <br />

            <label htmlFor="sql">SQL</label>
            <input id="sql" value="SQL" type="checkbox" onChange={getUserInput} />
            <br />

            <ul>
                {courses.map((course) => (
                    <li>{course}</li>   
                ))
                }
            </ul>
        </div>
    )

}
export default Checkboxhandling;

OUTPUT :

7. Dependent Dropdown

1.Country State City dropdown.

2.How will you structure state?

✓ Use an object or three separate states. An object structure like { country: '', state: '', city: '' }

3.When country changes, what should happen to state & city?

✓ When the country changes, you must reset the state and city values to empty strings or null. This prevents an invalid state/city combination from remaining selected for a new country.

CODE :

import { useState } from "react";

function CountryDropdown() {
    const [location, setLocation] = useState({
        country: "",
        state: "",
        city: "",
    });

    const handleCountry = (e) => {
        setLocation({
            country: e.target.value,
            state: "",
            city: "",
        })
    }

    const handleState = (e) => {
        setLocation({
            ...location,
            state: e.target.value,
            city: "",
        })
    }
    return (
        <div>
            <select value={location.country}
                onChange={handleCountry}>
                <option value="">Select Country</option>
                <option value="India">India</option>
                <option value="USA">USA</option>

                {/* <br /><br /> */}
            </select>

            <select value={location.state}
                onChange={handleState}>
                <option value="">Select State</option>


                {location.country === "India" && (
                    <>
                        <option value="Tamil Nadu">
                            Tamil Nadu
                        </option>

                        <option value="Kerala">
                            Kerala
                        </option>
                    </>

                )}
                {location.country === "USA" && (
                    <>
                        <option value="California">
                            California
                        </option>

                        <option value="Texas">
                            Texas
                        </option>
                    </>
                )}
            </select>
            {/* <br /><br /> */}

            <select value={location.city} onChange={(e) => setLocation({
                ...location, city: e.target.value,

            })}>
                <option value="">Select City</option>
                {location.state === "Tamil Nadu" && (
                    <>
                        <option value="Chennai">
                            Chennai
                        </option>

                        <option value="Coimbatore">
                            Coimbatore
                        </option>
                    </>
                )}

                {location.state === "Kerala" && (
                    <>
                        <option value="Kochi">
                            Kochi
                        </option>

                        <option value="Trivandrum">
                            Trivandrum
                        </option>
                    </>
                )}

                {location.state === "california" && (
                    <>
                        <option value="Los Angels">
                            Los Angels
                        </option>

                        <option value="san Diego">
                            san Diego
                        </option>
                    </>
                )}

                {location.state === "Texas" && (
                    <>
                        <option value="Houston">
                            Houston
                        </option>

                        <option value="Dallas">
                            Dallas
                        </option>
                    </>
                )}
            </select>

            <h3>Selected Location</h3>

            <p>Country:{location.country}</p>
            <p>State:{location.state}</p>
            <p>City:{location.city}</p>



        </div>
    )
}
export default CountryDropdown;

OUTPUT :

UseEffect Scenario Questions

Deva I — Tue, 02 Jun 2026 17:28:53 +0000

1.Run only once

CODE :

import { useEffect } from "react";
function  ComponentMounted() {
    useEffect(()=> {
        console.log("Component Mounted");

    },[])
}
export default ComponentMounted;

2.Run on every render

CODE :

import { useEffect, useState } from "react";
function Rendered() {

    const [name, setName] = useState("")

    useEffect(() => {
        console.log("Rendered");

    })


    return (

        // <>
        // <input value={name} type="text" onChange={(e)=> setName(e.target.value)}/>
        // <p>Hi welcome{name}</p>
        // </>
        <div>
            <h2>Count={count}</h2>
            <button onClick={() => setCount(count + 1)}>+</button>
        </div>
    )

}
export default Rendered;

3.Run when state changes

CODE :

import { useEffect, useState } from "react";
function StateChanges() {
    const [count, setCount] = useState(0)

    useEffect(() => {
        console.log("Count Changed")
    }, [count]);

    return (
        <div>
            <h2>Count={count}</h2>
            <button onClick={() => setCount(count + 1)}>+</button>
        </div>
    )
}

export default StateChanges;

4.Two states, One effect

CODE :

import { useEffect, useState } from "react";
function TwoStates() {
    const [count, setCount] = useState(0)
    const [name, setName] = useState("")


    useEffect(() => {
        console.log("Count Or Name Changed")
    }, [count, name]);

    return (
        <div>
            <h2>Count={count}</h2>
            <button onClick={() => setCount(count + 1)}>+</button>
            <input value={name} type="text" onChange={(e) => setName(e.target.value)} />
            <p>Hi welcome{name}</p>
        </div>
    )

}
export default TwoStates;

5.Derived Logic

CODE :

import { useEffect, useState } from "react";
function MyComponent() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>{count}</p>

            {count % 2 === 0 && <p>Even Number</p>}

            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    )
}
export default MyComponent;

6.API call on Mount

CODE :

import { useEffect } from "react";
function ApiCallOnmount() {
    useEffect(() => {
        fetch("https://fakestoreapi.com/products/1")
            .then((res) => res.json())
            .then((data) => console.log(data));
    }, [])
}
export default ApiCallOnmount;

7.Infinite loop trap

CODE:

import { useEffect, useState } from "react";
function LoopTrap() {

    const [count, setCount] = useState(0);
    useEffect(() => {
        setCount(count + 1)
            ;
    }, [count])

}
export default LoopTrap;

8..Fix the Infinite loop

CODE :

import { useEffect, useState } from "react";
function FixTheLoop() {

    const [count, setCount] = useState(0);
    useEffect(() => {
        setCount(count + 1)
            ;
    }, [])

}
export default FixTheLoop;

9.Document title sync

CODE :

import { useEffect, useState } from "react";
function DocTitleSync() {

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

    useEffect(() => {
        document.title = count;
    }, [count])

    return (
        <div>
            <h2>{count}</h2>
            <button onClick={() => setCount(count + 1)}>Increase</button>
        </div>
    )

}
export default DocTitleSync;

10.Cleanup basic

CODE :

import { useEffect } from "react";
function Cleanup() {

    function handleClick() {
        console.log("Window Clicked");

    }
    useEffect(() => {
        window.addEventListener("click", handleClick)

        return () => {
            window.removeEventListener("click", handleClick)
        };
    }, []);

    return (
        <div>
            <h2>Click window</h2>
        </div>
    )

}
export default Cleanup;

Browser Router

Deva I — Thu, 28 May 2026 04:38:35 +0000

What is browser Router :

A BrowserRouter is a core component in the popular web framework React Router used to power navigation in Single-Page Applications (SPAs).

It allows navigation without reloading the full page.

It updates only the necessary components on the screen instead of loading the whole Html page.

This generates clean, SEO-friendly, and human-readable URLs.

Syntax

<BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </BrowserRouter>

Navigating via links using,

<Link to="/about">Go to About</Link>

Example :

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>

      <Routes>
        <Route path="/" element={<h1>Home Page</h1>} />
        <Route path="/about" element={<h1>About Page</h1>} />
      </Routes>
    </BrowserRouter>
  );
}

Looping programs using Python

Deva I — Wed, 27 May 2026 11:14:45 +0000

The sum of first n numbers :

CODE :

result = 0
no = 1

while no <= 5:
    result = result + no
    no += 1

print(result)

EXPLANATION :

✓ Initial State: result = 0, no =1

✓ STEP 1: no is (1). result becomes (0 + 1 = 1). no becomes (2).

✓ STEP 2: no is (2). result becomes (1 + 2 = 3). no becomes (3).

✓ STEP 3: no is (3). result becomes (3 + 3 = 6). no becomes (4).

✓ STEP 4: no is (4). result becomes (6 + 4 = 10). no becomes (5).

✓ STEP 5: no is (5). result becomes (10 + 5 = 15). no becomes (6).

✓ Finally the no becomes 6 (no <=5).false,so break the loop and print the result.

Factorial program (5!) :

CODE :

result = 1
no = 5

while no >= 1:
    result = result * no
    no -= 1

print(result)

EXPLANATION :

✓ Initial State: result = 1, no = 5

✓ STEP 1: result = 1 * 5, Then no is = 4,

✓ STEP 2:Then the result(5) = 5 * 4, Then no becomes = 3,

✓ STEP 3: Then the result is = 20 * 3, no becomes = 2,

✓ STEP 4: Then the result = 60 * 2, no becomes = 1,

✓ STEP 5:Now, the result is = 120* 1, no becomes = 0

✓ Finally the no is 0.(no >= 1), condition is false, then break the loop and Print the result.

A frog is fallen the well mistakenly.so it tries to go on out using the wall to move upwards 2 feets and downwards 1 feet each day,the question is howmany days takes the frog to going out the well ?

CODE :

feet = 50
days = 0
up = 2
down = 1

while feet > 0:
    feet = feet - up + down
    days += 1

print("Days:", days)

✓ Initial state: feet,days-0,up-2 and down-1

✓ feet is 50,that's satisfy the condition of (feet > 0),true.feet=(50-2+1)= 49.Then the feet becomes 49.

✓ This process happens untill the feet gets 0

✓ When the feet becomes 0,the loop break and print days.

What is props

Deva I — Tue, 26 May 2026 06:52:20 +0000

What is props :

Props stands for properties.

Props in React are read-only inputs passed from a parent component to a child component.

Key characteristics of props :

Unidirectional Data Flow: Data flows one way, from parent to child.

Immutable (Read-Only): A child component must never modify the props it receives; they are read-only.

Reusable Components: Props allow you to use the same component structure with different data.

Dynamic Rendering: Props enable components to render different content based on the inputs provided.

Passing props(Parent component)

function App() {
  return <Greeting name="Alice" message="Hello" />;
}

Receiving props(Child component)

function Greeting(props) {
  return <h1>{props.message}, {props.name}!</h1>;
}

Destructuring props :

function Greeting({ message, name }) {
  return <h1>{message}, {name}!</h1>;
}

UseContext

Deva I — Mon, 25 May 2026 11:04:29 +0000

Definition of UseContext:

✓ The useContext Hook in React allows functional components to access shared data without "prop drilling"—the tedious process of passing props through every level of a component tree.

✓ It is primarily used for global-like data such as user authentication, themes, or language settings.

How to use `useContext` :

Create Context: Use createContext() to define a context object. You can provide a default value.
Provide Context: Wrap your component tree with a and pass the data into its value prop. All nested components can now access this data.
Consume Context: Inside a functional component, call useContext(MyContext) to retrieve the current value.

When to Use It :

Global Settings: Themes (dark/light mode), language preferences, or user authentication status.

Deep Nesting: When data is needed by many components at different levels of the tree.

Hooks Scenario Questions

Deva I — Wed, 20 May 2026 16:54:10 +0000

Toggle Button :

1.What type of state should you use?
✓ Boolean (true/false).

2.Why must the input value be stored in useState?
✓ Either false (for "OFF") or true (for "ON"), depending on the desired default.

PROGRAM :

OUTPUT :

Input field value :

1.What happens if you use a normal variable?
✓ Without useState the component won't re-render to show the updated text.

2.What kind of state works best?
✓ If you use a normal variable, the value might update in memory, but the UI will not reflect the change because React doesn't know it needs to re-render.

PROGRAM :

OUTPUT :

Show/Hide text :

1.What kind of state works best?
✓ Boolean

2.Why boolean is suitable here?
✓ It acts as a simple binary switch (flag) to conditionally render the paragraph:{isVisible && <p>Text</p>}.
PROGRAM :

OUTPUT :

Character Counter :

1.How do you track text length?
✓ Use .lengthon the stringe(eg: text.length).

2.Should you store both text and length in state?
✓ No, you should only store the text.
✓The length is "derived state" and can be calculated during render to avoid redundant data.

PROGRAM :

OUTPUT :

React hooks

Deva I — Wed, 20 May 2026 16:15:46 +0000

Definition of React hooks :

React Hooks are special functions introduced in React 16.8 that allow you to use state and other React features (like lifecycle methods) inside functional components without writing a class.

Why hooks matter :

Before Hooks, functional components were "stateless"—they could only receive props and render UI.

The Two Golden Rules :

1.Only call Hooks at the top level: Do not call them inside loops, conditions, or nested functions.

2.Only call Hooks from React functions: Use them only within React functional components or your own custom Hooks.

Types of Hooks :

State hooks :
useState

UseReducer(TBD)

Effect hooks:(TBD)
useEffect
useLayoutEffect

Context & Effect hooks :(TBD)
useContext
useRef

Performance Hooks :(TBD)
useMemo
useCallback

UseState :

In React, useState is a built-in Hook that allows you to add state variables to functional components

When you call useState, it returns an array containing two items. the current state value and a setter function to update it.

import { 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>
  );
}
export default Counter;

DEV Community: Deva I

useRef Hook in react

useRef :

Syntax :

Important Points :

Example Code :

Explanation :

Output :

useMemo Hook in React

useMemo :

syntax :

Example Code :

Output :

useReducer hook

Definition of useReducer

Syntax :

Example Code :

Output :

Product Card Like E-Commerce Website

CODE :

OUTPUT :

useState Scenario questions - 2

5. You have 5 input fields (name, email, phone, city, password).

6. Checkbox Selection List

7. Dependent Dropdown

UseEffect Scenario Questions

1.Run only once

2.Run on every render

3.Run when state changes

4.Two states, One effect

5.Derived Logic

6.API call on Mount

7.Infinite loop trap

8..Fix the Infinite loop

9.Document title sync

10.Cleanup basic

Browser Router

What is browser Router :

Syntax

Example :

Looping programs using Python

The sum of first n numbers :

Factorial program (5!) :

A frog is fallen the well mistakenly.so it tries to go on out using the wall to move upwards 2 feets and downwards 1 feet each day,the question is howmany days takes the frog to going out the well ?

What is props

What is props :

Key characteristics of props :

Passing props(Parent component)

Receiving props(Child component)

Destructuring props :

UseContext

Definition of UseContext:

How to use useContext :

When to Use It :

Hooks Scenario Questions

Toggle Button :

Input field value :

Show/Hide text :

Character Counter :

React hooks

Definition of React hooks :

Why hooks matter :

The Two Golden Rules :

Types of Hooks :

UseState :

Definition of `useReducer`

How to use `useContext` :