Jsx & Components Interview Questions

JSX is a syntax extension for JavaScript that allows writing HTML-like code in React. Unlike HTML, JSX uses camelCase properties, requires closing all tags, uses className instead of class, and can directly embed JavaScript expressions using curly braces {}.

Functional components are JavaScript functions that accept props and return JSX, making them simpler and more concise. Class components extend React.Component, can have local state and lifecycle methods, but are generally more verbose. Modern React primarily uses functional components with hooks.

Props are passed as attributes in JSX, similar to HTML attributes. Parent components can pass any JavaScript value (strings, numbers, objects, functions) to child components. Child components receive these props as function parameters or this.props in class components.

Fragments (<React.Fragment> or <>) allow grouping multiple children without adding extra nodes to the DOM. They're useful when you need to return multiple elements from a component without introducing unnecessary wrapper divs, helping maintain clean DOM structure.

JSX supports conditional rendering through: 1) Ternary operators {condition ? elementA : elementB}, 2) Logical && operator for simple conditions {condition && element}, 3) If statements outside the return statement, 4) Extracting conditions to separate methods.

Pure Components (React.PureComponent or React.memo) implement shouldComponentUpdate with a shallow prop and state comparison. They're used to optimize performance by preventing unnecessary re-renders when props or state haven't changed significantly.

Dynamic attributes in JSX use curly braces to embed JavaScript expressions: className={`base ${conditional}`}, style={{property: value}}, or data-attributes={dynamicValue}. Boolean attributes can be set using conditional expressions.

HOCs are functions that take a component and return a new component with additional props or behavior. They're used for code reuse, adding additional functionality like data fetching, authentication, or logging. HOCs follow the pattern: const EnhancedComponent = higherOrderComponent(WrappedComponent).

Lists are rendered using array methods like map(). Each list item must have a unique 'key' prop for React's reconciliation process. Keys should be stable, predictable, and unique among siblings. Using array indices as keys is generally discouraged except for static lists.

Controlled components have their form data controlled by React state, with changes handled through setState. Uncontrolled components store form data in the DOM itself, accessed through refs. Controlled components provide more control but require more code.

Events in JSX use camelCase and pass functions as event handlers: onClick={handleClick}. React uses synthetic events for cross-browser compatibility. Event pooling (pre-React 17) meant event objects were reused for performance, requiring e.persist() for async access.

The children prop represents content between component opening and closing tags. It can be strings, elements, or functions (render props). Access via props.children in functional components or this.props.children in class components. Useful for component composition and reusability.

React.memo is a higher-order component that prevents unnecessary re-renders by memoizing the result. It performs a shallow comparison of props and only re-renders if props have changed. Useful for performance optimization in components with expensive renders.

Portals (ReactDOM.createPortal) allow rendering children into a DOM node outside the parent component's hierarchy. Useful for modals, tooltips, or floating elements that need to break out of parent container limitations while maintaining React context.

Prop validation is handled using PropTypes library for runtime checking. Define propTypes object to specify expected types, required props, and custom validators. In TypeScript, use interface or type definitions for compile-time checking.

Render props is a pattern where a component receives a function as prop that returns React elements. This enables sharing behavior between components by allowing parent components to control what children render while providing them with necessary data or functionality.

Dynamic imports use React.lazy() with Suspense component for code splitting. This allows components to be loaded only when needed: const DynamicComponent = React.lazy(() => import('./Component')). Suspense provides fallback content during loading.

Default exports (export default Component) allow importing with any name but limit one per file. Named exports (export const Component) require exact names or aliases when importing but allow multiple exports per file. Choice affects module organization and refactoring.

React favors composition over inheritance. Use props and children for component customization instead of extending classes. Composition provides more flexibility and clearer data flow. Common patterns include containment and specialization.

Error boundaries are components that catch JavaScript errors in child component tree, log errors, and display fallback UI. They must be class components using componentDidCatch or static getDerivedStateFromError. They don't catch errors in event handlers or async code.

Inline styles in JSX use double curly braces and camelCase properties: style={{backgroundColor: 'blue'}}. Values can be strings or numbers (pixels automatically added). Dynamic styles can use expressions or computed properties.

defaultProps provide default values for props when not specified by parent. Benefits include cleaner code and fail-safe defaults. Drawbacks include potential overhead and less explicit prop requirements. In modern React, consider default parameters for function components.

Functional components use hooks to replicate lifecycle methods: useState for state, useEffect for componentDidMount/Update/Unmount, useLayoutEffect for synchronous effects. This provides more flexible and targeted lifecycle management.

Best practices include: one component per file, grouping related components in folders, separating container and presentational components, using index files for exports, organizing by feature or type, and maintaining consistent naming conventions.

Beyond props, components can communicate through context API, event emitters, state management libraries (Redux/MobX), or custom hooks. Choice depends on scope of communication, app size, and performance requirements.

JSX is syntactic sugar that compiles to React.createElement calls. createElement takes element type, props object, and children as arguments. JSX provides more readable, HTML-like syntax while achieving the same result under the hood.

State can be initialized through useState hook with initial value, lazy initial state function for expensive computations, derived state from props, or custom hooks. Consider performance and whether state is truly needed versus props or computed values.

Reusable components should be generic, well-documented, properly typed, have clear props API, handle edge cases, maintain single responsibility, and be tested thoroughly. Consider composition, prop drilling, and state management needs.

Conditional CSS classes can be handled using template literals, array join methods, or className utilities like classnames library. Example: className={`base ${condition ? 'active' : ''}`} or using object syntax with classnames.