ONE-LINER REACT.

JS INTERVIEW QUESTIONS AND THEIR

A JavaScript library for building user interfaces.

What is JSX?

A syntax extension for JavaScript, used with React to describe UI elements.

What is a component in React?

A reusable piece of the UI.

What are the types of components in React?

Functional and Class components.

What is a functional component?

A JavaScript function that returns JSX.

What is a class component?

A JavaScript class that extends React.Component and has a render method.

What is a state in React?

An object that holds dynamic data within a component.

What is a prop in React?

Short for “properties”, they are read-only inputs passed to a component.

What is the difference between state and props?

State is managed within the component, props are passed to the component.

How do you create a React component?

By defining a function or a class that returns JSX.

What is the purpose of the render method in a class component?

To return the JSX that should be rendered.

How do you handle events in React?

By passing an event handler function as a prop.

What is the virtual DOM?

An in-memory representation of the real DOM.

By diffing the virtual DOM and applying changes to the real DOM.

What is React Fiber?

The new reconciliation algorithm in React 16.

What is a hook in React?

A special function that lets you use state and other React features in functional components.

Name a few commonly used hooks.

useState, useEffect, useContext.

What is useState hook used for?

To add state to a functional component.

What is useEffect hook used for?

To perform side effects in functional components.

What is the difference between useEffect and componentDidMount?

useEffect can be used in functional components, while componentDidMount is used in class components.

What is useContext hook used for?

To access context in functional components.

What is context in React?

A way to pass data through the component tree without passing props down manually.

How do you create context in React?

By using React.createContext().

What is a higher-order component (HOC)?

A function that takes a component and returns a new component with added functionality.

What is a pure component?

A component that does a shallow comparison of props and state to decide if it should re-render.

What is the purpose of React.memo?

To memoize a functional component, preventing unnecessary re-renders.

What is the key prop used for?

Why should you avoid using the index as a key?

It can cause issues with reordering and efficient updates.

What is prop drilling?

Passing props through multiple levels of components.

How can you avoid prop drilling?

By using context or state management libraries like Redux.

What is Redux?

A state management library for JavaScript applications.

What are the three principles of Redux?

Single source of truth, state is read-only, and changes are made with pure functions.

What is an action in Redux?

An object that describes a change in the state.

What is a reducer in Redux?

A pure function that returns the new state based on the action.

What is the Redux store?

An object that holds the application state.

How do you connect a React component to the Redux store?

By using the connect function from react-redux.

What is the purpose of Provider in Redux?

To make the Redux store available to the rest of the app.

What is the difference between Redux and Context API?

Redux is more powerful and suitable for large applications; Context API is simpler and suitable for smaller apps.

What is a middleware in Redux?

A function that can intercept actions and perform side effects.

Name a commonly used middleware in Redux.

redux-thunk.
What is redux-thunk used for?

To handle asynchronous actions in Redux.

What is the purpose of useReducer hook?

To manage complex state logic in functional components.

What is the difference between useState and useReducer?

useState is suitable for simpler state, useReducer is better for complex state logic.

What is a controlled component?

A component that gets its value from state and updates via events.

What is an uncontrolled component?

A component that maintains its own state and updates via refs.

What are refs used for in React?

To access and manipulate DOM elements directly.

How do you create a ref in React?

By using React.createRef() or useRef() hook.

What is the difference between createRef and useRef?

createRef is used in class components, useRef in functional components.

What is React Router?

A library for routing in React applications.

How do you define routes in React Router?

By using Route components inside a Switch component.

What is the purpose of Link in React Router?

To navigate between routes without reloading the page.

What is useHistory hook used for?

To programmatically navigate between routes.

What is useParams hook used for?

To access route parameters.

What is server-side rendering (SSR)?

Rendering a React application on the server before sending it to the client.

A React framework for server-side rendering and static site generation.

What is the difference between SSR and client-side rendering?

SSR renders on the server, client-side rendering renders in the browser.

What is static site generation (SSG)?

Pre-rendering pages at build time.

What is hydration in React?

Attaching event listeners to the pre-rendered HTML from SSR.

What is code splitting in React?

Breaking down the app into smaller chunks to improve load times.

How do you implement code splitting in React?

By using React.lazy and Suspense.

What is lazy loading?

Loading components only when they are needed.

What is a fragment in React?

A way to group multiple elements without adding extra nodes to the DOM.

How do you create a fragment in React?

By using <React.Fragment> or shorthand <>.

What is the difference between Fragment and div?

Fragment does not add an extra element to the DOM, div does.

What is reconciliation in React?

The process of updating the DOM based on changes in the virtual DOM.

What is the purpose of shouldComponentUpdate?

To control whether a component should re-render.

What is the key prop used for in React?

To uniquely identify elements in a list.

What is ReactDOM.createPortal?
A method to render a component outside its parent DOM hierarchy.

What are error boundaries in React?

Components that catch JavaScript errors in their child component tree.

How do you create an error boundary in React?

By using a class component with componentDidCatch and getDerivedStateFromError.

What is useMemo hook used for?

To memoize a value and optimize performance.

What is useCallback hook used for?

To memoize a function and avoid unnecessary re-renders.

What is the difference between useMemo and useCallback?

useMemo memoizes a value, useCallback memoizes a function.

What is a custom hook in React?

A reusable function that encapsulates logic using hooks.

How do you create a custom hook?

By creating a function that uses React hooks and follows the naming convention use.

What is the purpose of useImperativeHandle hook?

To customize the instance value exposed by a ref.

What is the useLayoutEffect hook used for?

To perform DOM mutations synchronously after all DOM changes.

What is StrictMode in React?

A tool to highlight potential problems in an application.

What is a render prop in React?

A function prop that allows dynamic rendering logic.

What is the purpose of React.Children utility?

To work with the children prop more effectively.

What is forwardRef used for in React?

To pass refs to child components.

A tool to measure the performance of React applications.

What is memo used for in React?

To optimize functional components by memoizing their output.

What is a React element?

An object representation of a DOM node.

What is a React node?

Anything that can be rendered in React, including elements, strings, and fragments.

What is React.StrictMode?

A wrapper component that helps identify potential problems in an application.

What is the difference between controlled and uncontrolled components?

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

What is the purpose of the defaultValue prop?

To set the initial value for uncontrolled form elements.

How do you update the state in a class component?

By using this.setState.

What is the purpose of the componentWillUnmount lifecycle method?

To perform cleanup before a component is removed from the DOM.

What is the purpose of the getDerivedStateFromProps lifecycle method?

To update state based on props changes.

What is PureComponent?

A component that performs a shallow comparison of props and state.

What is createContext used for?

To create a context object for passing data through the component tree.

What is the purpose of getSnapshotBeforeUpdate?

To capture information from the DOM before it is updated.

What is the ReactDOM package?

A package that provides DOM-specific methods for rendering and updating the DOM.
How do you handle forms in React?

By using controlled components and managing form data in the state.

What is the useDebugValue hook used for?

To display a label for custom hooks in React DevTools.

What is React.PureComponent used for?

To optimize performance by implementing a shallow comparison of props and state.

What is React DevTools?

- A browser extension that allows inspection of React component hierarchies in the Chrome and Firefox Developer Tools.

@DimpleKumari
Forming a network of fantastic coders.