Answer:

✨JSX (JavaScript XML) is a syntax extension for JavaScript that allows us to write HTML-like code inside JavaScript, mainly used with React.

It makes the UI structure easier to visualize and more readable compared to using plain JavaScript functions like React.createElement.

⚙️ How JSX Works

Although JSX looks like HTML, it’s not HTML.

Under the hood, JSX is compiled into JavaScript objects, which React uses to efficiently build and update the UI through the Virtual DOM.

💡 Why JSX is Useful

JSX supports:

● Embedding JavaScript expressions using {}

● Creating reusable UI components

● Combining structure (markup), logic, and styling in one place

This makes building interfaces in React more intuitive and modular.

✨ useState in React

useState is a built-in React Hook that allows functional components to have their own state.

Before hooks, only class components could manage state using this.state. With useState, we can store and update values directly inside functional components.

It returns an array with two elements:

1. The current state value.
2. A function to update that state.

🔑 Initial Value

The initial value of the state is passed as an argument to useState. This value will be used only during the first render.

---

🧑‍💻 Example:

1import { useState } from "react";
2
3function Counter() {
4  const [count, setCount] = useState(0); // initial value = 0
5
6  return (
7    <div className="flex flex-col items-center justify-center gap-4 p-6 bg-gray-100 rounded-2xl shadow-md w-64 mx-auto">
8      <p className="text-xl font-semibold text-gray-700">Count: {count}</p>
9      <button
10        onClick={() => setCount(count + 1)}
11        className="px-4 py-2 bg-blue-500 text-white font-medium rounded-lg shadow hover:bg-blue-600 transition"
12      >
13        Increment
14      </button>
15    </div>
16  );
17}

• count → current state.
• setCount → function to update the state.
• On every call to setCount, the component re-renders with the new value.

No, we should never update the state directly because React relies on immutability and state references to detect changes. If we directly mutate the state (e.g., state.value = newValue), React won’t know that the state has changed, so it won’t trigger a re-render.

Instead, we always use the state updater function returned by useState (e.g., setState) to ensure React schedules a proper re-render.

Key points:

1. Direct state mutation breaks React's reactivity.
2. React uses state references to detect changes.
3. Using setState ensures proper component re-render.
4. This principle applies in JSX, MDX, and when styling with Tailwind.
5. Always treat state as immutable for predictable UI updates.