SSBT ReactJS InterviewQuestions (11/2017)

Mixin issue:

• implicit dependencies: when you look at the compoennt, you do not know who is depend on your state or props, and once you decide to move your state up to the parent component, if some mixin dependes on this state, it will have issue
• name clashes: if two mixin have same method s, and you cannot use them together
• complexity

HTML5:

new features

have you used any Html5 storage? is there any size restriction for local storage, 10MB

HTML5:

• new elements such as: Semantic tags like header section footer datalist, and media elements like audio and video, graphic elements like svg and canvs, new form features like email, time and so on
• new APIs such as localStorage, sessionStoage, web workers, geolocation, drag and drop

CSS3:

• Box model
• new web fonts:@font-face property, you can include the font from a remote location and can then use it.
• Rounded corners, box shadows, text shadows
• Border Image
• RGBA: Color, Now with Opacity
• Transform (Element Rotation)

What features have you used in HTML5 and their advantages

• new Semantic Elements, such as <header> <footer>, so it's easy for develop know the each part and good for Search Engine Optimization (SEO)

• sessionStorage,

• localStorage,

Data grids - have you worked on them? , how will you handle issues like, page has loaded but data has not loaded yet? have you done paginations ?

Data grids??

ext JS has Grid panel, which is to provides an easy way to display, sort, group, and edit data.

Bookmarks - Home page - 1-2-3 .. now if we bookmark the 3rd page.. next time when we log in- we want to directly go to 3rd page

I think when you click the bookmark it iwll first go to the 3rd page and then redirect you to the Login Page, then after login it will redirect you to the Home Page.

on the login page, check document.referer,which is the information about your last page before you redirect to the login page, if it the same host information as the login page, then store that info tot he sessionStorage, , and after login, when you redirect to the home page, you need to check if that informat exist, if exist, then redirect to the that page

you are creating a form, that form is spread across multiple tabs.. how do you handle the dirty flags.. (angular??)

Force updates- what happens actually? Does it invoke shouldcomponentupdate() ?

For this component, it will by pass the SCU, but it's children will still trigger the SCU

How LESS work, explain

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions, nested syntax and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable.

Responsive web design(bootstrap).

Grid System

What is the package.json used for., What is npm used for.

package.json is a file that will describe your application and also have dependencies for your application. Script to run command.

npm is the node package manager. It's also the world's largest software registry.

The frameworks dealing with JSON.like Jpath JSONpath.

it's used to reading JSON documents, and perform some action such as filters to the json

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options]) => HOC (component)

Below are the questions asked during interview for State Street Bank.

1) Why ReactJS

couple of reasons why we use react, first one is Virtual Dom, it will compare the VD with the real DOM object, and only re-renders when it needs to, instead of rendering all of them together, so it will be very fast. Eg: you have a list show on the screen, when you push a new item into the list, in traditional framework or library, they will render the entire list, but in react, it will only render the one you just added.

(because of VD developer can only focus on the data or model, you do not need to care about how and when to update the DOM manually, React will do that part for you, so it will be much easier to build the UI especially if you have a very rich UI with a lot of data you need to manipulate, think about without the virtual dom, you will need to set up all the event listeners, and update the DOM by yourself, you will end up with a lot of code that is related to DOM manipulation which will be hard to maintain and refactor.)

Another reason why we use react is react is component based, so it's easy for reuse, you can think about react component to be just function, so we can reuse functions as needed and compose bigger functions from smaller ones, for example the Semantic UI React library, which is just collection of reusable React component for building the User interface.

Third reason is react has very good resources, and it has a very good community, and also it's maintained by FaceBook, so we have solid support, it will not dead that easily.

2) Important features of reactjs and why are they so important

1. VD, fast
2. Component based, reuse
3. JSX, write html in JS, everything in React is JS, so easier to puck up;
4. Server side rendering
5. Native, writing native app using JS

3) What is virtual dom and how it is used

The virtual DOM is basically JavaScript objects to represent the real DOM, and it uses the diff algorithm to calculate the difference between the VD, and only re-render the changed part to the UI.

The benefit of VD is no matter how compleixity your UI is, react always gives a 'not-bad' solution when updating the UI. Becuase with some assumption, the complexity of the diff algorithm is O(n).

