Forem: Sonu Jha

React Interview Questions - Junior Level

Sonu Jha — Fri, 25 Jun 2021 12:52:29 +0000

Lets Begin,

1> What are refs used for ?

Ans. Refs allow you to get direct access to a DOM element or an instance of a Component.

2> What happens when you call setState ?

Ans. The first thing React will do when setState is merge with object you passed into setState into the current state of the component. This will kick of a process called reconciliation.
The most efficient way possible, update the UI based on this new state.

3> When rendering a list what is a key and what is its purpose ?

Ans. Key helps React identify which items have changed, are added or are removed.
Keys should be given to the elements inside the array to give the elements a stable identity.

4> What happens during the lifecycle of a React component ?

Ans. At the highest level, React components have lifecycle events that fall into three general categories.

Initialization
State/Property Updates
Destruction

Initialization :
getInitialState()
getDefaultProps()

ComponentWillMount()
render()
componentDidMount()

Update:
componentWillReceiveProps()
shouldComponentUpdate()

componentWillUpdate()
render()
componentDidUpdate()

Destruction:
componentWillUnmount()

5> How do you prevent the default behavior in an event callback in React ?

Ans. You call e.preventDefault(); on the event e passed into the callback.

6> What does it mean for a component to be mounted in React ?

Ans. It has a corresponding element created in the DOM and is connected to that.

7> How do you prevent a component from Rendering in Reacr ?

Ans. Return null from the render method.

8> What's the difference between a controlled component and an Uncontrolled one in React ?

Ans. This relates to stateful DOM components(form elements) and the React docs explain the difference:

A Controlled component is one the takes its current value through props and notifies the changes through callback like onChange. A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled component. you can call this as a "dumb component".

A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

9> What is Flux ?

Ans. Unidirectional application flow paradigm/idea.

10> What is Reconciliation ?

Ans. Reconciliation is the process of comparing the DOM Tree before and after element changes and updating them accordingly.

React Interview Questions - Basic

Sonu Jha — Fri, 18 Jun 2021 16:19:42 +0000

Lets Begin with some of the basic ReactJs Interview Questions

1> How does React Work ?

Ans. React creates a virtual DOM. when there is any state changes in the DOM a diffing Algorithm runs to check what has changed in the in the virtual DOM. Next Reconciliation takes place where the where it udpates the DOM with the Difference.

2> What is Context ?

Ans. Context provides a way to pass data through the component tree without having to pass props down manually at the every level.

3> what is props in react ?

Ans. Props accept values in the component that are passed down to a child component.

primary purpose of props in react is to provide following component functionality :

pass custom data to your react component
Trigger state changes
use via this.props.reactProp inside Component's render() method.

4> what is the use of refs ?

Ans. Refs provide a way to access DOM nodes or React elements created in the render method.
They should be avoided in most cases, however, they can be useful when we need direct access to DOM element or an instance of a component.

Refs are created using React.createRef() and attached to React elements via the ref attribute.

Ex. class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef(); }
render() {
return

; }
}

5> what is JEST ?

Ans. Jest is a javascript unit testing framework made by facebook based on jasmine and provides automated mock creation and a jsdom environment. It's often used for testing React Components.

6> what are the advantages of ReactJs ?

Ans. 1> Increases the applications performanec with Virtual Dom
2> JSX makes code easy to read and write
3> it renders both on client and server side
4> Easy to integrate with other frameworks
5> Easy to write UI test case and integration with tools such as JEST.

7> How would you write an inline style in React ?

Ans.

8> What is React ?

Ans. React is an open source Javascript library created by facebook for building complex, interactive UIs in web and mobile applications. React's core purpose is to build UI components; It is often referred to as just the "V" (view) in
an "MVC" architecture.

9> What are major features of ReactJs ?

Ans. The major features of ReactJs are follows,

. It uses VirtualDOM instead RealDOM considering that RealDOM manipulation are expensive.
. Support server-side rendering.
. Follows Unidirectional data flow or data binding.
. Uses reuseable/composable UI components to develop the view

10> Where in a React component should you make an AJAX request ?

Ans. componentDidMount is where an AJAX request should be made in a React component.

