Archive

Company 1

Round One

1. Flatten the object Object property can have a string, number, array(nested),boolean, object.
2. How async tasks work in js.
3. Callback Queue and Microtask queue.
4. Code output

	for(var i=1, i<5, i++){
		setTimeout(()=>console.log(i),1000)
	}

5. Change above snippet to console 1,2,3,4.
6. What is IIFE (Based on previous question’s answer).
7. Difference between callback flow and promise flow.
8. Implement Inheritance using classes.
9. Convert it into functional (Prototypal) inheritance.
10. How cache validation work.
11. Updating cache in browser using webpack(versioning).
12. Micro frontend framework.
13. Create a static function LastFulfilled() to Promise object. It will take an array of promises and will resolve or reject only when last promise(Takes most time) will resolve or reject.(Return only last response).

Round Two

1. Around 20 minutes of discussion on how I implemented custom grid in my current project. How fixed and scrollable columns work. What approach I took and why.
2. Some questions around JS architecture. Call stack, CB queue, Priority Queue.
3. Service workers, web workers
4. Cache strategies in workbox. Route registering
5. Polyfill for Reduce, Bind
6. Closure (Basic problem) Create a function which returns an objet with next() as property. Calling next should return +1 value every time it is called. Like 1,2,3,4…
7. Convert class based inheritance to prototypal.
8. How to optimize slow page in react.
9. Profiling, SSR, Lazy Loading.
10. Pure components.
11. useCallback and useMemo.
12. Some questions on React 18.

Round Three

1. How will you decide if we should use SSR or CSR.
2. SSR using ReactDOMServer.
3. React Handson Create a commentBox and show the comment list. In Comment list user can reply to a comment till nth level. User can Edit any comment.

Round Four (Managerial)

1. Intro
2. Why you chose FE Domain.
3. From my POV what is good work env.
4. What are your expectations from company regarding your personal growth.

Company 2

Round One

1. What is React.
2. How React is different from Angular.
3. Can we force rerender without updating state.
4. Can we stop rerender after updating state.
5. What are closure in JS and how React hook use this concept.
6. Explain useCallback and useMemo Hook.
7. React handson:

   Fetch Live data from an API on regular intervals

8. What is cors.
9. What is a preflight network call.
10. Problem Solving Given an unsorted array with values -1000<n<1000 find largest product of any 3 values

Round Two

1. What is React.
2. How diffing algorithm work.
3. How react handle dom mutations.
4. Create a function to compare two values. Values can be string, numbers , array (nested to nth level) , object(nested)
5. What is Redux.
6. Principles of Redux.
7. Create a basic redux architecture. Create createStore, subscribe methods.

Round Three

1. Create Promise.all() custom implementation where if all promises fail then it should throw error and if any promise pass it should resolve but only after all promises either resolve or reject
2. Randomize a given array
3. What are browser caching techniques.
4. Write a function which takes a string class name and return an array of all the elements that contain the class. i.e. Basic implementation of querySelectorAll() with class.
5. Some techniques to optimize website load time
6. What are various web page performance metrics
7. What is debouncing and throttling.
8. Explain server side rendering.
9. Write a JSON structure of a directory like which contain files, folders with nested files folders

{
  "name": "root",
  "type": "folder",
  "children": [
    {
      "name": "file1",
      "type": "file"
    },
    {
      "name": "folder1",
      "type": "folder",
      "children": [
        {
          "name": "file2",
          "type": "file"
        }
      ]
    }
  ]
}

Now write a function to traverse this object and print output on console with proper indentation on console. Now remove console from the function and return a string with indentation and new line 10. Call by value and call by reference in javascript

Round Four (Managerial)

1. What are programming paradigms.
2. Difference between OOPs and Functional (Prototypal) programming.
3. Why we should or shouldn’t use typescript.
4. Tell me about your role and responsibilities in your current project.
5. How are you contributing in your project.
6. What is SSR.

System design

1. Design a workflow for SSO website. Let’s say I have three websites a.com, b.com, c.com How SSO will be implemented like logging in request to SSO website and logout from all if logout from SSO. What will you store in Client side and why. What will happen on first visit and subsequent visits. What will happen on refreshing. Possible end points, query params, request bodies and data you will require.
2. Design a notification system. API Poling, web sockets, server sent events. How will you handle UI, custom popup. Browser notifications API handling two usecases. Permission granted. Permission rejected. For second usecase how to get user’s attention on notification if tab is not active.

Handson

Design a basic html previewer. I used dangersoulyinjectHTML. Improve it. Sensitizing user input. Alternative solutions. Web Components, iFrames.