For example, Compared to tradtional framewok or library,

And because of the VD handles all the DOM manipulation behind the sense, so developers can only focus on the data or model, it will be very easier to build application that has a rich user interface.

Suppose without the VD, if you are using pure JS......if you are using other framework without VD.......

4) what is JSX, how can you create component without jsx, how jsx transpiles(deep)

JSX is syntax extension to JavaScript, so that XML/HTML-like text which is React “elements” can exist inside the JavaScript. And the transpiler like Bable will transform the React “elements” into standard JavaScript objects. But using JSX is not necessary because each React “elements” is just syntactic sugar for calling React.createElement(component, props, ...children)

, so you can use React.createElement instead of the JSX to use React.

how jsx transpiles(deep): React.createElement(component, props, ...children) :

createElement takes 'component', 'props' and 'children' as parameters, it will create nested function call if you have children.

var profile = <div>
  <img src="avatar.png" className="profile" />
  <h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;

var profile = React.createElement("div", null,
  React.createElement("img", { src: "avatar.png", className: "profile" }),
  React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);

5) What is single direction flow and how it is useful then others

For react, it's the top component pass the state to the child component, and child component only receive data, and they do not modify the data, so it's like the data only flows from top to bottom. It is the idea that the components do not modify the data that they receive. They only listen for changes in this data, so the data will flow through the application in single direction so you have better control over it. And it's more predictable as well.

In redux: sianlge flow from actio to reducers then change store, then

In traditional two-way data binding, the state can be changed by both model and view, sometimes the data flow becomes unpredictable, you don't know who changed this data. But with single direction, you have a _single source of truth _you can always know who changed the data, you can jump back and forth to different

and because of the using of pure function, you can always know the state change, and jump back and forth.

6) What is redux and how you implement in react

Redux is a predictable state container for JavaScript apps. It provides predictable ways of maintaining your applications state in one place, store. There are three principles for redux, Single source of truth, State is read-only, Changes are made with pure functions.

In our application, we use the react-redux which is used to help you to connect react component to redux.

The React Redux gives access to a component called Provider, which will wrap around our App component, and it will alert Redux app when there is a change in sate, and will re-render our React app.

We will use mapStateToProps method to subscribe a component to a Store, and use mapDispatchTopProps to wrap dispatch to our action creators.

Basically we have a place to store all the actions, and a place to store all the reducers, and we will have our container components which will have the connection to redux.

'mapStateToProps', 'mapDispatchToProps'

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

7) What is HOC, give a example, how do you create

A higher-order component (HOC) is for reusing component logic, HOC is a function that takes a child component and some options then return a container component for that child component(take component and return another component). Just like component transforms props into UI, a HOC transforms a component into another component.

The 'connect' function will return connectHOC （connectAdvanced） . Because using react-redux, you are using the Provider that pass the store to the children compoennt through the context, in react, when the children want to use tis store, they need to define something like contextTypes, if you have 20 components want use store, then you need to define it 20 times, but with connect HOC it will do this for you, it also wraps other reusea functionality such as mapStateToProps, and mapDispatchToProps, so your component will access the state and action creators through the props.

It's also a way to do composition, instead of using mixin, you know before React 13, people are all using Mixin for resuing business logic, but it has several drawbacks, such as

Think about without this 'connect' function, for every container component that need to deal with redux, you need to write the same code like store.getState() again and again to get current state, but if you use connect, this HOC will wrap all those functions inside of it for reuse.

8) How do you connect store

I use the connect function from the react-redux to connect my component to the store.

mapStateToProps(state){

return {

   state.a

}

}

which will wrap the actions with dispatch method, so every time there is a change in the state, the component will get that state

9) what is provider, where it is used

https://www.robinwieruch.de/react-provider-pattern-context/

Provider is a pattern that context provider provides some properties in the context so that the children component can access to those properties directly through context without passing those properties down to children component through props explicitly.

For example, if you use the react-redux, there is a component called Provider which is used as wrapper for our App component, and it set the store in the context, so every component in our App can access the store property.(they get access store through the HOC connect)

Think about without this pattern, we need to pass store down through the props to every children component, with you application growing, you are doing a lot unnecessary work.

WHERE TO USE: Normally it's used when some of your properties need to be passed to a lot of children component, like store.

