• Cache Stampede, Customizer API : Selective Refresh vs postMessage, Webpack

  • A component is a reusable, independent unit of UI in React.

  • Each component must return JSX (cannot return undefined).

  • A React app can be visualized as a tree of components.

Functional Components

  • Defined as JavaScript functions.

  • Accept props (input data from parent).

  • Return JSX.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Using Components and Props

  • Props are read-only inputs passed from parent → child.

  • Components should not modify props.

function App() {
  return <Welcome name="John Doe" />;
}

Rules for Functions in Components

  • Top-level component functions:

    • Should not be async (they return JSX, not Promises).

  • Inner functions:

    • Can be async and used for logic (e.g., API calls).
function Example() {
  async function fetchData() {
    const res = await fetch("/api");
    return res.json();
  }

  return <div>Example Component</div>;
}

Component Reusability

  • Break UI into smaller reusable components.

  • Improves readability and maintainability.

Without Reusability

function MarvelHeros() {
  return (
    <ul>
      <li>Tony Stark</li>
      <li>Steve Rogers</li>
      <li>Peter Parker</li>
      <li>Bruce Banner</li>
    </ul>
  );
}

With Reusability

function MarvelHeros() {
  const herosList = [
    "Tony Stark",
    "Steve Rogers",
    "Peter Parker",
    "Bruce Banner"
  ];

  return (
    <ul>
      {herosList.map((hero, index) => (
        <DisplayHero key={index} name={hero} />
      ))}
    </ul>
  );
}

function DisplayHero({ name }) {
  return <li>{name}</li>;
}

Types of Components

  • Functional Components (modern, preferred)

  • Class Components (older, use lifecycle methods)

Virtual DOM (Quick Recap)

  • React uses a Virtual DOM (VDOM) stored in memory.

  • Update process:

    • Changes applied to VDOM.

    • React performs diffing (compare old vs new VDOM).

    • Only changed parts are updated in the real DOM.

Key Concepts to Remember

  • Components = building blocks of UI.

  • Props = immutable data from parent.

  • Always return JSX.

  • Prefer small, reusable components.

  • Use key when rendering lists.

Quick Concept Checks

  • Can components modify props? → No

  • Why components? → Reusability + modularity

  • Functional vs class? → Functions are simpler and use hooks