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

UI = f(state)

JavaScript
   ↓
JSX
   ↓
Components
   ↓
Props
   ↓
Events
   ↓
State
   ↓
Conditional Rendering
   ↓
Lists + Keys
   ↓
Forms
   ↓
Hooks
   ↓
API Calls
   ↓
Context
   ↓
Custom Hooks
   ↓
Routing
   ↓
Performance
   ↓
Testing
   ↓
Production Architecture

CONCEPT
   ↓
EXAMPLE
   ↓
PRACTICE
   ↓
CHALLENGE
   ↓
PROJECT

npm create vite@latest my-react-app
cd my-react-app
npm install
npm run dev

npm install react react-dom

npm run build

npm run preview

src/
├── components/
│   ├── Button.jsx
│   ├── Navbar.jsx
│   └── Card.jsx
│
├── pages/
│   ├── Home.jsx
│   └── About.jsx
│
├── hooks/
│   └── useFetch.js
│
├── services/
│   └── api.js
│
├── App.jsx
└── main.jsx

src/
├── components/
├── features/
├── pages/
├── hooks/
├── services/
├── context/
├── utils/
├── assets/
├── routes/
└── App.jsx

const element = <h1>Hello World</h1>;

const name = "Raj";

return <h1>Hello {name}</h1>;

const age = 20;

return <p>Age: {age}</p>;

const user = {
  name: "Raj",
  age: 22
};

return (
  <div>
    <h2>{user.name}</h2>
    <p>{user.age}</p>
  </div>
);

<div class="box"></div>

<div className="box"></div>

<img src="/logo.png" alt="Logo" />

<button disabled={true}>
  Submit
</button>

function Header() {
  return <header>My Website</header>;
}

function App() {
  return (
    <>
      <Header />
      <main>Hello</main>
    </>
  );
}

function UserProfile() {}
function ProductCard() {}
function Navbar() {}

function userprofile() {}

<>
  <h1>Hello</h1>
  <p>Welcome</p>
</>

<React.Fragment>
  <h1>Hello</h1>
  <p>Welcome</p>
</React.Fragment>

function User({ name }) {
  return <h2>Hello {name}</h2>;
}

function App() {
  return <User name="Raj" />;
}

function Product({ name, price, category }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{category}</p>
      <strong>₹{price}</strong>
    </div>
  );
}

<Product
  name="Laptop"
  price={50000}
  category="Electronics"
/>

props.name = "New Name";

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

<Card>
  <h2>Hello</h2>
  <p>React is powerful.</p>
</Card>

<button onclick="handleClick()">

<button onClick={handleClick}>

function App() {
  const handleClick = () => {
    console.log("Clicked");
  };

  return <button onClick={handleClick}>Click</button>;
}

<button onClick={() => console.log("Clicked")}>
  Click
</button>

<input onChange={(e) => console.log(e.target.value)} />

onClick
onChange
onSubmit
onFocus
onBlur
onKeyDown
onKeyUp
onMouseEnter
onMouseLeave

import { useState } from "react";

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

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

      <button onClick={() => setCount(count + 1)}>
        +
      </button>
    </>
  );
}

const [state, setState] = useState(initialValue);

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

const [age, setAge] = useState(20);

const [isOpen, setIsOpen] = useState(false);

const [users, setUsers] = useState([]);

setCount(prev => prev + 1);

setCount(prev => prev + 1);

setCount(count + 1);

const [user, setUser] = useState({
  name: "Raj",
  age: 20
});

setUser(prev => ({
  ...prev,
  age: 21
}));

user.age = 21;

setUsers(prev => [
  ...prev,
  newUser
]);

setUsers(prev =>
  prev.filter(user => user.id !== id)
);

setUsers(prev =>
  prev.map(user =>
    user.id === id
      ? { ...user, name: "New Name" }
      : user
  )
);

{isLoggedIn ? <Dashboard /> : <Login />}

{isAdmin && <AdminPanel />}

{
  status === "loading"
    ? <Loading />
    : status === "error"
      ? <Error />
      : <Content />
}

if (status === "loading") {
  return <Loading />;
}

if (status === "error") {
  return <Error />;
}

return <Content />;

const users = [
  { id: 1, name: "Raj" },
  { id: 2, name: "Amit" }
];

