ValueLabs React Developer Interview Questions, Process, and Tips

Round duration - 60 Minutes
Round difficulty - Medium

This was a preety intense round revolving mainly around the core concepts of JavaScript . I was confident about my skills in JavaScript as I already had some projects in JS and I also completed the Guided Path of JS in CodeStudio which boosted my preparation and helped me crack these Frontend Interviews.

Q1. Can you explain promises in JavaScript and describe its three states?
Ans. 
1) A promise is an object that may produce a single value some time in the future: either a resolved value, or a
reason that it’s not resolved (e.g., a network error occurred).

2) A promise may be in one of 3 possible states: fulfilled, rejected, or pending. Promise users can attach callbacks to
handle the fulfilled value or the reason for rejection.

3) Promises are eager, meaning that a promise will start doing whatever t...read more
Answered Anonymously
Add your answer
Q2. What are callbacks in JavaScript?
Ans. 
A callback is a function that will be executed after another function gets executed.

In javascript, functions are treated as first-class citizens, they can be used as an argument of another function, can be
returned by another function and can be used as a property of an object.

Functions that are used as an argument to another function are called callback functions.


Example Code :

function divideByHalf(sum){
console.log(Mat...read more
Answered Anonymously
Add your answer
Q3. Can you explain hoisting in JavaScript?
Ans. 
Hoisting is a default behaviour of javascript where all the variable and function declarations are moved on top.
This means that irrespective of where the variables and functions are declared, they are moved on top of the scope.
The scope can be both local and global.


EXAMPLE 1 :

hoistedVariable = 10;
console.log(hoistedVariable); // outputs 10 even when the variable is declared after it is initialized
var hoistedVariable;


EX...read more
Answered Anonymously
Add your answer
Q4. What are closures in JavaScript?
Ans. 
A closure is the combination of a function and the lexical environment within which that function was declared. i.e, It is
an inner function that has access to the outer or enclosing function’s variables. The closure has three scope chains

i) Own scope where variables defined between its curly brackets
ii) Outer function’s variables
iii) Global variables

Let's take an example of closure concept,

function Welcome(name){
var gr...read more
Answered Anonymously
Add your answer
Q5. What is a higher order function?
Ans. 
Higher-order function is a function that accepts another function as an argument or returns a function as a return value or both.

EXAMPLE : 

const firstOrderFunc = () => console.log ('Hello, I am a First order function');
const higherOrder = ReturnFirstOrderFunc => ReturnFirstOrderFunc();
higherOrder(firstOrderFunc);
Answered Anonymously
Add your answer
Q6. 
Sort Array Problem Statement
Given an array consisting of 'N' positive integers where each integer is either 0, 1, or 2, your task is to sort the given array in non-decreasing order.
Input:
Each input st...read more
Ans. 
1) The sort() method allows us to sort elements of an array in place. Besides returning the sorted array, the sort()
method changes the positions of the elements in the original array.

2) By default, the sort() method sorts the array elements in ascending order with the smallest value first and largest
value last.

3) The sort() method casts elements to strings and compares the strings lexicographically to determine the ord...read more
Answered Anonymously
Add your answer
Q7. 
Swap Two Numbers Problem Statement
Given two integers a and b, your task is to swap these numbers and output the swapped values.
Input:
The first line contains a single integer 't', representing the num...read more
Ans. 
Approach 1 (Using Destructruring Assignment) : This method was specific only for JS and the interviewer was preety
impressed when I used it .

Destructuring assignment (a feature of ES2015) lets you extract items of an array into variables. It works with any
data type: numbers, strings, booleans, objects.

Code :

let a = 1;
let b = 2;
[a, b] = [b, a];
a; // => 2
b; // => 1

[a, b] = [b, a] is the destructuring assignment that...read more
Answered Anonymously
Add your answer

Round duration - 60 Minutes
Round difficulty - Medium

In this round, I was asked questions from React and Redux. Since I already had prior experience in working with React and Redux , I answered most of the questions correctly and was preety much confident about passing this round.

Q1. What are the differences between a class component and a functional component in ReactJS?
Ans. 
Class Components : 

1) Class-based Components uses ES6 class syntax. It can make use of the lifecycle methods.
2) Class components extend from React.Component.
3) In here you have to use this keyword to access the props and functions that you declare inside the class components.


Functional Components : 

1) Functional Components are simpler comparing to class-based functions.
2) Functional Components mainly focuses ...read more
Answered Anonymously
Add your answer
Q2. What is the diffing algorithm in ReactJS?
Ans. 
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(n^3) 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. T...read more
Answered Anonymously
Add your answer
Q3. What are the differences between stateless and stateful components in ReactJS?
Ans. 
Stateless Components : 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.

