React Interview Questions

React Interview Questions

React

A front-end and open-source JavaScript library useful in developing user interfaces, specifically for single-page applications. It follows a component-based approach to build complex and reusable UI components.

React Features

Supports server-side rendering, uses Virtual DOM instead of Real DOM, follows unidirectional data flow, and uses reusable/composable UI components.

Advantages of React

Uses Virtual DOM for efficiency, has a gentle learning curve, is SEO friendly (allows server-side rendering), uses reusable components, and has a huge ecosystem of libraries.

Limitations of React

It is only a library, not a full-blown framework; its numerous components can take time to grasp; it can be difficult for beginners; and coding might become complex with inline templating and JSX.

useState()

A built-in React Hook that allows you to have state variables in functional components. It returns a tuple with the current state value and a function to update that state.

Keys (in React)

A special string attribute that needs to be included when creating lists of elements. They help React identify which elements were added, changed, or removed, providing a unique identity for each element among its siblings.

JSX

Stands for JavaScript XML. It is a syntax extension that allows writing HTML inside JavaScript, providing syntactic sugar for the React.createElement() function.

Functional Components (Declaration)

JavaScript functions declared using an arrow function or the function keyword.

Class Components (Declaration)

Declared using the ES6 class keyword and must extend React.Component.

Props in Functional Components

Handled by passing props as an argument to the function, which can be accessed directly (e.g., props.name).

Props in Class Components

Handled using this.props inside the component (e.g., this.props.name).

State in Functional Components

Handled using React Hooks, primarily the useState hook, which returns the current state and a function to update it.

State in Class Components

Handled using the built-in this.state object, which is initialized in the constructor and updated using this.setState().

Virtual DOM (VDOM)

A concept where a virtual representation (a copy or blueprint) of the real DOM is kept in memory and synced with the real DOM by a library like ReactDOM.

Virtual DOM Rendering Process

React uses two VDOMs (one for the current state, one for the previous). When the VDOM is updated, React compares the two, identifies the changes, and then renders only the updated objects in the real DOM, avoiding inefficient full DOM updates.

Controlled Component

An input element whose value is controlled by React. The state is stored in the component, and changes are handled by event callbacks (like onChange) that update the state.

Uncontrolled Component

An input element whose value is handled by the DOM itself, just like traditional HTML form elements. The value is typically accessed using a ref.

Props (in React)

Inputs to a React component, passed from a parent component to a child component, similar to HTML attributes. They are read-only and cannot be changed inside the component.

React State

A built-in object in a component that contains property values belonging to that component. It controls the component's behavior and is writeable/mutable using the setState() method. Changes to state cause a re-render.

Props vs. State

Props are passed into a component (like function arguments) and are immutable (read-only). State is managed within the component (like variables declared inside a function) and is mutable (writeable).

Side Effects (in React)

Operations performed in a component that are not related to the direct calculation of the output, such as network requests, manual DOM mutations, or subscriptions.

Effects without Cleanup

A type of side effect (e.g., network requests, logging) that does not require explicit cleanup when the component unmounts.

Effects with Cleanup

A type of side effect (e.g., subscriptions, timers) that requires cleanup (e.g., unsubscribing) when the component unmounts to prevent memory leaks.

Prop Drilling

The process of passing props from a component higher in the hierarchy down to a deeply nested component, through intermediate components that may not need the prop themselves.

Error Boundaries

React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of letting the component tree crash.

Error Boundary Lifecycle Methods

Components that use either static getDerivedStateFromError() (to render a fallback UI) or componentDidCatch() (to log error information).

React Hooks

Built-in functions (introduced in React 16.8) that allow developers to use state and lifecycle features (like useState and useEffect) within functional components, without writing a class.

Purpose of React Hooks

To allow the use of state management and lifecycle methods in functional components, removing the need to convert them to class components for these features.

Rules of Hooks

1. Only call Hooks at the top level (not inside loops, conditions, or nested functions). 2. Only call Hooks from React Function Components (or custom Hooks).

useEffect()

