# 🚀 React Component API — The Complete Guide

A **Component API** defines **how a component works**:

* What data it takes (Props)
    
* What internal data it manages (State)
    
* How it responds to events (Event Handlers)
    
* How it interacts with the DOM (Refs)
    
* How it runs code at specific moments (Lifecycle Methods or Hooks)
    

Think of it as the blueprint that describes *how a component should behave*.

---

# 🧩 **1\. Props — External Input to Components**

Props allow parent components to send data to child components.

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

Usage:

```apache
<Greeting name="Sagar" />
```

### ✔ Key Features

* Read-only
    
* Help make components reusable
    
* Allow dynamic rendering
    

---

# 🔄 **2\. State — Internal Data of a Component**

State stores data that can change over time.

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

State updates trigger a re-render and update the UI automatically.

### ✔ Key Features

* Managed inside the component
    
* Component re-renders when state changes
    
* Perfect for dynamic UI changes
    

---

# 🎛 **3\. Event Handlers — Interaction API**

Components respond to user actions:

```apache
function Button() {
  function handleClick() {
    alert("Button clicked!");
  }

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

### ✔ Key Features

* Add interactivity
    
* React automatically handles synthetic events
    
* Easy to pass callbacks to child components
    

---

# 🔍 **4\. Refs — Direct Access to DOM Elements**

Refs provide a way to access DOM nodes or React elements directly.

```apache
const inputRef = useRef(null);

function focusInput() {
  inputRef.current.focus();
}
```

### ✔ When to Use Refs

* Managing focus
    
* Trigger animations
    
* Interacting with third-party libraries
    

---

# ⏳ **5\. Lifecycle Methods / Hooks — Run Code at the Right Time**

In functional components, we use **Hooks**.

### useEffect — Runs side-effects

```apache
useEffect(() => {
  console.log("Component mounted");
}, []);
```

### useLayoutEffect, useMemo, useCallback

All are part of the component API for optimizing and controlling rendering logic.

---

# 🧱 **6\. Component Composition — Building with Components**

React encourages combining components to create powerful UIs:

```apache
<Card>
  <Title />
  <Content />
</Card>
```

Composition &gt; Inheritance  
This is a core part of the React design philosophy.

---

# 🧬 **7\. Context — Sharing Data Without Props Drilling**

Context allows data to be shared deeply in the tree:

```apache
const ThemeContext = createContext();
```

Used for:

* Themes
    
* Authentication
    
* Language preferences
    

---

# 🧰 **8\. Error Boundaries — Handling Errors Gracefully**

Used to catch UI errors in class components.

```apache
class ErrorBoundary extends React.Component {
  componentDidCatch(error, info) {
    console.log(error, info);
  }
}
```

---

# 🧨 **9\. PropTypes — Validating Component API**

Helps ensure correct usage of components:

```apache
Greeting.propTypes = {
  name: PropTypes.string.isRequired
};
```

---

# 🏁 **Conclusion**

The **React Component API** is what makes React powerful, flexible, and developer-friendly. By understanding its core pieces—Props, State, Events, Refs, Hooks, and Context—you gain full control over how your components communicate and behave.

Mastering the Component API is the first step to becoming a strong React developer.