Skip to main content

React Components

Component = reusable UI building block

What is a Component?​

"Reusable UI piece"

A component is a reusable piece of UI that encapsulates markup, logic, and styling.

"A React component is a reusable piece of UI that encapsulates markup, logic, and state, returning JSX to describe what should appear on screen."

Function Components​

Modern, preferred approach

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

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

"Function components are the modern, preferred way to write React components using JavaScript functions."

Component Composition​

Components inside components

function App() {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

"Components can be composed by using them inside other components, building complex UIs from simple pieces."

Props​

Data passed to components

function Greeting({ name, age }) {
  return (
    <div>
      Hello, {name}. You are {age}.
    </div>
  );
}

<Greeting name="John" age={30} />;

"Props are read-only data passed from parent to child components, enabling component reusability."

Component State​

Internal component data

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

"State is internal component data that can change over time, managed with useState hook in function components."

Component Lifecycle​

Mount → Update → Unmount

  • Mount: Component added to DOM
  • Update: Props/state change
  • Unmount: Component removed

Managed with useEffect in function components.

"Components go through mounting, updating, and unmounting phases, managed with useEffect in function components."

Pure Components​

Same props = same output

Pure components:

  • Same props always produce same output
  • No side effects
  • Easier to test and reason about

"Pure components always return the same output for the same props, with no side effects."

Component Types​

Presentational · Container · Higher-Order

  • Presentational: UI only, receive props
  • Container: Logic + state, fetch data
  • Higher-Order Component (HOC): Wraps other components

"Components can be presentational (UI), container (logic), or higher-order (wrappers)."

9️⃣ Component Best Practices​

✅ Single responsibility ✅ Reusable and composable ✅ Props for configuration ✅ State for internal data ✅ Extract complex logic to custom hooks ✅ Keep components small ❌ Don't put everything in one component

"React components are reusable UI building blocks that encapsulate markup, logic, and state. Function components are preferred, using props for data and useState for state. Components can be composed, go through lifecycle phases (mount/update/unmount), and should follow single responsibility principle. Pure components produce same output for same props."

🧠 Ultra-Short Cheat Sheet​

Reusable UI pieces
Function components (preferred)
Props (data in)
State (internal data)
Composition
Lifecycle (mount/update/unmount)
Pure components
Single responsibility