React & FrontendInterview questions and answers

A self-contained, reusable piece of UI defined as a JavaScript function (or class) that returns JSX. Think of it like a Lego block — you build a page by composing many small components (Button, Card, NavBar). Each owns its own logic and styling, which makes the UI easier to maintain and test.

JSX is a syntax extension that lets you write HTML-like markup directly inside JavaScript. Under the hood it compiles to React.createElement() calls. So <div>Hi</div> becomes React.createElement('div', null, 'Hi') — JSX is just sugar that makes UI code feel natural to read.

Props are inputs a component receives from its parent — they're read-only, like function arguments. State is data the component owns and can change over time, and changing it triggers a re-render. Rule of thumb: if a value can change while the component is alive, it's state; if it's given from outside, it's props.

Functional components are plain JavaScript functions that return JSX and use hooks for state and side effects. Class components use ES6 classes with lifecycle methods like componentDidMount. Modern React strongly prefers functional + hooks — shorter code, easier reuse, and React's new features mostly target this style.

Three phases: Mounting (component is created and inserted into the DOM), Updating (props or state change cause a re-render), and Unmounting (component is removed). With hooks, useEffect handles all three phases via its dependency array and its returned cleanup function.