A React Hook used for performing side effects in functional components (e.g., data fetching, subscriptions, DOM manipulations). The function passed to it runs after render and subsequent updates.

useEffect() Dependencies

An optional array passed as the second argument to useEffect. The effect will only re-run if the values in this array have changed between renders.

useRef()

A React Hook that provides a ref in functional components. It is used for managing focus, text selection, media playback, triggering imperative animations, or integrating with third-party DOM libraries.

Custom Hooks

A reusable JavaScript function whose name starts with 'use' and that calls other Hooks. It allows extracting and sharing stateful logic between components without changing the component hierarchy.

React Router Redirect

Using the component from the react-router package. Rendering this component navigates to a new location, overriding the current location in the history stack.

Passing Data Between Siblings (React Router)

By using props.history.push('/path/' + data) in one component to navigate and pass data as a URL parameter, and accessing it in the sibling component using props.match.params.

Handling Browser Resize

By adding a 'resize' event listener in componentDidMount() to update state (e.g., width/height), and removing the listener in componentWillUnmount().

Conditional Rendering

The dynamic output of user interface markups based on a condition or state. It can be implemented using if-else statements, ternary operators, or element variables.

Hooks vs. Redux

Hooks (like useReducer) cannot fully replace Redux for managing a large, complex global application state tree, but they are useful for managing complex local state or state within a lower component hierarchy.

React Router

The standard library for routing in React. It enables building single-page applications with navigation, allowing the UI to stay in sync with the URL without a page refresh.

React Router Components

Key components include (parent component using HTML5 history API), (replaces ), (conditionally renders UI based on URL path), and (creates navigation links).

Hooks vs. Class Lifecycle Methods

Hooks do not have equivalents for the class lifecycle methods getSnapshotBeforeUpdate(), getDerivedStateFromError(), or componentDidCatch().

Hooks vs. Classes (Comparison)

Hooks are used in functional components, require no constructor, and don't use 'this'. Classes are used in class-based components, require a constructor for state/binding, and use 'this' for state and props.

Types of React Hooks

1. Built-in Hooks (Basic: useState, useEffect, useContext; Additional: useReducer, useMemo, useCallback, useRef, etc.). 2. Custom Hooks (reusable stateful logic created by developers).

React Component Lifecycle

Methods that are automatically called at different phases of a component's life, providing control over what happens at specific points (e.g., mounting, updating, unmounting).

Class Lifecycle Methods

constructor(), getDerivedStateFromProps(), render(), componentDidMount(), shouldComponentUpdate(), getSnapshotBeforeUpdate(), componentDidUpdate(), componentWillUnmount().

Component Lifecycle Phases

1. Initialization (setting up props/state). 2. Mounting (inserting elements into the DOM). 3. Updating (re-rendering due to state/prop changes). 4. Unmounting (removing the component from the DOM).

Higher-Order Component (HOC)

A function that takes a component as an argument and returns a new component. It is an advanced pattern for reusing component logic and sharing functionality.

Pass Data: Parent to Child

Data is passed from a parent component to a child component using props.

Pass Data: Child to Parent

A function (callback) is created in the parent component and passed as a prop to the child. The child component then calls this function, passing data back to the parent as an argument.

React Performance Optimization

Techniques include: 1. useMemo() for caching expensive functions. 2. React.PureComponent to reduce unnecessary re-renders. 3. State Colocation (moving state closer to where it's needed). 4. Lazy Loading (code-splitting).

Styling React Components

Methods include: 1. Inline Styling (using a style attribute with a JS object). 2. JavaScript Object (defining styles in an object). 3. CSS Stylesheet (importing a .css file). 4. CSS Modules (importing a .module.css file).

Preventing Re-renders

By using the shouldComponentUpdate() lifecycle method in class components and returning false to stop the update.

React StrictMode

A tool () that highlights potential problems in an application by performing additional checks and warnings, such as identifying unsafe lifecycle methods, legacy string refs, or deprecated APIs.

Flux

An application architecture that complements React by utilizing a unidirectional data