Frontend Interviewing

What is ReactJS?

ReactJS is a component-based JavaScript library used to build dynamic and interactive user interfaces.

How does React.js work?

React.js works on a component-based architecture and uses a virtual DOM to efficiently update and render user interfaces.

What are reusable components in React?

Reusable components speed up development by allowing code reusability.

What is JSX?

JSX is a syntax extension for JavaScript, allowing writing HTML-like code inside JavaScript.

How is JSX converted into JavaScript?

Browsers can't understand JSX directly; tools like Babel transpile it into plain JavaScript using React.createElement().

What is a React component?

A component is one of the core building blocks of React, used to build user interfaces.

What are the two types of components in React?

Functional components and class components.

What is the difference between functional and class components?

Functional components are plain JavaScript functions, while class components require extending React.Component and managing state.

What are props in React?

Props are objects used to pass information to a component.

What are default props in React?

Default props are fallback values assigned to a component's props when the parent does not provide them.

What is state in React?

State is the internal, mutable data of a React component that controls its behavior and rendering.

How do you update state in React?

State is updated using setState() in class components or the useState setter function in functional components.

What is the difference between props and state?

Props are passed from one component to another and are immutable, while state is mutable and managed within the component.

What are fragments in React?

Fragments allow grouping multiple elements without adding extra nodes to the DOM.

What is the short syntax for fragments?

The short syntax for fragments is <> .

What is the difference between controlled and uncontrolled components?

Controlled components are managed by React state, while uncontrolled components store their own state.

How does the DOM manage the input value in uncontrolled components?

The DOM keeps track of the input's value, and you can access it using refs.

What are Hooks in React and why were they introduced?

Hooks are functions that allow using state and lifecycle methods in functional components, introduced to reduce boilerplate code and promote cleaner code.

How does the useState hook work?

The useState hook adds state to functional components, returning a state variable and a setter function.

What is useEffect in React?

useEffect is a hook for performing side effects in functional components, with a dependency array controlling when it runs.

What is the difference between useEffect and useLayoutEffect?

useEffect runs after render, while useLayoutEffect runs before painting and is used for layout measurements.

What is the useContext hook?

The useContext hook allows components to consume values from a React Context without prop drilling.

What is the useReducer hook and when is it preferred over useState?

useReducer manages complex state logic and is preferred when state logic is complex or depends on previous state.

What is the useRef hook?

useRef creates a mutable object that persists across renders, commonly used to access DOM elements.

Explain the difference between useMemo and useCallback.

useMemo memoizes computed values, while useCallback memoizes functions to prevent unnecessary re-renders.

What are custom hooks in React?

Custom hooks are reusable functions that allow sharing logic between components, starting with 'use'.

What are the rules of hooks?

Hooks must be called at the top level of components, only from React functional components, and custom hooks must start with 'use'.

What is State Management in React?

State management refers to how an application handles and shares data across components, with local state managed within components and global state shared across multiple components.

What is local state in React?

Data managed within a single component.

What is global state in React?

Data shared across multiple components.

What are some popular state management solutions in React/Next.js?

React built-in hooks, Context API, Redux, Zustand, Recoil, Jotai, MobX, useSWR, React Query.

When should you use Redux over Context API?

Use Redux for large, complex applications needing predictable state management; use Context API for small to medium applications sharing simple state.

What is the difference between client state and server state?

Client state is managed locally in the app; server state is managed on the backend and persistent across sessions.

What is the Context API in React?

A method to share data globally across components without prop drilling.

What is the role of useReducer in state management?

Manages complex state logic using a reducer function, making updates predictable.

How do you handle persistent state in React apps?

Use localStorage, sessionStorage, IndexedDB, backend storage, or state management libraries with persistence.

What is the difference between derived state and computed state in React?

Derived state is calculated from props/state; computed state is calculated during render.

How can you optimize state updates for performance in React?

Keep state localized, use useMemo and useCallback, batch updates, avoid deep nesting.

How do you handle asynchronous state updates in React?

Use functional setState, consider useReducer, and use effects to react to state changes.

What is the Virtual DOM in React?

A lightweight representation of the real DOM that React updates first for efficiency.

What is reconciliation in React?

The process of comparing the new Virtual DOM with the previous one to update only necessary parts.

How does React.memo help improve performance?

Prevents unnecessary re-renders of functional components by re-rendering only if props change.

What techniques would you use to optimize a slow React application?

Use React.memo, useMemo, useCallback, split code with React.lazy, and optimize large lists.

What is code splitting in React?

Code splitting is a technique that breaks the app's bundle into smaller chunks so the browser loads only what's necessary.

What is lazy loading in React?

Lazy loading loads components only when they are needed, instead of loading everything upfront.

How can you optimize a slow React application?

Use React.memo, useMemo, and useCallback to avoid unnecessary re-renders, split code with React.lazy and Suspense, optimize large lists, avoid anonymous functions in render, keep state localized, and use proper key props.

What is the difference between React.PureComponent and React.Component?

React.Component always re-renders when setState is called, while React.PureComponent implements a shallow comparison of props and state and only re-renders if something has changed.

How does React handle re-rendering when state or props change?

React creates a new Virtual DOM for the component, compares it with the previous one, and updates only the necessary parts of the real DOM.

What are controlled components in React?

Controlled components are form inputs where React manages the input's value through state, ensuring the UI is always in sync with React state.