return (
  <ul>
    {users.map(user => (
      <li key={user.id}>
        {user.name}
      </li>
    ))}
  </ul>
);

key={user.id}

key={index}

function Form() {
  const [name, setName] = useState("");

  return (
    <input
      value={name}
      onChange={e => setName(e.target.value)}
    />
  );
}

function Login() {
  const handleSubmit = (e) => {
    e.preventDefault();

    console.log("Submit");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input />
      <button type="submit">
        Login
      </button>
    </form>
  );
}

const [form, setForm] = useState({
  email: "",
  password: ""
});

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

const handleChange = (e) => {
  const { name, value } = e.target;

  setForm(prev => ({
    ...prev,
    [name]: value
  }));
};

useEffect(() => {
  console.log("Effect");
});

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

useEffect(() => {
  console.log("User changed");
}, [userId]);

useEffect(() => {
  const timer = setInterval(() => {
    console.log("Running");
  }, 1000);

  return () => {
    clearInterval(timer);
  };
}, []);

const fullName = firstName + " " + lastName;

const [fullName, setFullName] = useState("");

useEffect(() => {
  setFullName(firstName + " " + lastName);
}, [firstName, lastName]);

const fullName = `${firstName} ${lastName}`;

useEffect(() => {
  async function fetchUsers() {
    const response = await fetch(
      "https://api.example.com/users"
    );

    const data = await response.json();

    setUsers(data);
  }

  fetchUsers();
}, []);

const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
  async function loadData() {
    try {
      setLoading(true);

      const response = await fetch("/api/users");

      if (!response.ok) {
        throw new Error("Failed to fetch");
      }

      const result = await response.json();

      setData(result);
    } catch (err) {
      setError(err);
    } finally {
      setLoading(false);
    }
  }

  loadData();
}, []);

if (loading) return <Loading />;
if (error) return <Error />;
return <UserList users={data} />;

const inputRef = useRef(null);

<input ref={inputRef} />

inputRef.current.focus();

const timerRef = useRef(null);

useState → change causes render
useRef   → change does not cause render

const ThemeContext = createContext(null);

<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

const theme = useContext(ThemeContext);

const AuthContext = createContext(null);

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);

  const login = (userData) => {
    setUser(userData);
  };

  const logout = () => {
    setUser(null);
  };

  return (
    <AuthContext.Provider
      value={{ user, login, logout }}
    >
      {children}
    </AuthContext.Provider>
  );
}

function useAuth() {
  return useContext(AuthContext);
}

const { user, logout } = useAuth();

const [state, dispatch] = useReducer(
  reducer,
  initialState
);

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

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

    default:
      return state;
  }
}

dispatch({ type: "increment" });

dispatch({
  type: "addUser",
  payload: user
});

const filteredUsers = useMemo(() => {
  return users.filter(user =>
    user.name.includes(search)
  );
}, [users, search]);

const handleDelete = useCallback((id) => {
  deleteUser(id);
}, [deleteUser]);

const UserCard = memo(function UserCard({
  user
}) {
  return <h2>{user.name}</h2>;
});

memo ≠ automatically faster

const [isPending, startTransition] =
  useTransition();

function handleSearch(value) {
  startTransition(() => {
    setSearch(value);
  });
}

{isPending && <p>Updating...</p>}

const deferredSearch = useDeferredValue(search);

User typing
     ↓
Input should stay responsive
     ↓
Heavy UI can update later

useSomething

function useWindowWidth() {
  const [width, setWidth] = useState(
    window.innerWidth
  );

  useEffect(() => {
    const handleResize = () => {
      setWidth(window.innerWidth);
    };

    window.addEventListener(
      "resize",
      handleResize
    );

    return () => {
      window.removeEventListener(
        "resize",
        handleResize
      );
    };
  }, []);

  return width;
}

const width = useWindowWidth();

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

  return <div>{count}</div>;
}

if (isLoggedIn) {
  const [user, setUser] = useState(null);
}

for (...) {
  useState();
}

function handleClick() {
  useState();
}

import { use } from "react";

function Comments({ commentsPromise }) {
  const comments = use(commentsPromise);

  return comments.map(comment => (
    <p key={comment.id}>
      {comment.text}
    </p>
  ));
}