HOW TO USE: By addingchildContextTypesandgetChildContextto the context provider, React passes the information down automatically and any children component can access it by definingcontextTypes.

10) how do you bootstrap you r react app

use the webpack, becuase React use jsx, sow e need to set up in the webpack.config,js file, to set the entry point, specific the module--loaders babel, and plugins.

11) what are ES6 features, what is => and why it is used

arrow function.

Use AF will be cleaner and easier than traditional function.

For example, we also use it to bind 'this', so you do not need to bind it inside the constructor. because the 'this' keyyword in AF is the place where you define it.

2nd example, one of the use case is to simplify the call back function, for example in the array map function, instead of using the traditional function, use arrow function will be much easier.

But these is limitation in using the arrow function:

• it does not have it's own this obj, the this will be the execution context where it's being defined.
• you can not use the new command,
• you cannot use arguments object, can use rest paramet
• you cannot use yield command, which mean you cannot use it as generator function

12) life cycle methods(deep dive)

https://learn.co/lessons/react-component-lifecycle

lifecycle methods are methods that are called at different times in the component lifecycle, just before it's created, after it's created, and when it's about to be deleted.

And they are exposed to developers so you can use those methods to change how the component reacts to different changes in your app.

The only required method for a React component to be valid is therender()method, all others are optional.

Mounting

These methods are called when an instance of a component is being created and inserted into the DOM:

• constructor()
• componentWillMount()//before render(), you can use it to change the initial state if you need to
• render()
• componentDidMount()//after render(), You would use this method to set up any long-running processes such as fetching and updating data

Updating

Updating is executed whenever a component's state or props are changed, the component gets re-rendered on the page.

For example, going back to the chat window example, whenever you press "send" on a message, theChatWindowcomponent gets re-rendered as it needs to display an extra message.

• componentWillReceiveProps() //invoked when the props the parent is passing into the component have changed. You could use this to change the component's state based on the new props.
• shouldComponentUpdate(nextProps, nextState)//invoked just before the component is about to re-render. At this stage, you can compare the old and new props and state and prevent unnecessary re-renders: if the changes in state and/or props don't actually alter the component that's being shown to the user, there is no point "repainting" it, you can just return false. it returnstrue,the render function will be executed. Otherwise, it won’t, default is return true.
• componentWillUpdate()//called just aftershouldComponentUpdatehas finished and just before the new component gets rendered. You would usually use this method to update integrations with third party libraries.
• render()
• componentDidUpdate()//You will have access to the previous props and state as well as the current ones, and you can use this method to update any third party libraries if they happen to need an update due to the re-render.

Unmounting

This method is called when a component is being removed from the DOM:

• componentWillUnmount()//used to clear out any stuff set up in componentDidMount

13) have you ever worked on production build, how do you do it

Yes, I worked on my own project, which I deploy my application to the Heroku,

I just ulglify my code and push it to the Heroku server.

14) what are functional components and how they are used

functional components are just JavaScript functions, they only accept props from parent component, and they usually serves as the presentation component. They do not have lifecycle methods.

15) how can you improve performance of app

• we usually use the shouldComponentUpdate() method to check the old and new props and state, and if the state change is not related to the UI, we will return false to not render this element again
• use PureComponent to boost the performance because the PureComponent reduces the number of render operation in the application. As it only do the shallow comparsion.
• debounce some of your callbacks, for example, when you set up a onChange callback on input, you can actually debounce the onChange, like call onChange for every 1 second.
• if you are using redux, you can use some library such as redux-ignore, which will by pass some of the action for ur reducers or just listener specific action, so a stage change will not fire all reducers.
• use immutability helper:

16) At what rate you interact with clients, have you ever suggested architectural level to clients situation

If client asks you architectural suggestion on improving performance where you get 2 lakhs records (200,000, india units) from server and what you will suggest.

split the result, insteading of setting the whole list to the state, I will pass it partialy to the child component, and when you click the next button, or scroll down,

In react props - state:

• props are usually pass in from parent components, but you can also set default props, and state is the internal property so it contains the private information for the component
• you cannot mutate the props, but you can change states

setState:

