React Developer interview questions

React is a JavaScript library for building user interfaces from reusable components.

• Developers describe how the UI should look for the current data instead of manually changing DOM nodes.
• Components split an interface into independent pieces with their own inputs and behavior.
• React updates the browser DOM when component data changes.

A React component is a reusable unit that returns the UI React should render.

• A component can receive props from its parent.
• It can hold local state when its output must change over time.
• Components can render browser elements and other components.

A function component is a JavaScript function that React calls to calculate part of the UI.

• Its parameters usually contain props supplied by the parent.
• Its return value is normally JSX, a React element, or null.
• Hooks let function components use state and lifecycle-related behavior.

A capitalized JSX tag tells React that the tag refers to a user-defined component.

• Lowercase tags such as div and button are treated as built-in browser elements.
• An uppercase name such as Profile is resolved to a JavaScript variable in scope.
• Using a lowercase component name can make React interpret it as an unknown HTML tag.

JSX is a syntax extension that lets JavaScript code describe a React element tree with HTML-like notation.

• JSX is transformed into JavaScript calls or equivalent runtime instructions before execution.
• It can represent both browser elements and custom React components.
• JSX is optional, but it makes nested UI structures easier to read and write.

JavaScript expressions are placed inside curly braces in JSX.

• Expressions can provide text, prop values, attributes, or child elements.
• Calls, property access, arithmetic, and conditional expressions can produce values inside braces.
• Statements such as if, for, and variable declarations must run outside JSX or be expressed differently.

JSX uses JavaScript-oriented property names for several browser attributes.

• className is used instead of class because class is a JavaScript keyword.
• Most multiword DOM properties use camelCase, such as tabIndex and onClick.
• String literals can use quotes, while JavaScript values are passed inside curly braces.

A component returns one value representing its element tree, and a Fragment groups multiple siblings without adding a DOM node.

• A wrapper element such as div also creates one root but changes the resulting markup.
• The short Fragment syntax is written as an empty opening and closing tag.
• The explicit Fragment form can receive a key when used in a list.

A component is a function or class definition, while a React element is a description of what should appear in the UI.

• JSX such as <Button /> creates an element that refers to the Button component.
• React calls the component to obtain the elements it returns.
• Elements are immutable descriptions, while components contain the logic that produces them.

A pure component produces the same JSX for the same props and state without changing outside values during rendering.

• Rendering should calculate UI rather than perform side effects.
• A component must not mutate props or state while it renders.
• Event handlers and effects are the appropriate places for work caused by interaction or synchronization.

Props are inputs that a parent component passes to a child component.

• They can contain strings, numbers, objects, functions, or React elements.
• A child reads props to customize what it renders or how it behaves.
• Data commonly flows downward through the component tree via props.

A component should treat props as read-only because their values are owned by its parent.

• Mutating a prop can change shared data without React receiving a clear update request.
• The child should call a provided callback when it needs the parent to make a change.
• New objects or arrays should be created instead of modifying values received through props.

A function component can destructure named props in its parameter list and assign defaults there.

• Destructuring gives direct local names instead of repeated access through a props object.
• A default parameter value is used when the prop is undefined.
• A passed null value does not activate an undefined-only default.

The children prop contains the content placed between a component's opening and closing JSX tags.

• Children can be text, elements, components, expressions, or multiple items.
• Wrapper components can render children inside shared layout or styling.
• The parent controls the nested content while the wrapper controls where it appears.

Component composition builds larger interfaces by nesting and combining smaller components.

• Parents can configure children through props.
• Wrapper components can accept arbitrary content through children.
• Composition keeps each component focused while allowing the same pieces to be reused in different screens.

State is data owned by a component that React preserves between renders and can use to update the UI.

• State represents information that changes over time, such as an input value or selected item.
• Updating state requests another render of the component.
• Each mounted instance of a component has its own local state.

Props come from a parent, while state is owned and updated by the component instance that declares it.

• Both props and state can affect the rendered output.
• A component must not modify its props directly.
• State changes through its setter, while a parent changes the props it passes during its own render.

A local variable is recreated during each render, and changing it does not ask React to render again.

• React does not preserve ordinary local variables as component state between renders.
• A state setter records a value for the next render and schedules the update.
• Values that should persist and affect visible output usually belong in state.

useState returns a pair containing the current state value and a function that updates it.

• Array destructuring commonly gives the pair names such as count and setCount.
• The current value belongs to the render in which the component was called.
• Calling the setter queues a later render with the requested state.

React uses the initial useState value when it creates that component's state for the first time.

• Later renders read the stored state rather than resetting it to the initial argument.
• Passing a function lets React call it as an initializer during the initial render.
• The initializer should be pure because React may call it more than once in development checks.