Round Five (Director)

1. Merge two sorted arrays.
2. Do it without using third array.
3. Tell me about your project. Roles responsibilities.
4. What is VirtualDOM. Why react use virtualDOM.
5. Design a accordion
6. Animate its open and close actions.
7. What is difference between TCP & UDP.
8. What is a DNS.
9. How URL to IP mapping is done.

Company 3

Round one

1. Difference between let, var, const.

2. Temporal dead zone.

3. Type of class

4. Closure output code snippet

   let a = 52
   function b() {
     let a
     console.log(a)
     a = 7
   }

5. Priority queue and callback queue.

6. Output

   let b = {
     name: "Vishal",
     getName() {
       console.log(this.name)
     },
   }
   setTimeout(b.getName, 0)

7. How to get vishal in console for previous question.

8. this in arrow function

9. Flatten a nested array.

10. Difference between Debounce and Throttle.

11. Implement both.

12. Difference between Context API and Redux.

13. Which to use in which case.

14. Memoization of state in Redux

15. useSelector hook

16. useReducer hook (useCase)

17. Usecases of useCallback and useMemo hook

18. Micro FE- React.lazy

19. In which case we still need to use class component (Error Boundary)

20. React Handson: Get Data from API- Render it to a table Add a checkbox filter data based on a property(true/false) by value of checkbox

Round Two

1. Questions about project.
2. Questions about micro FE (as my current project is a micro FE).
3. Prototype in JS.
4. Implement Class based and prototypal inheritance.
5. What is proto.
6. what is hasOwnProperty
7. Generator function
8. Its use in redux saga.
9. How it works
10. Some features of es6+
11. Arrow functions and normal functions
12. Some features of React 18
13. Major difference between class based and functional components (From a developer POV.)
14. useEffect() vs componentDidUpdate()
15. Difference in setState in class and functional component.
16. Create any custom hook (Again created useForm)
17. Testing React testing library vs Enzyme.
18. Enzyme Shallow va mount.
19. How you build and deploy the app.
20. Github package versioning and publishing (As we were using github to publish packages).

Round Three (Managerial)

1. Explain hooks.
2. How hooks work (closures).
3. React component lifecycle (Three Phases).
4. useEffect() all 3 phases.
5. create a custom hook to manage a from (Again created useForm hook).
6. How to check if user is offline.
7. Intercept API in offline (workbox).
8. How remember me works in browser.

Company 4

Round One

1. Design a Grid (40 minutes)
   • Make it reusable and configurable.
   • Column based Sorting, Filtering.
   • Option to render custom cell and column.
   • Pagination
   • Loader, No data state
2. Questions around it.
   • Async data loading
   • Infinite scrolling
   • Using scroll event or Intersection observer.
   • React Virtualization

Round Two

DS

1. Reverse an array
2. Improve solution (do not use new array) (use two pointers).
3. 2Sum problem ( Given an array and a target number, Return all combinations for target sum and remove duplicated like if returning [1,6] do not return [6,1]).
4. 3Sum problem. (Update solution to return combination of 3 values)
5. Implement Linked List
   • Create Add, Get methods.
6. Reverse the linked list.
7. Create a Binary tree in js like create a Tree class and a Node class.
8. Add methods like adding value, getting value.
9. DFS and BFS traversal.
10. Merge two sorted array.

JS

1. Hoisting in JS
2. Closures.
3. Design Patterns in JS.
4. Questions around callbacks, promises and async await.
5. Top level await in Node.
6. SSR vs CSR, ISR(Next.js)
7. Prototypal Inheritance (Implement)
8. How react use closures.
9. create useState hook.
10. Why we bundle code.
11. Any Idea about vite (How it is fast for development).

Company 5

Round One (Automated)

1. What is React.
2. Walkthrough Resume.
3. Some React MCQs
4. Hands on - Screen Shared (Used VS Code) Create a quiz application in React. (Wireframes given) Expected
   • Timer of 30 seconds.
   • On click of an option show correct i green and incorrect in red. Wait for 3 seconds before moving to next question.
   • At last show total score.

Round Two

1. Some input output snippets.
2. What is Hoisting.
3. Function Expressions.
4. Some questions around setTimeout and promise.
5. Problem Solving Given an unsorted array with values -1000<n<1000 find largest product of any 3 values .
6. Event Delegation.
7. Event Delegation in React.
8. Redux and Context API.
9. State memoization.
10. React Hands on Create a chess layout with all the divs clickable and on click show and alert box with x,y coordinates of that div. Improve it by using event delegation.

Round Three(Managerial)

