React Questions

Question 1

What is React?

Answer 1

A javascript library for building user interfaces. It uses a virtual dom, JSX, and components.

Question 2

What is Redux?

Answer 2

Redux is a predictable state container for JavaScript apps.

It allows you to manage state for your web applications.

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.

Redux evolved from the idea of Flux — an architecture pattern created by the Engineers at Facebook.

Question 3

How does Redux work?

Answer 3

The core concepts of Redux — Store, Actions, Reducers, and Subscriptions.

Initial State - what it looks like initially
Actions/Dispatches

Actions / Dispatch - Actions can alter the initial state. When we use an action we are dispatching.

Reducers - Interpret actions and update state accordingly. Reducers take in the argument of the state set to the default initial state and the action. This action helps the reducer determine what needs to be done with the state.

Store - This is where the state is contained. In order to create one, you need a reducer and initial state.

Subscribe - listens for store updates

Question 4

What makes Redux so Special?

Answer 4

In short, Redux gives you a single object that holds the state for your entire application in one location — that could include data from your backend API or an external API, state for navigation, a user’s information, toggled state of a button, and so on.

This is powerful because it allows easier scalability and the ability to quickly diagnose bottlenecks, asynchronous issues, or errors.

Question 5

Redux set up process

Answer 5

1. Create a reducers folder, reducers.js inside.

• inside reducers.js define defaultState and a reducer function
• default state includes the fields we want to store
• reducer function takes state and an action as arguments.
• The action itself is represented as an object with two keys. action and payload.
• use a switch statement to determine what to do for each action

2. Implement Redux in the index.js file

• import {Provider} from ‘react-redux’;
• import {createStore} from ‘redux’
• import reducer from ‘./reducers/reducer’

3. Connect the Component
   - connect the components we want to the store we created in index.js
   - import {connect} from ‘react-redux’
   - export default connect()(App)
4. Map State to Props
   - Once we establish a connection, let’s add state as props to this component. Within the App component, let’s create a function called mapStateToProps.
5. Map Dispatch to Props
   - Now, let’s change values in state. We set up another function inside App called mapDispatchToProps.
   - Similar to mapStateToProps, we return an object but with the key of setUser set to a value of a function that will send a dispatch to the reducer.
   - In this instance, when we call setUser through props, it expects a user object argument that uses the callback function, dispatch.

Question 6

What are reducers in redux?

Answer 6

a reducer is a pure function that takes an action and the previous state of the application and returns the new state.

Question 7

Why do you choose React?

Answer 7

It’s a very popular framework with a lot of employment opportunities. Doesn’t seem to be going anywhere anytime soon, so decided to pick this one.

Question 8

What is AJAX?

Answer 8

AJAX = Asynchronous JavaScript And XML.

Axios let’s us take advantage of this.

It allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes.

• You can read data from a web server after a web page has loaded
• Update a web page without reloading the page
• Send data to a web server - in the background

Question 9

What is reponsive design?

Answer 9

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

Question 10

What is Restful API?

Answer 10

A REST API (also known as RESTful API) is an application programming interface (API or web API) that conforms to the constraints of REST architectural style and allows for interaction with RESTful web services. REST stands for representational state transfer and was created by computer scientist Roy Fielding.

An API is a set of definitions and protocols for building and integrating application software. It’s sometimes referred to as a contract between an information provider and an information user—establishing the content required from the consumer (the call) and the content required by the producer (the response). For example, the API design for a weather service could specify that the user supply a zip code and that the producer reply with a 2-part answer, the first being the high temperature, and the second being the low.

In other words, if you want to interact with a computer or system to retrieve information or perform a function, an API helps you communicate what you want to that system so it can understand and fulfill the request.

You can think of an API as a mediator between the users or clients and the resources or web services they want to get. It’s also a way for an organization to share resources and information while maintaining security, control, and authentication—determining who gets access to what.

Another advantage of an API is that you don’t have to know the specifics of caching—how your resource is retrieved or where it comes from.

