Skip to main content
⏱ 0:03est. 8 min

Value Labs

/**
 
// https://www.ambitionbox.com/interviews/valuelabs-interview-questions/front-end-developer

Javascript concepts: Closure, Promise, Fetch, evening bubbling and capturing. React questions: Features of react, virtual DOM, react hooks, custom hooks.

1.How Virtual DOM is more efficient than real DOM. 
2. Coding question: Valid parentheses
3. Usage of Event delegation.
4. Custom events. In-depth questions of JavaScript.


Q1. Basic javascript and coding question on react
Q1. Technical discussion with senior architect

Q1. What is react and how it works how it is all about, hooks and redux
Q2. What is usememo, usereducer and ol


Asked me to code a button, and on click it should increment by 1

What are react hooks and use cases of it

Component lifecycle, bundling, event bindings

How do you connect a component to Redux store? Which function in Redux is used to connect to store? What are the parameters in connect?
A. The connect() function connects a React component to a Redux store.
function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

What is Context API in React? Is there a need to have an initial state in Context API?
A. Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Do Reducer need to have an initial state compulsorily?
A. Just remember that your reducer should return some kind of initial state if the state given to it as the first argument is undefined. But you don't want your initial application state to be undefined, so you have to initialize the state yourself
function reducer(state = initialState, action) {...}

What is the minimum coverage for an app? How much code do you push to production/master branch while deployment?
A. Minimum Test Coverage Rate: Keeping it between 60 - 70%
Optimal Test Coverage Rate: Keeping it between 70 - 80%
Overkill Test Coverage Rate: Keeping it between 80 - 100%

Will React re-render whole page or just a part of it?
The entire app re-renders whenever a state variable changes
I know some developers believe that every state change in React forces an application-wide render, but this isn't true. Re-renders only affect the component that owns the state + its descendants (if any)

What are the use cases of Service Workers?
Service Workers lets us enable automated fall-back mechanisms very easily. For example, it is super simple to ask the browser to get the original image if it is not able to get the optimized image from our servers. This is how we implement it in our script.
1. Service Worker Prerender
2. Sending your website through a single ZIP
3. Offline Analytics
4. Load Balancer


Explain Redux-Saga middleware. How do you Dispatch actions from components in Redux?
Redux Saga is a middleware library used to allow a Redux store to interact with resources outside of itself asynchronously. 
This includes making HTTP requests to external services, accessing browser storage, and executing I/O operations. These operations are also known as side effects.
mapDispatchToProps - Connect: Dispatching Actions with mapDispatchToProps
const mapStateToProps = (state, ownProps) => ({
  // ... computed data from state and optionally ownProps
})

const mapDispatchToProps = {
  // ... normally is an object full of action creators
}

// `connect` returns a new function that accepts the component to wrap:
const connectToStore = connect(mapStateToProps, mapDispatchToProps)
// and that function returns the connected, wrapper component:
const ConnectedComponent = connectToStore(Component)

// We normally do both in one step, like this:
connect(mapStateToProps, mapDispatchToProps)(Component)

https://blog.logrocket.com/understanding-redux-tutorial-examples/#:~:text=The%20way%20Redux%20works%20is,actions%2C%20store%2C%20and%20reducers.

How Redux works
The way Redux works is simple. There is a central store that holds the entire state of the application. Each component can access the stored state without having to send down props from one component to another
There are three core components in Redux — actions, store, and reducers
Redux actions
- Actions are plain JavaScript objects that must have:
- A type property to indicate the type of action to be carried out
- A payload

Actions are executed using the dispatch() method, 
{ 
  type: "INCREMENT",
  payload: {
    incrementBy: 5,
  }
}

Redux reducers
- Reducers are pure functions that take the current state of an application, perform an action, and return a new state.
- Given the same object, they should always produce the same result.
- The reducer handles how the state (application data) will change in response to an action:
- Reducers are based on the reduce function in JavaScript, where a single value is calculated from multiple values after a callback function has been carried out.
const CounterReducer = (state = initialState, action) => {
    switch (action.type) {
      // This reducer handles any action with type "LOGIN"
      case "INCREMENT":
          return state + action.incrementBy ? action.incrementBy : 1
       default:
          return state;
      } 
};

Redux store
- The store is a “container” (really, a JavaScript object) that holds the application state, and the only way the state can change is through actions dispatched to the store.
- Redux allows individual components to connect to the store.
- It is highly recommended to keep only one store in any Redux application.
- Basically, the components get to update the store via actions and then subscribe to the changes to the store so they know when to re-render

Redux toolkit
Redux is a great utility for state management in React. But, as we mentioned before, it can introduce a lot of boilerplate into your application due to the verbosity of its API. Because of this, it is recommended to use the Redux Toolkit

Setting up a store with Redux toolkit
While setting up a store with pure Redux can be quite cumbersome, with Redux Toolkit, it is a single call to the configureStore function

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './counterReducer'

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
})

export default store
 */
/* 
fibonacci
*/