What are uncontrolled components in React?

Uncontrolled components are form inputs where the DOM manages the input's value, and React accesses it when needed using refs.

How do useMemo and useCallback improve performance in React?

useMemo memoizes the result of a computation, while useCallback memoizes a function, both preventing unnecessary re-renders and expensive recalculations.

How do you render a list of items in React?

Lists are rendered using JavaScript's .map() method, with each list item having a unique key prop.

Why is the key prop important in React lists?

The key prop helps React efficiently manage list rendering by identifying which items have changed, been added, or removed.

What happens if we use the array index as a key in React?

Using the array index as a key can lead to issues when list items are reordered, added, or removed, causing incorrect updates.

How do you conditionally render list items in React?

List items can be conditionally rendered using if statements, ternary operators, or array methods like .filter() combined with .map().

How do you update or remove an item from a list in React state?

You create a new array using methods like .map() or .filter() and then update state with that new array.

What are some performance tips when rendering large lists in React?

Use unique keys, virtualization libraries, memoize list items, and implement pagination or lazy loading.

How would you render a nested list in React?

You can nest .map() calls for parent and child arrays, ensuring each level has unique key props.

How do you handle dynamic addition of items in a list?

You create a new array that includes the new item and update state with that new array.

How do you handle dynamic sorting or filtering of lists in React?

You can sort or filter lists by creating a new array based on the original list and updating the state.

What is the difference between rendering lists with map() vs forEach()?

map() returns a new array for rendering JSX elements, while forEach() does not return an array and is only useful for side effects.

How are forms handled in React compared to plain HTML?

In React, form inputs are controlled components where the form values live in state and each keystroke updates the state via an onChange handler.

How do you prevent the default form submission behavior in React?

By using event.preventDefault() inside the form's onSubmit handler.

What is event bubbling and how can you stop it in React?

Event bubbling is when an event on a child element propagates to parent elements, and it can be stopped using event.stopPropagation().

How do you handle multiple input fields in a single form in React?

By using a single state object and updating it dynamically with name and value.

How do you reset form fields after submission in React?

Reset the state that controls the inputs to their initial values.

What is React Router and why is it used?

React Router is a library for client-side routing in React applications, allowing navigation without a full page reload.

What is the difference between tag and in React Router?

tag reloads the whole page, while updates the URL without reloading (SPA behavior).

What is the difference between useHistory and useNavigate?

useHistory was used in React Router v5 for navigation, while useNavigate is used in React Router v6.

How do you implement nested routes in React Router?

By defining nested elements within a parent .

What are route parameters and how do you access them?

Route parameters are dynamic parts of the URL, accessed using useParams() in the component.

How do you redirect a user in React Router?

Using the component or the useNavigate() hook for programmatic redirects.

What is the difference between client-side routing and server-side routing?

Client-side routing loads the app once and navigates using JavaScript, while server-side routing reloads the page for each request.

What are the main data types available in TypeScript?

Built-in data types and user-defined data types.

What are the built-in data types in TypeScript?

String, Number, Boolean, Null, Undefined, any, void.

What is the purpose of the 'any' type in TypeScript?

It allows assigning any value of any data type to a variable.

How many ways can variables be declared in TypeScript?

Three ways: using var, let, and const.

What is the difference between var and let in TypeScript?

var is function-scoped, while let is block-scoped.

What does the void type represent in TypeScript?

It represents the unavailability of a data type, mainly used for functions that return nothing.

How can you declare explicit variables in TypeScript?

Using colons (:) followed by the data type.

What is the syntax for declaring a variable with a specific type?

let variable_name: data-type = value;

What are the advantages of using TypeScript?

Strongly typed variables, advanced features, error detection at compile time, and compatibility with JavaScript.

What are some disadvantages of using TypeScript?

Lack of support for abstract classes, time-consuming compilation, and the need for definition files for external libraries.

How do you declare a function with typed annotations in TypeScript?

By defining the types of parameters and the return type.

What happens if you assign a value of the wrong type to a variable in TypeScript?

It throws a compilation error.

What is an example of a user-defined data type in TypeScript?

Arrays, enums, classes, and interfaces.

What is the purpose of interfaces in TypeScript?

They define the basic syntax and blueprint that an entity must adhere to.

What is the role of enums in TypeScript?

They specify constant variables.

What is the significance of the 'const' keyword in TypeScript?

It declares a constant variable whose value cannot change.

What does TypeScript compile down to?

JavaScript code that is runnable on every browser.

How does TypeScript improve code quality?

By allowing static typing and catching errors early.

What is the purpose of the 'let' keyword in TypeScript?

To declare block-scoped variables.

What does TypeScript's error detection do?

It throws errors at compile time during development.

What is the difference between 'null' and 'undefined' in TypeScript?

null is an empty value assigned deliberately, while undefined is a variable that is declared but not initialized.

What error occurs when passing a string to a function expecting a number in TypeScript?

Argument of type 'string' is not assignable to parameter of type 'number'.

What is the void keyword used for in TypeScript?

It is mainly used with functions that return nothing.

What values can variables defined with the void keyword be assigned?

They can only be assigned with null and undefined values.

What does the null keyword indicate in TypeScript?

It indicates the unavailability of a value.

How can you check if a value is provided to a variable in TypeScript?

By using the null keyword.

What is the syntax for creating objects in TypeScript?

An object is a collection of key-value pairs with unique keys.