function MyInput({ ref }) {
  return <input ref={ref} />;
}

useActionState()

const [
  state,
  formAction,
  isPending
] = useActionState(
  action,
  initialState
);

<Suspense fallback={<Loading />}>
  <Profile />
</Suspense>

View Transitions
Fragment Refs
browser()
Trusted Types
React Compiler improvements

import {
  createRoot
} from "react-dom/client";

createRoot(
  document.getElementById("root")
).render(
  <App />
);

<StrictMode>
  <App />
</StrictMode>

npm install react-router-dom

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

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

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

    <Route
      path="/products"
      element={<Products />}
    />
  </Routes>
</BrowserRouter>

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

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

const navigate = useNavigate();

navigate("/dashboard");

<Route
  path="/users/:id"
  element={<User />}
/>

const { id } = useParams();

/users/101

id === "101"

function ProtectedRoute({ children }) {
  const { user } = useAuth();

  if (!user) {
    return <Navigate to="/login" />;
  }

  return children;
}

<Route
  path="/dashboard"
  element={
    <ProtectedRoute>
      <Dashboard />
    </ProtectedRoute>
  }
/>

components/
   ↓
hooks/
   ↓
services/
   ↓
API

// services/userService.js

export async function getUsers() {
  const response = await fetch("/api/users");

  if (!response.ok) {
    throw new Error("Failed");
  }

  return response.json();
}

const users = await getUsers();

npm install axios

import axios from "axios";

const response = await axios.get(
  "/api/users"
);

console.log(response.data);

await axios.post(
  "/api/users",
  {
    name: "Raj",
    email: "raj@example.com"
  }
);

VITE_API_URL=https://api.example.com

const API_URL =
  import.meta.env.VITE_API_URL;

Database password
Private API key
Secret token

Loading
Success
Error
Empty

if (loading) {
  return <Loader />;
}

if (error) {
  return <ErrorMessage />;
}

if (!users.length) {
  return <EmptyState />;
}

return <UserList users={users} />;

<ErrorBoundary fallback={<ErrorPage />}>
  <App />
</ErrorBoundary>

<Suspense fallback={<Loading />}>
  <Profile />
</Suspense>

Component loading
      ↓
Suspense boundary
      ↓
Fallback UI
      ↓
Component ready
      ↓
Real UI

const Dashboard = lazy(
  () => import("./Dashboard")
);

<Suspense fallback={<Loading />}>
  <Dashboard />
</Suspense>

Smaller initial bundle
       ↓
Faster initial load
       ↓
Load feature when required

Local UI state
     ↓
useState

Complex local state
     ↓
useReducer

Shared simple state
     ↓
Context

Large global application state
     ↓
State management library

Server/API state
     ↓
Dedicated server-state/data-fetching solution

        Parent
       /      \
   Child A   Child B

function Parent() {
  const [value, setValue] = useState("");

  return (
    <>
      <ChildA
        value={value}
        setValue={setValue}
      />

      <ChildB value={value} />
    </>
  );
}

const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");

const [fullName, setFullName] = useState("");

const fullName =
  `${firstName} ${lastName}`;

user.name = "Raj";

setUser(prev => ({
  ...prev,
  name: "Raj"
}));

users.push(user);

setUsers(prev => [
  ...prev,
  user
]);

App.jsx
 └── 2000 lines

App
├── Navbar
├── Sidebar
├── Dashboard
│   ├── StatsCard
│   ├── Chart
│   └── RecentUsers
└── Footer

Button
Modal
Input
ProductCard
UserCard
Navbar
Sidebar
Pagination
Table

Smart Component
    ↓
logic/data

Presentational Component
    ↓
UI

Page / Feature
    ↓
Data + orchestration
    ↓
Reusable UI components

src/
├── app/
│   ├── routes.jsx
│   └── providers.jsx
│
├── features/
│   ├── auth/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── services/
│   │   └── pages/
│   │
│   └── products/
│       ├── components/
│       ├── hooks/
│       ├── services/
│       └── pages/
│
├── components/
├── hooks/
├── services/
├── utils/
└── main.jsx

Split components

Correct dependencies
Caching
Request management

Pagination
Virtualization
Lazy loading

Profile first
Then optimize

