Top 30 ReactJS frequently Asked Questions in Interview

Top 30 ReactJS frequently Asked Questions in Interview


Q1: What are props in React?

Props are inputs to components. They are data passed down from a parent component to a child component. Props are single values or objects containing a set of values that are passed to components on creation using a naming convention similar to HTML-tag attributes. Props are used to Configure child components.

The primary purpose of props in React is to provide following component functionality:

  • Pass custom data to your component.

  • Trigger state changes.

Q2: Why State are not update directly?

If state is updated directly then it won’t re-render the component. Instead use setState() method. It schedules an update to a component’s state object. When state changes, the component responds by re-rendering.

You can directly assign to the state object either in constructor or using latest javascript’s class field declaration syntax.

Q3: What is the use of refs in ReactJS?

The ref is used to return a reference to the element. Refs should be avoided in most cases, however, they can be useful when you need a direct access to the DOM element or an instance of a component.

Q4: What is Virtual DOM in ReactJS?

The Virtual DOM (VDOM) is an in-memory representation of Real DOM. The representation of a UI is kept in memory and synced with the “real” DOM. It’s a step that happens between the render function being called and the displaying of elements on the screen. This entire process is called reconciliation.

Q5: What is React Fiber?

Fiber is the new reconciliation engine or reimplementation of core algorithm in React v16. The goal of React Fiber is to increase its suitability for areas like animation, layout, gestures, ability to pause, abort, or reuse work and assign priority to different types of updates; and new concurrency primitives.

Q6: What is mean by controlled components in ReactJS?

A component that controls the input elements within the forms on subsequent user input is called Controlled Component, i.e, every state mutation will have an associated handler function.

Q7: What are uncontrolled components in ReactJS?

The Uncontrolled Components are the ones that store their own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

Q8: What is Lifting State Up in React?

When several components need to share the same changing data then it is recommended to lift the shared state up to their closest common ancestor. That means if two child components share the same data from its parent, then move the state to parent instead of maintaining local state in both of the child components.

Q9: What are Higher-Order Components in ReactJS?

higher-order component (HOC) is a function that takes a component and returns a new component. Basically, it’s a pattern that is derived from React’s compositional nature. We call them pure components because they can accept any dynamically provided child component but they won’t modify or copy any behavior from their input components.

Higher Order Components can be used for many use cases:

  • Code reuse, logic and bootstrap abstraction.
  • Render hijacking.
  • State abstraction and manipulation.
  • Props manipulation.

Q10: What is reconciliation in ReactJS?

When a component’s props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called reconciliation.

Q11: Why fragments are better than container divs in ReactJS?

Below are the list of reasons,

  • Fragments are a bit faster and use less memory by not creating an extra DOM node. This only has a real benefit on very large and deep trees.
  • Some CSS mechanisms like Flexbox and CSS Grid have a special parent-child relationships, and adding divs in the middle makes it hard to keep the desired layout.
  • The DOM Inspector is less cluttered.

Q12: What are stateless components in ReactJS?

If the behaviour is independent of its state then it can be a stateless component. You can use either a function or a class for creating stateless components. But unless you need to use a lifecycle hook in your components, you should go for function components. There are a lot of benefits if you decide to use function components here; they are easy to write, understand, and test, a little faster, and you can avoid the this keyword altogether.

Q13: What are stateful components in ReactJS?

If the behaviour of a component is dependent on the state of the component then it can be termed as stateful component. These stateful components are always class components and have a state that gets initialized in the contstructor.

Q14: What is the impact of indexes as keys in ReactJS?

Keys should be stable, predictable, and unique so that React can keep track of elements.

If you use element data for unique key, assuming is unique to this list and stable, React would be able to reorder elements without needing to reevaluate them as much.

Q15: Why props are cannot update in React?

he React philosophy is that props should be immutable and top-down. This means that a parent can send any prop values to a child, but the child can’t modify received props.

Q16: What is React Router in ReactJS?

