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.

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

Usage:

<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.

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:

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.

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

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:

<Card>
  <Title />
  <Content />
</Card>

Composition > 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:

const ThemeContext = createContext();

Used for:

• Themes

• Authentication

• Language preferences

---

🧰 8. Error Boundaries — Handling Errors Gracefully

Used to catch UI errors in class components.

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

---

🧨 9. PropTypes — Validating Component API

Helps ensure correct usage of components:

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.