• setState(updater[, callback]): updater(prevState, props), callback is called after render, but use componentDidUpdate() instead
• setState({}): but multiple call in the same lifecycle may be batched together which may cause the state to to unwanted value, so use the updater instead
• setState does not always immediately update the component. It may batch or defer the update until later. So when you read the this.state after setState may be danger, so use componentDidUpdate() or the callback in setState(updater, callback) instead.

Props - what happens when you mutate a state - react immutability helper:

if you change the state directly,

• react will not know the changeS, and it will not trigger the rerender.
• make the code unpredictable
• hard to test
• unable to do time-travel

PureComponent, shallow compare, this.state.arr.push(2), when compare shallowly, it will be treated as the same arr.

Using immutability helper is to make the immutablity more efficiently, you can definitely do immutility by urself, such as copy an array or object to make the state immutatble, but his may not be efficient and also you not easy to manage for nested object, so the immutability helper can handle this for you,

• Persistence

• Easier Deep Value Comparisons

React immutability helper is from the React.addons, Because the addons is deprecated on the V15.5, so 'immutability-helper' became another npm module. And you can use the 'update' method to get the newState from the previous State without changing the previous state and also unlike deep copy previous state, which is expensive, update let you only copy the part that changed, and reuse the unchanged part, so it's less expensive than deep copy.

After you Update a state - what happens in react? will it trigger a method ?

SSBT

ReactJS

Interview

Questio

ns (01/2017 to 05/2017)

Which Unit testing framework are you using for Javascript - Mocha
State management framework for Angular
Any experience with FLux /Redux - Please explain
In react props - state
Props - what happens when you mutate a state - react immutability helper
After you Update a state - what happens in react? will it trigger a method ?
What are various lifecyle in order. Render a page - lifecycle methods in chronological..
Update the state but Prevent the re-render - how do you do it?
Angular - bootstrapping ?

CSS - Overflow - what do you use for

controls what happens to content that is too big to fit into an area

1. visible
2. hidden
3. scroll
4. auto

what sort of backend APi's are you using -
Have you used Tree View or Grids?

What are stateless components ?
Have you used JSON, pls give a detailed example.
If i have 10.000 - 20,000 rows to be displayed on a data grid in react, how will you go about it? What sort of work have you done wrt displaying large amounts of data on the grid. How will you handle performance aspects, filters, column dragging etc..
:

1.About project ?
2.What are the front end technologies you have worked on ?
5.If a application is getting slower with time,how are you going to debug and re mediate the issue ?

memory leak, the profile in the developer tool, record, look at where it
*) Explain about HTML 5 new form attributes, new input types, Local storage and session storage, caching.

HTML 5 new form attributes: placeholder, autofocus, autocomplete, required, pattern,
*) Tell about NPM
*) Have you worked Jasmine unit test
*) what you have worked in ReactJs, how its good from other JS framework(like Backbone.js, Angular.js)
*) What is Props and state in React.js. Tell about life cycle of React.js
*) Whats is MIXIN, Flux in React.js
*) What is Virtual DOM, one way data-binding in React.js
*) Have you used JSX in React.js, deep dive in JSX
*) What are the new features in ECMA 6
*) What is the Prototype inheritance in Javascript
*) What is difference between class and pseudo classes in CSS3
*) Have you worked in LESS framwork

1. React JS exp, deep dive on this
2. Prototypical inheritance vs classical inheritance
3. what is closure in java
4. class vs sudeo classes in CSS3
5. What is an angular booststraping
6. How do you pass a variable from 1 module to another in angular
7. How to you implement chache in HTML5
8. What features have you used in HTML5 and their advantages
9. Local vs session storage
   10 .Expalin about keyword Prototype
10. JS Variable declaration how do you identify type of data stored in a variable

Ecma 6: destructing assignment
Reactjs:
1.prop types
2.Ref nodes

1. Component will mount and componentwillreceiveprops different
2. Component life cycle
3. This. Setstate is Synchronize or Asynchronize
   6.Prop validation //https://www.tutorialspoint.com/reactjs/reactjs_props_validation.htm

Redux;

1. Connect method argument
2. What is mapdisatch argument

React life cycle
What are the good things in react?
React router
Component?
Pass from one comp to another?
Flux
Mixin
CSS
Jsx KB
Es 6:: import,export
Scope
Prototype
Primitive
Html:5

Some additional questions..