React Router is a powerful routing library built on top of React that helps you add new screens and flows to your application incredibly quickly, all while keeping the URL in sync with what’s being displayed on the page.

Q17: What is React Intl?

The React Intl library makes internalization in React straightforward, with off-the-shelf components and an API that can handle everything from formatting strings, dates, and numbers, to pluralization. React Intl is part of FormatJS which provides bindings to React via its components and API.

Q18: What is Shallow Renderer in React testing?

Shallow rendering is useful for writing unit test cases in React. It lets you render a component one level deep and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered.

Q19: What are the core principles of Redux?

Redux follows three fundamental principles:

  1. Single source of truth: The state of your whole application is stored in an object tree within a single store. The single state tree makes it easier to keep track of changes over time and debug or inspect the application.
  2. State is read-only: The only way to change the state is to emit an action, an object describing what happened. This ensures that neither the views nor the network callbacks will ever write directly to the state.
  3. Changes are made with pure functions: To specify how the state tree is transformed by actions, you write reducers. Reducers are just pure functions that take the previous state and an action as parameters, and return the next state.

Q20: What is StrictMode in React?

React’s StrictMode is sort of a helper component that will help you write better react components, you can wrap a set of components with and it’ll basically:

  • Verify that the components inside are following some of the recommended practices and warn you if not in the console.
  • Verify the deprecated methods are not being used, and if they’re used strict mode will warn you in the console.
  • Help you prevent some side effects by identifying potential risks.

Q21: What is JSX?

JSX is an XML/HTML-like syntax used by React for extending ECMAScript in order for the XML/HTML-like text to coexist with JavaScript/React code. The syntax is intended to be used by preprocessors (i.e., transpilers like Babel) to transform HTML-like text found in JavaScript files into standard JavaScript objects that a JavaScript engine will parse.

Q22: What is render() in React?

We should start by explaining that each React component must have a render() because it returns a single React element which is the representation of the native DOM component. If more than one HTML element needs to be rendered, then they must be grouped together inside one enclosing tag such as

, ,

etc. This function must be kept pure and return the same result each time it is invoked.

Q23: What is the use of the arrow function in React?

The arrow function is something you should be familiar when preparing for React interview questions because this function is very important for React operations. It allows you to predict the behavior of bugs when passed as callbacks hence it prevents bugs caused by this altogether.

Q24: What is Context?

Context enables passing data through the component tree without having to pass props down manually at every level. Which means you can deep-nest items without issue. It is primarily used when some data needs to be accessible by many components at different nesting levels.

Q25: What is React lazy function?

The React.Lazy function lets you render an dynamic import as a regular component. It will automatically load the bundle containing the Other Component when the component gets rendered. This must return a Promise which resolves to a module with a default export containing a React component.

Q26: Which methods invoked during error handling?

Below methods are called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.

  • static getDerivedStateFromError()
  • componentDidCatch()

Q27: What is the typical use case of portals?

React portals are very useful when a parent component has overflow: hidden or has properties that affect the stacking context(z-index,position,opacity etc styles) and you need to visually “break out” of its container.

For example, dialogs, global message notifications, hovercards, and tooltips.

Q28: What is Concurrent Rendering?

The Concurrent rendering makes React apps to be more responsive by rendering component trees without blocking the main UI thread. It allows React to interrupt a long-running render to handle a high-priority event. i.e, When you enabled concurrent Mode, React will keep an eye on other tasks that need to be done, and if there’s something with a higher priority it will pause what it is currently rendering and let the other task finish first.

Q29: What are the benefits of using typescript with Reactjs?

Below are some of the benefits of using typescript with Reactjs,

  • It is possible to use latest JavaScript features
  • Use of interfaces for complex type definitions
  • IDEs such as VS Code was made for TypeScript
  • Avoid bugs with the ease of readability and Validation

Q30: What is prop drilling?

Prop Drilling is the process by which you pass data from one component of the React Component tree to another by going through other components that do not need the data but only help in passing it around.

Leave a Reply