ReactJS interview Questions for 5 Years Experience Developers

ReactJS interview Questions for 5 Years Experience Developers

Why API calls are to be made from componentDidMount and not in Constructor/componentWillMount

This is recommended to avoid side effects. Render method will get called immediately after the componentWillMount and no way we can make the render method wait until the API has returned.

Constructor is a place where we define the variables and not make any API calls. API calls can have side effects and should not be used inside constructor

React expects state to be available as render function will be called next after componentWillMount  and code can break if any mentioned state variable is missing which may occur in case of ajax API calls

One more reason is If we are doing server-side rendering of React components componentWillMount will get called on the server-side and again on the client, resulting in calling fetch two times. Hence, this is not definitely the place where we should integrate our APIs.

NOTE: A side effect is any application state change that is observable outside the called function other than its return value. Eg: modifying a global variable.

What are the main goal of React Fiber?

The goal of React Fiber is to increase its suitability for areas like animation, layout, and gestures. Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames.

from documentation

Its main goals are:

  1. Ability to split interruptible work in chunks.
  2. Ability to prioritize, rebase and reuse work in progress.
  3. Ability to yield back and forth between parents and children to support layout in React.
  4. Ability to return multiple elements from render().
  5. Better support for error boundaries.

What are React Mixins?

Mixins are a way to totally separate components to have a common functionality. Mixins should not be used and can be replaced with higher-order components or decorators.

One of the most commonly used mixins is PureRenderMixin. You might be using it in some components to prevent unnecessary re-renders when the props and state are shallowly equal to the previous props and state.

What are the Pointer Events supported in React?

Pointer Events provide a unified way of handling all input events. In the old days we had a mouse and respective event listeners to handle them but nowadays we have many devices which don’t correlate to having a mouse, like phones with touch surface or pens. We need to remember that these events will only work in browsers that support the Pointer Events specification.

The following event types are now available in React DOM:

    • onPointerDown
    • onPointerMove
    • onPointerUp
    • onPointerCancel
    • onGotPointerCapture
    • onLostPointerCapture
    • onPointerEnter
    • onPointerLeave
    • onPointerOver
    • onPointerOut

What is the difference between setState() and replaceState(methods?

When you use setState() the current and previous states are merged. replaceState() throws out the current state, and replaces it with only what you provide. Usually setState() is used unless you really need to remove all previous keys for some reason. You can also set state to false/null in setState() instead of using replaceState().

What are synthetic events in React?

When talking about React js interview questions and answers, we should mention the synthetic events. They act as a cross-browser wrapper around the browser’s native event thus combining the behavior of different browsers into one API. Their purpose is to ensure that the events show consistent properties across different browsers.

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.

In which scenarios error boundaries do not catch errors?

Below are the cases in which error boundaries doesn’t work,

    1. Inside Event handlers
    2. Asynchronous code using setTimeout or requestAnimationFrame callbacks
    3. During Server side rendering
    4. When errors thrown in the error boundary code itself

How JSX prevents Injection Attacks?

React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered.

What is suspense component?

If the module containing the dynamic import is not yet loaded by the time parent component renders, you must show some fallback content while you’re waiting for it to load using a loading indicator. This can be done using Suspense component.

What is diffing algorithm?

React needs to use algorithms to find out how to efficiently update the UI to match the most recent tree. The diffing algorithms is generating the minimum number of operations to transform one tree into another. However, the algorithms have a complexity in the order of O(n3) where n is the number of elements in the tree.

In this case, for displaying 1000 elements would require in the order of one billion comparisons. This is far too expensive. Instead, React implements a heuristic O(n) algorithm based on two assumptions:

    1. Two elements of different types will produce different trees.
    2. The developer can hint at which child elements may be stable across different renders with a key prop.

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.

What is the purpose of callback function as an argument of setState()?

The callback function is invoked when setState finished and the component gets rendered. Since setState() is asynchronous the callback function is used for any post action.

It is recommended to use lifecycle method rather than this callback function.

What is the difference between primitives and non-primitives?

What answer to expect:

There are five primitive data types in JavaScript: number, string, boolean, undefined, and null, but there is one non-primitive data type: object. Primitive data types are stored by value, while non-primitive data types are stored by reference. When creating a primitive variable, you create a potential new address, but when you create a non-primitive object, you create a pointer to that object.

What is the difference in usage of callback, promise, and async/await?

Callbacks are the functions that take time to produce a result. These functions, however, prove ineffective when there are callbacks nested inside other callbacks. Promises are callbacks that have three states: resolved, rejected, or pending. They are more effective than callbacks. Yet, async/await is the most convenient way of dealing with the asynchronous code. Once called, an async function returns a Promise. If it returns a value, the Promise is resolved with this value. If it throws an exception or a value, the Promise is rejected with the thrown value. An await expression located inside of an async function pauses the execution of it and waits for the Promise to be resolved, then, resumes the execution, and returns the resolved value.

Why cannot we use indexes of the map as keys for dynamic lists?

Keys are the properties given to every element in an array to give them a unique ID and identify which items have changed (added/removed/re-ordered). Keys have to be static and unique. Meanwhile, a map is an iterative function. If we used map indexes as keys for dynamic lists, then the entire list would be rerendered once a change in a single element occurred.

Is there any difference between Container Components and Presentation Components?

Container components aim to provide data for presentation and other container components. These components are related to maintaining how everything works.

Presentation components, on the other hand, are responsible for how things look. Whenever they get their personal status (which rarely happens), they are most often UI.

Features of Lazy Loading and Code Spliting?

Lazy loading is the new feature introduced in React v16.6, which allows for some Components to load later than other components. This way we can load the components which are fast like text earlier and components which loads images a bit later.

  • Consider the below code for App.js. In it, there are two Components ContentComponent and myComp.
  • One has some paragraph containing lorem ipsum and others have an image to load from unsplash.

Now, we are lazy loading myComp as it has an image to load. Note the special way to import it and also we need to wrap the component in Suspense. Now, Suspense will contain the fallback Component which will be shown while myComp gets loaded.

Leave a Reply