Question 11

What is the difference between REST API and RESTful API?

Answer 11

REST stands for representational state transfer. It is a set of constraints that set out how an API (application programming interface) should work. If an API is RESTful, that simply means that the API adheres to the REST architecture. Put simply, there are no differences between REST and RESTful as far as APIs are concerned. REST is the set of constraints. RESTful refers to an API adhering to those constraints. It can be used in web services, applications, and software.

There are 4 main principles of REST as laid out by Roy Fielding and his colleagues in 2000. They set out to create a standard that allowed servers to communicate with other servers easily. This is what they came up with, changing the landscape of APIs:

Client-Server: There is always a client and a server, and these two systems need boundaries for how they operate. Which one is being called (server) and which one is making the request (client)? Having these boundaries leads to smoother operation.

Stateless: Servers need to be able to process messages they receive. In order to do this, every request a server receives should have the necessary information required for the server to work.

Uniform Interface: Using similar terminology and resources helps standardize APIs. According to this principle, the following HTTP verbs are used: GET, PUT, POST, and DELETE. Resources always refer to URIs (uniform resource identifier). HTTP responses always come with a status and a body.

Cacheable: Clients need to be able to cache representations. Because of statelessness (every representation being self-descriptive), this is possible in a RESTful API.

Question 12

What is the point of RESTful API?

Answer 12

A RESTful API is an architectural style for an application program interface (API) that uses HTTP requests to access and use data. That data can be used to GET, PUT, POST and DELETE data types, which refers to the reading, updating, creating and deleting of operations concerning resources.

Question 13

What is closure?

Answer 13

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

Question 14

What is promise?

Answer 14

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

Question 15

What is callback?

Answer 15

A callback function is a function passed into another function as an argument,

Question 16

What are the major features of React?

Answer 16

1. Virtual DOM (speeds up dev process)
2. Javascript XML or JSX
3. React Native (transforms code to IOS Android compatibility)
4. One-Way Data Binding

This means that React uses a flow of data that is unidirectional, forcing developers to use the callback feature to edit components, and preventing them from editing them directly.

The controlling of data flow from a single point is achieved with a JS app architecture component called Flux. It actually affords developers better control over the app and makes it more flexible and effective.

5. Declarative UI

This feature makes React code more readable and easier to fix bugs. React JS is the best platform to develop UIs that are both exciting and engaging not just for web apps, but mobile apps as well.

6. Component Based Architecture
   This simply means that the user interface of an app based on React JS is made up of several components, with each of them having its particular logic, written in JS.

Due to this, developers can relay the data across the app without the DOM being impacted. React JS components play a huge part in deciding the app visuals and interactions.

Question 17

What is JSX?

Answer 17

Javascript in React. Separates Concerns via components. Create components to simplify UI rendering (separate logic)

Question 18

What is the virtual DOM? How does the virtual DOM work?

Answer 18

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

Question 19

state vs props

Answer 19

Props are used to pass data from parent to child. State can be passed as a prop, but State is a plain JavaScript object used by React to represent an information about the component’s current situation

Question 20

What does lifting state up mean and why do we do it?

Answer 20

Passing state via props to a child component. That child component can now make modifications to state, and those changes are lifted up to the parent, where the state is defined.

Question 21

Why do we set a key property when we map over an array in React?

Answer 21

The main purpose of keys is to help React differentiate and distinguish elements from each other, increasing its performance when diffing between the virtual and real DOM

This approach enables the declarative API of React: You tell React what state you want the UI to be in, and it makes sure the DOM matches that state

Question 22

What are the core principles of Redux?

Answer 22

Single source of truth​
The global state of your application is stored in an object tree within a single store.

State is read-only​
The only way to change the state is to emit an action, an object describing what happened.

Changes are made with pure functions​
To specify how the state tree is transformed by actions, you write pure reducers.

Question 23

How do I make an AJAX request using Redux?

Answer 23