This method will be executed when the component "mounts" (is added to the DOM) for the first time.

11> what is the difference between state and props?

Ans. The state is a data structure that starts with a default value when a Component mounts. It may be mutated across time, mostly as a result of user events.

Props (short for properties) are a component's configuration. They are received from above and immutable as far as the component receiving them is concerned.

12> What is the difference between a presentational component and a container component ?

Ans. Presentational components are concerned with how things look.
Container components are more concerned with how things work.

Thanks For Reading :)

Javascript Interview Questions - Entry Level

Sonu Jha — Thu, 17 Jun 2021 11:55:09 +0000

Everyday i will be sharing few Javascript Interview Questions to help you understand the languauge even better.

So lets get started with basic questions that are asked in the interview.

1> what is typeOf operator ?
Ans. typeOf operator examines the value and tells you what type the value is.

Ex: var a =14;
typeof(a); //returns Number.

2> What is object type ?

Ans. An object type is nothing but a collection of properties with name and value pair.

Ex: var obj = {
a : "Hello",
b : 45
}
obj.a //"Hello" accessed with doted notation
obj.b //45

obj["a"] //"Hello "accessed with bracket notation
obj["b"] //45

Bracket notation is also helpful if you want to access a property/key but the name is stored in an another variable, such as:

obj b= "a"

obj[b] //"Hello"
obj["b"] //45

3> Explain array in javascript.

Ans. An array is an object that holds value(of any type) not particularly in named properties/key, but rather in numerically indexed positions.

var arr = ["hello", 1 , true]
arr[0] // "hello
arr[1] // 1
arr[2] // true

typeof(arr) // "object"

4> what is scope in javascript ?

Ans. Each Function gets its own scope. So Scope is basically a collection of variables as well as the rules for how those variables are accessed by names.
only code inside that function can access the function's scoped variable.

5> Explain equality in javascript.
Ans. Javascript have both strict and type-converting comparions:

strict comparison (eg === checks for value equality without coercion)
Abstract comparison (eg == checks for value with coercion allowed)

Ex:
var a = "42"
var b = 42

a === b // false
a == b // true

6> what is let keyword in javascript ?

Ans. Es6 lets you declare variable within the individual blocks (pairs of {...}) using the let keyword.

let will not let you declare same variable within the same scope whereas var will simply replace it.

Self Study : Try to understand temporal dead zone, Hoisting

7> Explain null and undefined.

Ans. null means that it is Currently unavilable.
undefined means it hasnt been initialized.

8> What is Strict Mode ?

Ans. Strict Mode is a new Feature in ECS5 that allows you to place a program or a function in a "Strict" operating context. Strict context prevents from certain action to be taken and throws more exceptions.

Ex. function(){
"use Strict"
}

9> what is a polyfill ?

Ans. Polyfil is a piece of code or a plugin that allows the functionality that works on modern browser to also work on older browsers.

10> Explain event bubbling and how one may prevent it.

Ans. Event Bubbling is the concept in which an event triggers at the deepest possible element and trigers on parent elements in nesting order.

one way to handle event bubbling is event.stopPropgation()

11> what does "use strict" do ?

Ans "use strict" is written at a top of a function or a program that helps you write a safer code and throws error if a global variable is created by mistake.

Understanding Node Modules

Sonu Jha — Tue, 13 Apr 2021 17:43:37 +0000

Starting a Node application

create a folder - node-examples
now intiliaze the package.json by typing - npm init
Accept the standard defaults suggested and the update the package.json
file until you end up with the file containing the following
{
"name": "node-examples",
"version": "1.0.0",
"description": "Simple Node Examples",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index"
},
"author": "Sonu Jha",
"license": "ISC"
}
now create a file name index.js

var rect = {
perimeter : (x,y) =>(2*(x+y)),
area: (x,y) => (x*y)
};

To run the Node Application type the following at prompt npm start

A simple Node Module

Now create a file name rectangle.js and the following code to it:

exports.perimeter = (x, y) => (2*(x+y));

exports.area = (x, y) => (x*y);

Then Update index.js as follows :

var rect = require('./rectangle');

In Conclusion, A Node Modules are js files that are imported using require() function to use the functionalty.