Sonata Software React Js Frontend Developer Interview Questions and Answers

Q1. Basic questions related to html5,css3,javascript,react js and DSA question to execute also
Add your answer
Q2. 1.dsa for repeated array
Ans. 
Implement a data structure and algorithm for finding repeated elements in an array.
• Use a hash map to store the frequency of each element in the array.

• Iterate through the array and update the frequency in the hash map.

• Return the elements with frequency greater than 1 as the repeated elements.
Answered by AI
Add your answer
Q3. 2.dsa for sorting array
Ans. 
Implementing DSA for sorting array of strings
• Use a sorting algorithm like bubble sort, selection sort, or merge sort

• Compare strings using built-in comparison functions or custom comparison functions

• Ensure the sorting algorithm is efficient and handles edge cases
Answered by AI
Add your answer

Css3 questions JavaScript also. Login page and positions and dsa for flattened the nested array

Duration was 1 hr and topics were css html react js vs code IDE it was a good experience

Q1. Basics of Javascript
Add your answer
Q2. Basics of React
Add your answer

They asked hacker rank test

Q1. Routing concept
Add your answer
Q2. React js coding question
Add your answer

Basic React related questions

There was a test with JS and React MCQs. Plus subjective questions which are these.
1. Write a function that keep track of how many times it is called
2. What are Sass, Less, Postcss and Stylus? Why do people use them?
3. What is CSS flexbox? Explain with a simple example.
4. What is the difference between RequireJS, CommonJS and AMD Loaders?
5. Write a function that flattens an array of nested arrays into a single array.
6. What is Callback Hell? How do you avoid it?

Q1. What is React? Why do we use it? Make a form with 3 different child components and pass props from the parent. There should be Select box, an Input field and a Submit Button.
Ans. 
React is a JavaScript library used for building user interfaces.
• React allows for reusable components and efficient rendering.

• It uses a virtual DOM to update only the necessary parts of the UI.

• React is popular for its simplicity and flexibility.

• Examples of companies using React include Facebook, Instagram, and Airbnb.
Answered by AI
View 1 more amswer
Q2. What is Virtual DOM?
Ans. 
Virtual DOM is a lightweight copy of the actual DOM that React uses to update the UI efficiently.
• Virtual DOM is a JavaScript object that represents the actual DOM.

• It allows React to update only the necessary parts of the UI, improving performance.

• Changes made to the Virtual DOM are compared with the previous version to determine the minimum number of changes needed to update the actual DOM.

• React uses a diffing algorith...read more
Answered by AI
Add your answer

Q1. Questions about project, experience etc.
Add your answer

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. Javascript Question
Explain promises and it's 3 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 by CodingNinjas
Add your answer
Q2. Javascript Question
What are callbacks?
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 by CodingNinjas
Add your answer
Q3. Javascript Question
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 by CodingNinjas
Add your answer
Q4. Javascript Question
What are closures
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 by CodingNinjas
Add your answer
Q5. Javascript Question
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 by CodingNinjas
Add your answer
Q6. Sort Array
You are given an array consisting of 'N' positive integers where each integer is either 0 or 1 or 2. Your task is to sort the given array in non-decreasing order.
Note :
1. The array c...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 by CodingNinjas
View 2 more amswers
Q7. Swap Two Numbers
Take two numbers as input and swap them and print the swapped values.
Input Format:
The first line of input contains a single integer 't', representing the total number of test c...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 by CodingNinjas
View 2 more amswers

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. ReactJS Question
What are the differences between a class component and functional component?
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 by CodingNinjas
Add your answer
Q2. ReactJS Question
What is diffing algorithm?
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 by CodingNinjas
Add your answer
Q3. ReactJS Question
What are stateless and stateful components?
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 by CodingNinjas
Add your answer
Q4. ReactJS Question
What is reconciliation?
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 by CodingNinjas
Add your answer
Q5. Redux Question
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 by CodingNinjas
Add your answer
Q6. Redux Question
What is Combine Reducer?
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 by CodingNinjas
Add your answer
Q7. Redux Question
How Relay is 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 by CodingNinjas
Add your answer
Q8. Redux Question
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 by CodingNinjas
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. Basic HR Question
Do you know anything 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 by CodingNinjas
Add your answer
Q2. Basic HR Question
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 by CodingNinjas
Add your answer