State placement
Props
Context
Component structure
Memoization

□ Keep state local when possible
□ Avoid unnecessary effects
□ Avoid unnecessary global state
□ Use stable keys
□ Lazy load large routes/features
□ Optimize large lists
□ Avoid expensive work during render
□ Profile before optimizing
□ Use memoization when it solves a real problem
□ Keep components focused

Components
Props
State
Context
Render behavior
Performance

user.name = "Raj";

setUser({
  ...user,
  name: "Raj"
});

users.map(user => (
  <UserCard user={user} />
))

users.map(user => (
  <UserCard
    key={user.id}
    user={user}
  />
))

key={index}

useEffect(() => {
  fetchUser(userId);
}, []);

useEffect(() => {
  fetchUser(userId);
}, [userId]);

<button onClick={handleClick()}>

<button onClick={handleClick}>

<button
  onClick={() => handleClick(id)}
>

useMemo()
useCallback()
memo()

Props
→ parent controlled
→ read-only

State
→ component-controlled
→ can change

React
 ↓
Web
 ↓
HTML + CSS + Browser DOM

React Native
 ↓
Mobile
 ↓
iOS + Android

Components
Props
State
Hooks
Context
Custom Hooks

type UserProps = {
  name: string;
  age: number;
};

function User({ name, age }: UserProps) {
  return (
    <div>
      {name} - {age}
    </div>
  );
}

const [users, setUsers] =
  useState<User[]>([]);

const handleChange = (
  e: React.ChangeEvent<HTMLInputElement>
) => {
  console.log(e.target.value);
};

type User = {
  id: number;
  name: string;
  email: string;
};

UI
 ↓
Component
 ↓
Custom Hook
 ↓
Service/API Layer
 ↓
Backend
 ↓
Database

ProductPage
    ↓
useProducts()
    ↓
productService.getProducts()
    ↓
GET /api/products
    ↓
Backend

Login Form
   ↓
POST /login
   ↓
Backend
   ↓
Token / Session
   ↓
Frontend Auth State
   ↓
Protected Routes

AuthProvider
useAuth()
ProtectedRoute
LoginPage
Logout
Refresh/session handling

C → Create
R → Read
U → Update
D → Delete

POST   → Create
GET    → Read
PUT    → Replace
PATCH  → Partial update
DELETE → Delete

GET    /api/products
POST   /api/products
GET    /api/products/10
PATCH  /api/products/10
DELETE /api/products/10

const filteredProducts = products.filter(
  product =>
    product.name
      .toLowerCase()
      .includes(search.toLowerCase())
);

const filtered = products.filter(
  product =>
    category === "all" ||
    product.category === category
);

const filtered = products.filter(product => {
  const matchesSearch =
    product.name
      .toLowerCase()
      .includes(search.toLowerCase());

  const matchesCategory =
    category === "all" ||
    product.category === category;

  return matchesSearch && matchesCategory;
});

const start =
  (page - 1) * pageSize;

const end =
  start + pageSize;

const visibleItems =
  items.slice(start, end);

GET /products?page=2&limit=20

User types:
R
Re
Rea
Reac
React

5 API requests

React
 ↓
wait
 ↓
1 API request

useEffect(() => {
  const timer = setTimeout(() => {
    searchProducts(search);
  }, 500);

  return () => clearTimeout(timer);
}, [search]);

localStorage.setItem(
  "theme",
  "dark"
);

const theme =
  localStorage.getItem("theme");

localStorage.removeItem("theme");

localStorage.setItem(
  "user",
  JSON.stringify(user)
);

const user = JSON.parse(
  localStorage.getItem("user")
);

<button>

<div onClick={...}>

<img
  src="/logo.png"
  alt="Company logo"
/>

<label htmlFor="email">
  Email
</label>

<input id="email" />

□ Don't trust frontend validation
□ Validate on backend
□ Don't expose secrets
□ Sanitize untrusted HTML
□ Avoid unnecessary dangerouslySetInnerHTML
□ Use HTTPS
□ Handle authentication securely
□ Enforce authorization server-side
□ Keep dependencies updated

Unit Tests
Integration Tests
End-to-End Tests

Component rendering
User interaction
Forms
API behavior
Navigation
Critical business logic