1. Discussion around project.
2. Tech stack I use (Prefer).
3. Redux (Architecture), React-Redux.
4. Jest & React Testing Library.
5. PWA (Offline request handling) workbox.
6. Custom Hook (Implement any hook) I implemented useForm from react-hook-forms
7. useCallback and useMemo (useCase).
8. Optimizing a react component.
9. Handson Create a folder structure where folder should expend and collapse on click and file should not be clickable.

Round Four (Director)

1. Intro
2. Project discussion.
3. React Handson. Create a custom RadioWrapper where options can be passed as children but manage state in wrapper. Used useContext. Now Optimize it in such a way that when use click on an option, only options with changing states(prev selected and current selected) should rerender.
4. Project discussion

Company 6

Round One

1. Introduction
2. What are closures, give examples.
3. What is bind().
4. Write polyfill for bind.
5. Convert it to call() and apply().
6. Pure components in React.
7. What is shallow Copy and Deep Copy.
8. Write a function to deepcopy an object.
9. Modify it so that it can deepcopy nested arrays.
10. 3Sum problem.
11. What is a Binary Tree.
12. Write a function for DFS.
13. Covert recursion into loop.
14. Function to print top view of binary tree (Approach and pseudo code).
15. What is curring.
16. Write a function for sum of infinite curring sum(1)(2)(3)....(n)().
17. What is Critical Render Path.
18. Explain all the steps.
19. Techniques to optimize page’s performance.

Round Two

1. Infinite Curring (Repeated).
2. XSS and CSRF attacks.
3. Difference between Context API and Redux.
4. Binary Tree zig-zag traversal.
5. Write a function to return all the nodes from dom which contain given class name string.
6. React Hands on Code a Stopwatch. Three button—> Start , Pause, Reset.
7. React Handson Create a input field. Make an API call(Dummy) when user type. Debounce this API request.
8. Difference between Debounce and Throttle.

Round Three (Managerial)

1. Intro
2. Why this Company.
3. About current Project.
4. Role and Responsibilities

Company 7

Round One

1. JS code snippets.
2. React hooks code. Identify the issue.

const A = ({ isActive }) => {
  const [b, setB] = useState(isActive)
  if (isActive) {
    useEffect(() => {
      console.log("I am active")
    }, [])
  }
}

There are two issues in this.

3. What is Redux
4. Why we need React redux
5. Is it mandatory to use react-redux library.
6. I said no, What is another way.
7. Can we use redux in vanilla js
8. I said yes. How?
9. what is connect method
10. Can you implement it.
11. First with class based component.
12. Convert it into functional component.

Round Two

1. Create a timer in React.
2. Increment time by 1 second (faced react 18 double render issue. Fixed it).
3. Modify it ti create timer with given time in seconds from input field and keep decreasing unit 0.
4. Now change input from seconds to minutes and show two divs like digital clock (minutes:seconds).
5. Now add a pause button.
6. Add a reset button to reset clock to input field value.
7. Virtual DOM.
8. How diffing algo work.
9. Optimizing rerender in react.
10. Problem Solving: Given an array [1,0,2,0,1,2,1,0,1,2] Sort this array in one pass. First is to create three arrays and concatenate. Improve to inplace sorting.

Company 8

Round One

1. Hoisting.
2. Difference between let, const, var.
3. callback queue and priority queue.
4. Implement debounce.
5. What is a prototype
6. what is proto
7. Implement promise.all
8. Promise array can have string, number, object.
9. Merge 2 sorted arrays.

Round Two

1. Lift coconut puzzle.
2. Divide a cake into 8 pieces using 3 cuts.
3. zig zag tree traversal.
4. Move zeros to last in one pass [0,1,2,5,0,7,9]—>[1,2,5,7,9,0,0]
5. Suppose we have an image of Map of India where user can click on a state. Write an algorithm to find which state is clicked

Other

Round 1

1. Create a tic tac toe game.

Round 1

1. JS output Code snippets.
2. Write debounce in JS
3. Call Stack, Event Queue
4. CSS- centering a DIV
5. Adding gap in flex.
6. Grid basics
7. Symantec tags.
8. Block, inline, inline-block

Round One

1. JS output code snippets
2. What is a polyfill.
3. Write polyfill for bind()
4. Write a function to flatten a nested object
5. Object can have array as property
6. Write a function to return all pythagorean triplets from an array.

Round One

1. Why react.
2. React vs vanilla js
3. Component lifecycle.
4. Hands on: Create star rating component We can pass rating in props. Rating can have decimal value to .5 like 1.5, 2.5 Print half star in that case. If I hover on any star, all previous stars should fill and on click persist rating and onblur go to prev rating.