Can we access Virtual DOM? If yes - how?
Local, Session stage in HTML 5. how much max storage in local storage
Bookmarks - Home page - 1-2-3 .. now if we bookmark the 3rd page.. next time when we log in- we want to directly go to 3rd
page
Data grids - have you worked on them? , how will you handle issues like, page has loaded but data has not loaded yet? have you done paginations ?
you are creating a form, that form is spread across multiple tabs.. how do you handle the dirty flags..
Have you used Babel/Webpack ? How did you do package management? NPM? What is the difference dependencies vs dev
dependencies.
Have you used Spread operator?
Have you used LESS or CASS. What does the overflow attribute do?
Say you have to show a popup.. you have to make sure that it always comes on top of anything else that is open. how do you do that?
Is there a USe cASE for having function inside a function in Javascript?
Have you used XML as a datasource or only JSON?
Are you familiar with any frameworks associates with JSON like Jpath JSONpath.
What are mixins? Have you used any MIXIN in react js? Please explain
Can we access Virtual DOM? If yes - how?
Local, Session stage in HTML 5. how much max storage in local storage

Bookmarks - Home page - 1-2-3 .. now if we bookmark the 3rd page.. next time when we log in- we want to directly go to 3rd page

Data grids - have you worked on them? , how will you handle issues like, page has loaded but data has not loaded yet? have you done paginations ?

you are creating a form, that form is spread across multiple tabs.. how do you handle the dirty flags..

Have you used Babel/Webpack ? How did you do package management? NPM? What is the difference dependencies vs dev dependencies.
Have you used Spread operator?

concat array, copy array, and also use it to copy object(which is an experiment feature)
Have you used LESS or CASS. What does the overflow attribute do?
Say you have to show a popup.. you have to make sure that it always comes on top of anything else that is open. how do you do that?

z-index

Is there a USe cASE for having function inside a function in Javascript?
Have you used XML as a datasource or only JSON?
Are you familiar with any frameworks associates with JSON like Jpath JSONpath.
What are mixins? Have you used any MIXIN in react js? Please explain
If a use CLASS keyword in ES6. if i say CLASS in ES6.. how will the code convert to Es5.
What does the prototype word mean
What is closure in Javascript
Please tell me how redux architecture works
What are pure functions?
When you invoke a state, what methods are called
suppose if we want to access a specific DOM element.. how do we do that..? refs
higher order components? where are they used.
Force updates- what happens actually? Does it invoke shouldcomponentupdate() ?

By default, when your component’s state or props change, your component will re-render. If yourrender()method depends on some other data, you can tell React that the component needs re-rendering by callingforceUpdate().

CallingforceUpdate()will causerender()to be called on the component, skippingshouldComponentUpdate(). This will trigger the normal lifecycle methods for child components, including theshouldComponentUpdate()method of each child. React will still only update the DOM if the markup changes.

Normally you should try to avoid all uses offorceUpdate()and only read fromthis.propsandthis.stateinrender().

what is the difference between - state.element.value vs state ???
difference between state and props. What are prop types.
in run time if i pass a wrong value.. does it stop processing? what happens in that scenario?
in CSS3 - have you used any preprocessors.. how CASS works.. pls explain
have you used any Html5 storage? is there any size restriction for local storage

Q - suppose you want to invoke a method from parent class how do you do that Super keyword?

super.methodInParent(); // super.methodInParent.call(this), 'this' will still be child 'this'

when using super as an object, it will point to the Parent.prototype

We are building a new data vizualization layer using react js and redux.

The lifecyle of component.

How to update the state in component. setState

Stateless and stateful components.

Responsive web design(bootstrap).

HTML5 new features.

The Unit test techniques you are using now.

After using setstate methods, if you do not want to re-render the component, how to make it happen?

The parameters for shouldComponentUpdate.

What is the package.json used for.

The dependencies and devdependencies in package.json.

The scripts in package.json.

React Router.

How to get data from remote server.

Redux architecture.

Connect method arguments, and the parameters passed into it.

What is npm used for.

The experience with babel and webpack.

The data flow in the redux.

The frameworks dealing with JSON.

How did you use React.js and Redux in your former projects.

React.PureComponent

is an alternative to React.Component. Instead of always returning true in its shouldComponentUpdate implementation, it returns the outcome of shallow props and state comparison.