React Components

React components encapsulate UI structure and behavior as reusable units. They accept inputs through props, can manage state, and return React elements that describe what should appear in the UI.

A React component is a JavaScript function that receives inputs, usually through `props`, and returns JSX or other React elements. Component names conventionally begin with an uppercase letter so React can distinguish user-defined components from built-in HTML elements such as `div` and `button`.

Components make interfaces easier to organize and reuse. A parent component can render the same child component multiple times with different props, such as different labels or data. Keeping a component focused on a particular piece of UI generally makes it easier to understand and test.

Props are inputs supplied by a parent and should be treated as read-only by the receiving component. When a component needs data that changes over time, it can use state, commonly through a Hook such as `useState`. Updating state causes React to render the affected component again.

A component can compose other components, allowing larger interfaces to be built from smaller pieces. For example, a `Profile` component might render an `Avatar`, `UserName`, and `ActionButton` component. This composition model is central to React's approach to building user interfaces.

Key points

• Components are reusable units of UI structure and behavior.
• Functional components are JavaScript functions that return React elements.
• Props are inputs passed from a parent and should be treated as read-only.
• State stores data that can change during a component's lifetime.
• Components can compose other components to build larger interfaces.

Interview questions

What are props in React?

Props are values passed from a parent component to a child component. They let the parent configure how the child renders or behaves. The child should treat its props as read-only rather than modifying them directly. Props can contain primitive values, objects, arrays, functions, or even React elements.

Why use components instead of putting all UI in one function?

Components divide an interface into smaller, understandable units. This encourages reuse and lets each component focus on a particular responsibility. Composition also allows the same component to be rendered with different props in different places. Smaller components can make changes and testing more manageable, although excessive fragmentation can also make code harder to follow.

What is a React component?

A React component is a reusable unit that describes part of a user interface. A functional component is typically a JavaScript function that returns React elements, often written with JSX. Components can receive data through props and can use state when their data changes over time. Larger interfaces are built by composing smaller components.

What happens when a component's state changes?

A state update schedules React to render the component again. During rendering, React calculates the UI that corresponds to the new state and reconciles the result with the existing rendered tree. React can then update the necessary parts of the DOM. Code should therefore describe the UI for a given state rather than manually synchronizing every DOM change.

How does component composition work in React?

Composition means constructing a larger UI from smaller components by rendering components inside other components. Data and behavior can be passed through props, and React also supports patterns such as `children` for passing nested content. Composition keeps relationships explicit and avoids relying on class inheritance to share UI behavior. Good component boundaries generally reflect meaningful UI responsibilities or reusable behavior.