User clicks Login
      ↓
Form submits
      ↓
API succeeds
      ↓
Dashboard appears

□ Environment variables
□ Error handling
□ Loading states
□ Empty states
□ Responsive UI
□ Accessibility
□ Authentication
□ Authorization
□ API error handling
□ Validation
□ Performance
□ SEO where applicable
□ Analytics
□ Logging
□ Error monitoring
□ Tests
□ Production build

Props
  +
State
  +
Context
  ↓
Render
  ↓
UI

User action
   ↓
Event handler
   ↓
State update
   ↓
React render
   ↓
Updated UI

React component
      ↓
Effect
      ↓
External system

1. Components को pure रखने की कोशिश करो.

2. State को directly mutate मत करो.

3. Hooks को top level पर call करो.

4. List में stable keys use करो.

5. हर चीज को state मत बनाओ.

6. हर चीज के लिए useEffect मत लगाओ.

7. State को जरूरत के सबसे नजदीक रखो.

8. Reusable logic को custom Hook में निकालो.

9. पहले profile करो, फिर performance optimize करो.

10. Backend authorization पर भरोसा रखो, frontend पर नहीं.

11. Small reusable components बनाओ.

12. Loading + error + empty states हमेशा सोचो.

13. Business logic और UI को जरूरत के अनुसार separate रखो.

14. Official React docs से current APIs सीखो.

15. Code पढ़ने लायक होना चाहिए, सिर्फ चलने लायक नहीं।

// ========== COMPONENT ==========

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


// ========== PROPS ==========

function User({ name, age }) {
  return (
    <h2>
      {name} - {age}
    </h2>
  );
}

<User name="Raj" age={20} />


// ========== STATE ==========

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

setCount(10);

setCount(prev => prev + 1);


// ========== OBJECT STATE ==========

const [user, setUser] = useState({
  name: "",
  age: 20
});

setUser(prev => ({
  ...prev,
  name: "Raj"
}));


// ========== ARRAY STATE ==========

setItems(prev => [
  ...prev,
  newItem
]);

setItems(prev =>
  prev.filter(item => item.id !== id)
);

setItems(prev =>
  prev.map(item =>
    item.id === id
      ? { ...item, name: "Updated" }
      : item
  )
);


// ========== EVENT ==========

<button onClick={handleClick}>
  Click
</button>

<input
  value={name}
  onChange={e => setName(e.target.value)}
/>


// ========== CONDITIONAL ==========

{isLoggedIn
  ? <Dashboard />
  : <Login />
}

{isAdmin && <AdminPanel />}


// ========== LIST ==========

{users.map(user => (
  <UserCard
    key={user.id}
    user={user}
  />
))}


// ========== EFFECT ==========

useEffect(() => {
  // side effect

  return () => {
    // cleanup
  };
}, [dependency]);


// ========== REF ==========

const inputRef = useRef(null);

<input ref={inputRef} />;

inputRef.current?.focus();


// ========== MEMO ==========

