Fundamentalsbeginner
Function Components
Understand what a function component is and why it became the standard way to write React UI.
A function component is simply a JavaScript function that accepts a props object and returns JSX describing what should render. Since React 16.8 introduced hooks, function components can hold state and trigger side effects, which eliminated most reasons to reach for class components.
A function component is like a recipe card that gets re-read from the top every time an ingredient changes — the fiber is the notebook page where React jots down which step you're on so it can pick up state correctly next time.
Key Concepts
1
Because they're plain functions, function components are easier to read, test, and compose than classes. There's no this binding to worry about, no constructor boilerplate, and no need to remember which lifecycle method does what — instead you describe behavior in terms of render output and effects tied to that output.
this
2
Every time a component's state or props change, React calls the function again to get a new description of the UI. This re-execution model is central to understanding hooks: because the function runs top to bottom on every render, hooks like useState and useEffect need consistent ordering to correctly associate state with a given call.
useStateuseEffect
3
Interviewers frequently ask candidates to explain why function components replaced classes, expecting an answer that touches on simplicity, hook composition, and better logic reuse via custom hooks rather than higher-order components or mixins.