Since you are already using redux you can apply redux-thunk middleware which allows you to define async actions.

Question 24

What are the benefits of using Redux DevTools?

Answer 24

Redux DevTool allows us to dispatch actions without writing any code. We can add our actions in dispatcher and it works just like action dispatched via Redux API. This kind of mocking helps in testing side effects and dependent actions. This feature becomes really handy when coupled with locking to the current state.

You can also see step by step what is changing in your store and how that impacts your app components loading / rendering.

Question 25

How do I use React DevTools? What does this help me with?

Answer 25

React developer tools help us smoothly create interactive UIs and React is able to reconcile changes to the DOM in a performant way. The React Developer tool is undergoing constant development with new features added to it regularly. It is an essential instrument you can use to inspect a React application.

Question 26

How does React use closures?

Answer 26

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

useEffect takes advantage of closures. We have access to all our variables inside it.

Question 27

React context vs Redux

Answer 27

React context has been there for a while. With the coming of React hooks, it’s now much better. It has so many advantages, including the fact that the context API doesn’t require any third-party libraries. We can use it in React apps to manage our state like redux.

To some extent, Redux works for state management in React applications and has a few advantages, but its verbosity makes it really difficult to pick up, and the ton of extra code needed to get it working in our application introduces a lot of unnecessary complexity.

On the other hand, with the useContext API and React Hooks, there is no need to install external libraries or add a bunch of files and folders to get our app working. This makes it a much simpler, more straightforward way to handle global state management in React applications.

Let’s take a closer look at Redux, React Hooks, and the Context API to see how they work, what challenges developers face when using these tools, and how using React Hooks and Context can help you overcome common issues associated with Redux.

Question 28

What is redux-thunk?

Answer 28

Redux Thunk is a middleware that allows you to call the action creators that return a function(thunk) which takes the store’s dispatch method as the argument and which is afterwards used to dispatch the synchronous action after the API or side effects has been finished.

Question 29

What’s the benefit of using async/await?

Answer 29

Increase the performance and responsiveness of your application, particularly when you have long-running operations that do not require to block the execution. In this case, you can perform other work while waiting for the result from the long running task.

Organize your code in a neat and readable way significantly better than boilerplate code of the traditional thread creation and handling. with async / await , you write less code and your code will be more maintainable than using the previous asynchronous programming methods such as using plain tasks.

async / await is the newer replacement to BackgroundWorker, which has been used on windows forms desktop applications.

You make use of the latest upgrades of the language features, as async / await was introduced in C# 5, and there have been some improvements added to the feature like foreach async and generalized async type like ValueTask

Question 30

What is cookie? cookies vs localStorage vs sessionStorage?

Answer 30

Cookies are primarily for server-side reading (can also be read on client-side), localStorage and sessionStorage can only be read on client-side.

Cookies store data that has to be sent back to the server with subsequent XHR requests. Its expiration varies based on the type and the expiration duration can be set from either server-side or client-side .

Session Storage

stores data only for a session, meaning that the data is stored until the browser (or tab) is closed

data is never transferred to the server

can only be read on client-side

storage limit is about 5-10MB

opening multiple tabs/windows with the same URL creates sessionStorage for each tab/window

Local storage

localStorage is a way to store data on the client’s computer. It allows the saving of key/value pairs in a web browser and it stores data with no expiration date. localStorage can only be accessed via JavaScript, and HTML5. However, the user has the ability to clear the browser data/cache to erase all localStorage data.

Question 31

What is prototypal inheritance?

Answer 31

Simply put, prototypical inheritance refers to the ability to access object properties from another object.

Question 32

What happens when we enter the url to browser?

Answer 32

You enter a URL into a web browser
The browser looks up the IP address for the domain name via DNS
The browser sends a HTTP request to the server
The server sends back a HTTP response
The browser begins rendering the HTML
The browser sends requests for additional objects embedded in HTML (images, css, JavaScript) and repeats steps 3-5.
Once the page is loaded, the browser sends further async requests as needed.