Stateful Components : If the behaviour of a component is dependent on the state of the component then it can be termed as stateful compone...read more
Answered Anonymously
Add your answer
Q4. What is reconciliation in ReactJS?
Ans. 
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.
Answered Anonymously
Add your answer
Q5. How is state changed in Redux?
Ans. 
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. Instead, they express an intent to transform the state. Because all changes are centralized and happen one by one in a strict order, there are no subtle race conditions to watch out for. As actions are just plain objects, they can...read more
Answered Anonymously
Add your answer
Q6. What is the Combine Reducer in Redux?
Ans. 
The combineReducers helper function turns an object whose values are different reducing functions into a single reducing function you can pass to createStore . The resulting reducer calls every child reducer, and gathers their results into a single state object.
Answered Anonymously
Add your answer
Q7. How is Relay different from Redux?
Ans. 
Relay is similar to Redux in that they both use a single store. The main difference is that relay only manages state originated from the server, and all access to the state is used via GraphQL queries (for reading data) and mutations (for changing data). Relay caches the data for you and optimizes data fetching for you, by fetching only changed data and nothing more.
Answered Anonymously
Add your answer
Q8. How can we structure the top-level directories in Redux?
Ans. 
Every Redux application has multiple top-level directories as given below:

1) Components: Components are used for “dumb” React components unfamiliar with Redux.

2) Containers: Containers are used for “smart” React components that are connected to Redux.

3) Actions: Actions are used for all the action creators, where the file name should be corresponding to the part of the app.

4) Reducers: Reducers are used for all the red...read more
Answered Anonymously
Add your answer

Round duration - 30 Minutes
Round difficulty - Easy

This was a Technical Cum HR round where I was first asked some basic principles around Frontend Web Development and then we discussed about my expectations from the company , learnings and growth in the forthcomig years. I would suggest be honest and try to communicate your thoughts properly in these type of rounds to maximise your chances of getting selected.

Q1. What do you know about the company?
Ans. 
General Tip : Before an interview for any company , have a breif insight about the company , what it does , when was
it founded and so on . All these info can be easily acquired from the Company Website itself .
Answered Anonymously
Add your answer
Q2. Why should we hire you?
Ans. 
Tip 1 : The cross questioning can go intense some time, think before you speak.

Tip 2 : Be open minded and answer whatever you are thinking, in these rounds I feel it is important to have opinion.

Tip 3 : Context of questions can be switched, pay attention to the details. It is okay to ask questions in these round,
like what are the projects currently the company is investing, which team you are mentoring. How all is the ...read more
Answered Anonymously
Add your answer

Q1. What is closure?
Ans. 
Closure is a function that has access to its own scope, as well as the scope in which it was defined.
• Closure allows a function to access variables from its outer function even after the outer function has finished executing.

• It helps in maintaining state in asynchronous operations.

• Example: function outerFunction() { let outerVar = 'I am outer'; return function innerFunction() { console.log(outerVar); }; }
Answered by AI
Add your answer
Q2. Define hooks in react?
Ans. 
Hooks in React are functions that let you use state and other React features without writing a class.
• Hooks were introduced in React 16.8 to allow functional components to have state and lifecycle methods.

• useState() is a hook that allows you to add state to functional components.

• useEffect() is a hook that allows you to perform side effects in functional components.

• Custom hooks are reusable functions that can contain log...read more
Answered by AI
Add your answer

React js state and useeffect

Q1. Dom manipulation and React hooks
Add your answer
Q2. Use call back in depth
Ans. 
Callbacks are functions passed as arguments to another function to be executed later
• Callbacks are commonly used in event handling, asynchronous programming, and functional programming

• Callbacks can be synchronous or asynchronous

• Example: passing a callback function to a setTimeout() function
Answered by AI
Add your answer
Q3. Promises based coding question
Add your answer

Q1. CSS Box-model definition
Ans. 
CSS Box-model defines how elements are rendered in a webpage, including padding, border, and margin.
• Box-model consists of content, padding, border, and margin

• Content area is where text or images are displayed

• Padding is the space between content and border

• Border is the line around the content and padding

• Margin is the space outside the border
Answered by AI
Add your answer
Q2. Difference b/n flexbox and grid
Ans. 
Flexbox is for one-dimensional layouts, grid is for two-dimensional layouts.
• Flexbox is best for arranging items in a single row or column.

• Grid is best for creating complex layouts with rows and columns.

• Flexbox is more suitable for smaller scale layouts, while grid is better for larger scale layouts.

• Flexbox is more flexible in terms of item order and sizing, while grid provides more control over the overall layout.

• Both
Answered by AI
Add your answer

Q1. Based on Angular
Add your answer
Q2. Based on Html, CSS, Javascript
Add your answer

Dsa question were asked

Question related to profit loss

Q1. Simple question from your resume
Add your answer

Coding related questions

Q1. Tell me about yourself
Add your answer
Q2. What is your strength and weakness
Add your answer
Q3. Why are you want to join this question and what is your salary expectation
Add your answer