# React — Components, Hooks, and State Management

## What is React?

React is a JavaScript library for building user interfaces. It uses a component-based architecture where UIs are composed of reusable, isolated pieces.

## JSX

JSX is syntax extension that lets you write HTML-like markup inside JavaScript:

```jsx
const element = <h1>Hello, world!</h1>;
```

Under the hood, JSX compiles to `React.createElement()` calls. You can embed JavaScript expressions with `{expression}`:

```jsx
const name = "Alice";
const element = <h1>Hello, {name}!</h1>;
```

## Components (Functional)

Modern React uses **functional components** — plain JavaScript functions that return JSX:

```jsx
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}
```

Components accept **props** (properties) as their single argument. Props are read-only.

## Props

Props flow down from parent to child. They're the primary way to pass data:

```jsx
<Greeting name="Alice" />
function Greeting({ name }) {
  return <p>Hi, {name}</p>;
}
```

## State (useState)

**State** is data that changes over time. Use the `useState` hook:

```jsx
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}
```

- `useState(0)` returns `[value, setter]`
- Calling the setter triggers a re-render
- State is isolated per component instance

## Effects (useEffect)

**Effects** handle side effects: fetching data, subscribing, DOM manipulation:

```jsx
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]); // Re-run when count changes
```

- First argument: function to run
- Second argument: dependency array — effect runs when any dependency changes
- Empty array `[]` = run once on mount

## Event Handling

Attach handlers with camelCase props:

```jsx
<button onClick={handleClick}>Click</button>
<input onChange={(e) => setValue(e.target.value)} />
```

React uses synthetic events (cross-browser wrapper). Call `e.preventDefault()` to prevent default behavior.

## Conditional Rendering

Render conditionally with `&&`, ternaries, or early returns:

```jsx
{isLoggedIn && <Dashboard />}
{status === 'loading' ? <Spinner /> : <Content />}
if (!user) return <Login />;
```

## Lists and Keys

Map arrays to elements. **Keys** help React track identity:

```jsx
{items.map(item => (
  <li key={item.id}>{item.name}</li>
))}
```

Keys must be unique among siblings. Use stable IDs, not array indices for dynamic lists.

## The React Rendering Cycle

When state changes, React re-renders. Here's the flow:

```mermaid
flowchart LR
    A[State Change] --> B[Re-render]
    B --> C[Virtual DOM Diff]
    C --> D[DOM Update]
```

```mermaid
flowchart LR
    A[State Change] --> B[Virtual DOM Diff]
    B --> C[Reconciliation]
    C --> D[Real DOM Update]
```

1. **State Change** — `setState` or similar triggers update
2. **Virtual DOM Diff** — React compares new tree with previous
3. **Reconciliation** — Determines minimal DOM operations
4. **Real DOM Update** — Only changed nodes are updated

This makes React efficient: full re-renders are cheap in memory; only minimal DOM mutations occur.

## Rules of Hooks

- Call hooks only at the **top level** — not inside loops, conditions, or nested functions
- Call hooks only from **React function components** or custom hooks
- Custom hook names must start with `use`