const result = useMemo(
  () => expensiveCalculation(data),

□ JavaScript ES6+
□ JSX
□ Components
□ Props
□ Events
□ useState
□ Conditional rendering
□ Lists
□ Forms

□ useEffect
□ useRef
□ Context
□ useReducer
□ Custom Hooks
□ React Router
□ API integration
□ Authentication
□ CRUD
□ Error handling

□ Suspense
□ useTransition
□ useDeferredValue
□ React Compiler
□ Performance profiling
□ Advanced architecture
□ Server rendering concepts
□ Testing
□ Accessibility
□ Production deployment

useState
Events
Conditional rendering

State
Forms
Arrays
CRUD
Components

API
useEffect
Loading
Error
Search

API
Search
Filter
Sort
Pagination
Reusable components

Login
Register
Auth state
Protected routes
Logout
API

Routing
Charts
CRUD
Tables
Forms
Authentication
Permissions

API
Categories
Search
Pagination
Bookmarks
Authentication
Notifications
Responsive UI

Teach me React useState like a beginner.
Explain it in simple Hinglish.
Give me one practical example,
then give me 5 exercises without solutions.

Act as a senior React developer.

Here is my React code:
[PASTE CODE]

Find the bugs.
Explain why each bug happens.
Give the corrected code.
Also explain how I can avoid this mistake.

Act as a React interviewer.

Ask me one React interview question at a time.
Start from beginner level and gradually move
to advanced level.

Do not show the answer until I respond.
After my answer, rate it from 1-10.

Help me build a production-quality React
e-commerce application.

Do not give me the entire code at once.

Break the project into milestones:
1. Architecture
2. Components
3. Routing
4. State
5. API
6. Authentication
7. Cart
8. Checkout
9. Testing
10. Deployment

Teach me while building.

Review this React component like a senior
software engineer.

Check:
- readability
- component design
- state management
- useEffect usage
- performance
- accessibility
- security
- unnecessary complexity

Give specific improvements.

□ JSX
□ Components
□ Props
□ State
□ Events
□ Controlled components
□ Lists and keys
□ useEffect
□ useRef
□ useContext
□ useReducer
□ Custom Hooks
□ React Router
□ API integration
□ Authentication
□ State management
□ Performance
□ memo/useMemo/useCallback
□ Suspense
□ React 19 features
□ React Compiler
□ Testing

1. React क्या है?
2. React और JavaScript में difference?
3. Props vs State?
4. State mutation क्यों गलत है?
5. Virtual DOM क्या है?
6. Re-render क्या है?
7. useEffect कब use करना चाहिए?
8. useEffect कब नहीं use करना चाहिए?
9. useRef vs useState?
10. useMemo vs useCallback?
11. Context क्या solve करता है?
12. Prop drilling क्या है?
13. State lifting क्या है?
14. Custom Hook क्या है?
15. Key क्यों जरूरी है?
16. Controlled vs uncontrolled component?
17. React.memo क्या करता है?
18. Suspense क्या है?
19. useTransition क्या है?
20. React Compiler क्या करता है?

let/const
functions
arrow functions
objects
arrays
map/filter/reduce
destructuring
spread
modules
promises
async/await
closures

useState
→ update → re-render

useRef
→ update → no re-render

React
 ↓
TypeScript
 ↓
React Router
 ↓
API / Backend
 ↓
Authentication
 ↓
Testing
 ↓
Next.js / Full-stack React
 ↓
Production Architecture

REACT
│
├── JSX
│
├── COMPONENTS
│   ├── Function Components
│   ├── Props
│   └── children
│
├── RENDERING
│   ├── Conditional
│   ├── Lists
│   └── Keys
│
├── EVENTS
│   ├── onClick
│   ├── onChange
│   └── onSubmit
│
├── STATE
│   ├── useState
│   ├── useReducer
│   └── State Lifting
│
├── EFFECTS
│   └── useEffect
│
├── REFS
│   └── useRef
│
├── SHARED STATE
│   ├── Context
│   └── State Libraries
│
├── REUSABLE LOGIC
│   └── Custom Hooks
│
├── ROUTING
│   └── React Router
│
├── API
│   ├── fetch
│   ├── Axios
│   ├── Loading
│   ├── Error
│   └── Empty State
│
├── PERFORMANCE
│   ├── memo
│   ├── useMemo
│   ├── useCallback
│   ├── useTransition
│   └── useDeferredValue
│
├── MODERN REACT
│   ├── Suspense
│   ├── use
│   ├── Actions
│   ├── ref as prop
│   └── React Compiler
│
├── QUALITY
│   ├── Accessibility
│   ├── Testing
│   ├── Security
│   └── Error Handling
│
└── PRODUCTION
    ├── Architecture
    ├── Authentication
    ├── Performance
    ├── Deployment
    └── Monitoring

Learn
  ↓
Code
  ↓
Break
  ↓
Debug
  ↓
Understand
  ↓
Build
  ↓
Repeat

JavaScript
     ↓
React Fundamentals
     ↓
Hooks
     ↓
API Integration
     ↓
Routing
     ↓
Authentication
     ↓
TypeScript
     ↓
Real Projects
     ↓
Testing
     ↓
Performance
     ↓
Next.js / Full-Stack
     ↓
Job-Ready React Developer

Props  = Data in
State  = Data that changes
Event  = User action
Effect = External synchronization
Ref    = Mutable value / DOM reference
Context = Shared data
Hook   = Reusable React logic
Component = Reusable UI