Question 33

What is the DOM?

Answer 33

Document Object Model.

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.

Question 34

How to copy an Array?

Answer 34

// Old way
const cloneSheeps = sheeps.slice();

// ES6 way
const cloneSheepsES6 = [...sheeps];

Question 35

How to compare two objects?

Answer 35

JSON.stringify (order of property matters)

_.isEqual(one, two); (Lodash way)

Question 36

What is asynchronous programming and why is it important in JavaScript?

Answer 36

Asynchronous programming makes it possible to express waiting for long-running actions without freezing the program during these actions. JavaScript environments typically implement this style of programming using callbacks, functions that are called when the actions complete.

Question 37

What is hoisting?

Answer 37

Hoisting is JavaScript’s default behavior of moving declarations to the top.

In JavaScript, a variable can be declared after it has been used.

In other words; a variable can be used before it has been declared.

Variables defined with let and const are hoisted to the top of the block, but not initialized.

Variables defined with var are hoisted and initialized.

x // syntax errror,
const x = 5

y // ReferenceError
let y = 5

t // 5
var t = 5

Question 38

What is apply, call and bind?

Answer 38

You can use call()/apply() to invoke the function immediately.

The only difference is call() method takes the arguments separated by comma while apply() method takes the array of arguments.

bind() returns a bound function that, when executed later, will have the correct context (“this”) for calling the original function. So bind() can be used when the function needs to be called later in certain events when it’s useful.

//Demo with javascript .call()

var obj = {name:”Niladri”};

var greeting = function(a,b,c){
    return "welcome "+this.name+" to "+a+" "+b+" in "+c;
};

console.log(greeting.call(obj,"Newtown","KOLKATA","WB"));
// returns output as welcome Niladri to Newtown KOLKATA in WB

===========================

//Demo with javascript .apply()

var obj = {name:”Niladri”};

var greeting = function(a,b,c){
    return "welcome "+this.name+" to "+a+" "+b+" in "+c;
};

// array of arguments to the actual function
var args = [“Newtown”,”KOLKATA”,”WB”];
console.log(“Output using .apply() below “)
console.log(greeting.apply(obj,args));

/* The output will be
Output using .apply() below
welcome Niladri to Newtown KOLKATA in WB */

===========================

//Use .bind() javascript

var obj = {name:”Niladri”};

var greeting = function(a,b,c){
    return "welcome "+this.name+" to "+a+" "+b+" in "+c;
};

//creates a bound function that has same body and parameters 
var bound = greeting.bind(obj); 

console. dir(bound); ///returns a function
console. log(“Output using .bind() below “);
console. log(bound(“Newtown”,”KOLKATA”,”WB”)); //call the bound function

/* the output will be
Output using .bind() below
welcome Niladri to Newtown KOLKATA in WB */

Question 39

let, var, const

Answer 39

function-scoped: var
block-scoped: let / const

Var and let can be redefined, const cannot. Although var must be redefined with var while let is only written once.

Question 40

What’s the difference between a variable that is: null, undefined or undeclared? How would you go about checking for any of these states?

Answer 40

undefined is a variable that has been declared but no value exists and is a type of itself ‘undefined’.

null is a value of a variable and is a type of object.

undeclared variables is a variable that has been declared without const, let, var.

Question 41

what is higher order function?

Answer 41

A “higher-order function” is a function that accepts functions as parameters and/or returns a function.

Question 42

What different between == and ===?

Answer 42

== converts the variable values to the same type before performing comparison. This is called type coercion.

=== does not convert.

Question 43

What is the difference between store action, and reducer

Answer 43

Store - Is what holds all the data your application uses.

Reducer - is what manipulates that data when it receives an action.

Action - is what tells reducer to manipulate the store data, it carries the name and (not required) some data.

Question 44

How do you send data up from child to parent component

Answer 44

You pass a function from the parent to the child via props. When the child calls that function, the parent has access to whatever arguments (data) the child called the function with.