React Components — React Technical Interview Questions & Answers

React Components

React Components

  • A component is a function whose name starts with a capital letter and returns UI. Hello is a component. div is not — lowercase is treated as an HTML tag. If you write function card() and then <card />, React looks for a real HTML <card> element, not your function. Capital C: function Card() { … } then <Card />. That naming rule is not style. It is how React decides.
  • You split a page so each file has one job: Header, ProductCard, Footer, CartButton. ProductCard does not fetch the whole user profile. Header does not calculate GST. Small components are easier to test and reuse. A 400-line App.jsx is how juniors drown.
  • Function components are the default today. They take props as the first argument: function Price({ amount }). They can call hooks. Class components still appear in old codebases: class Box extends Component { render() { return … } }. You must be able to read a class. You should not start a new screen as a class unless the team file already is one.
  • Let’s take Badge on the board. function Badge({ text }) { return <small>{text}</small>; } then inside Product: <Badge text="Sale" />. Screen: Sale next to the title. Same Badge on ten cards. That reuse is why we bother with components at all.
  • Props in, UI out. A component should not secretly read a global variable for the thing it displays — pass it in. Side effects (fetch, timers, document.title) go in useEffect, not in the middle of the return. Pure render + effects on the side is the mental model.
  • Trap: creating a component inside another component’s body on every render (function Parent() { function Child() {…} }). Child remounts every time Parent renders — lost state, slow. Define Child outside Parent, or pass it as a stable component.
  • React Components — on screen: Shoes + Sale badge. Product uses Badge. Name starts with a capital letter.
  Parent
    │ props (read-only)
    ▼
  Child → UI

Technical Interview Tip: Capital name + return UI + one child example.

Code Examples for React Components

Example

// Components
function Badge({ text }) {
  return <small>{text}</small>;
}

export default function Product() {
  return (
    <section>
      <h2>Shoes</h2>
      <Badge text="Sale" />
    </section>
  );
}

React Components — on screen: Shoes + Sale badge. Product uses Badge. Name starts with a capital letter.

How to Explain React Components to an Interviewer

What happens if you name a component card?

React thinks it is HTML

Are class components required in new apps?

No Functions + hooks