Interview Questions

Question 1

What is React?

Answer 1

React is a Javascript framework/library. It lets you create UI’s from small isolated pieces of code called components, that can each have their own state.

Question 2

What is Redux?

Answer 2

Redux is state management library that’s most commonly used with the React library.

Question 3

How does Redux work?

Answer 3

Redux works by having a central store, that holds all of your applications state. Each component can have access to the state, without having to pass props up or down through components.

Question 4

Redux setup process

Answer 4

Create a store that’ll hold your state and all your reducers, create reducers that’ll take in an action and change your state based on action, create actions that’ll pass payload and action to your reducers.

Question 5

What are reducers in Redux?

Answer 5

Reducers in Redux are functions that take in two parameters: state/initial state, and an action. Based on what action is passed to the reducer, the reducer will then update the state and return a new state.

Question 6

Why do you choose React?

Answer 6

In React you can create highly reusable components that can be used in different parts of a project.
Development time is quick, since there’s a lot less boilerplate setup needed.

Question 7

What is AJAX?

Answer 7

Ajax is used to communicate with a server to send or receive data.

Question 8

What is responsive design?

Answer 8

Responsive design is designing an application or website to be able to render correctly on different sized devices. So that it’ll look nice for the end user whether it be a phone or computer.

Question 9

What is Restful API?

Answer 9

A Restful API is a web application that follows the REST principles of architecture.

Question 10

What is the difference between REST API and RESTful API?

Answer 10

The Rest Api refers to the rule that can make an Api restfu. A RESTful API is an api that follows those rules that are part of the REST architecture.

Question 11

What is the point of RESTful api?

Answer 11

The point of creating RESTful API’s is that it standardizes a set of rules that are used in many web services/applications to send and receive data and requests.

Question 12

What is closure?

Answer 12

A closure is an inner function that has access to an outer functions scope.

Question 13

What is a promise?

Answer 13

A promise is placeholder for a success value or failure reason, it is used in asynchronous methods that’ll return a value at some point in the future.

Question 14

What is a callback?

Answer 14

A function that takes another function as a parameter, and uses that taken in function to complete some task.

Question 15

What are the major features of React?

Answer 15

1. React uses a virtual DOM that compares components previous states, and only updates the items whos state has changed, instead of rerendering/updating all of the components.
2. React makes use of reusable components, that can be reused as many times throughout a project as needed.
3. Unidirectional data flow- data flows in a downward pattern from parent to child.

Question 16

What is jsx?

Answer 16

Jsx is an extension of React. It allows us to insert html into javascript, instead of the other way which is traditionally how it was done.

Question 17

what is the virtual DOM? How does it work?

Answer 17

The virtual DOM is a copy of the real DOM. It works by rerendering the Virtual copy anytime data/state is changed, it then calculates the differences between this DOMand the previous dom. Once the calculations have finished the real DOM is updated with only the components/parts that have changed.

Question 18

State versus Props

Answer 18

State are variables that are local to a component that can then be passed to other components(child components) that then become props that they can use.

Question 19

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

Answer 19

Lifting up the state means having one common ancestor or parent that holds state and that state is true value of all the data. We do this to maintain data consistency across different components.

Question 20

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

Answer 20

The main purpose is to help React distinguish between elements, and to help rendering when changing an element (changed, added, or removed.

Question 21

What are the core principles of Redux?

Answer 21

1. Single source of truth​ The global state of your application is stored in an object tree within a single store.
2. State is read-only. The only way to change the state is to emit an action, an object describing what happened.
3. Changes are made with pure functions​ called Reducers;

Question 22

How do I make an Ajax request using redux?

Answer 22

You can make an ajax/ asynchronous request by using redux-thunk, which is middleware that allows you to do these requests in Redux.

Question 23

What are the benefits of using Redux DevTools?

Answer 23

1. Allows you to inspect each payload for status and action
2. You can “cancel” actions going back in time
3. If the gearbox code is changed, each action will be evaluated again “in stages”
4. If the reducers launch then the error and the action in which it happened can be identified
5. With the persistState () store enhancer, you can preserve debugging sessions on page reloads.

Question 24

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

Answer 24

With React Developer Tools and the console, it is possible to modify rendered React components. This allows you to experiment with changing component values, calling methods, and testing interaction between components.

You can access and update a component’s state and props inside the Components tab.

Question 25

How does React use closures?

Answer 25

React uses closures in the same way that JavaScript does. Variables that are local to a function live with the function as long as they are ‘alive’. Except closures are useful in react when props change and rerendering happends. Not all parts of a component need to be rerendered. Those that do get new props given to them when they change, and the older components will still reference the old values since closure encapsulates those values at the time of function creation.

Question 26

What is redux-thunk?

Answer 26

Redux-thunk is a middleware that allows you to make asynchronous requests within redux.

Question 27

React context vs redux?

Answer 27

Context or Context API is a integrated into React core. This is a lightweight state management system compared to redux. There is way less setup and is easier to learn as there are fewer concepts. Although it is used for state management it’s better to use it for specific components: ex: passing props from parent to deeply nested child. Redux is better for having all your variables globally. Redux should be used for more complicated applications that have many components that all need to communicate with one another. But if it’s a simple project Context API is the way to go.

Question 28

What’s the benefit of using async/await?

Answer 28

1. Code is cleaner and easier to read.
2. Creates asynchronous code that behaves synchronously.
3. It ensures that we are returned something, if we were to get data from a server, it’d pause the code until we receive a success, pending, or failure

Question 29

What is a cookie? Cookies vs local storage vs session stoarge?

Question 30

What is prototypal inheritance?

Answer 30

The Prototypal Inheritance is a feature in javascript used to add methods and properties in objects. It is a method by which an object can inherit the properties and methods of another object.

Question 31

What is the DOM?

Answer 31

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 32

How to copy an array?

Answer 32

You can copy an array by assigning it to a variable and using the spread operator.

Question 33

How to compare two objects?

Answer 33

We can compare two objects by first stringifying them .Json objects and the comparing them with ===. This will turn all the properties of the object into a json format allowing us to compare.

Question 34

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

Answer 34

Asynchronous programming is having multiple threads running if you have a task that’ll take a larger amount of time. While your asynchronous code is running, the rest of your code won’t be blocked, it’ll continue to run while. Improving performance of your application/website.

Question 35

What is hoisting?

Answer 35

Hoisting is during compile time, variables are brought to the top of the page and read. This only applies to variables. You can use a variable before it’s declared in your document, because it will be ‘hoisted’ to the top during compile time. This does not work with native functions like console.log(x); and then declaring var x; afterwards.

Question 36

What is apply, call and bind?

Answer 36

They are all predefined methods in javascript.
Call
- you can invoke this method by specifying an owner object.
- you can invoke a method that belongs to another object.
- you can pass arguments to methods, one by one.

Apply
- Is similar to the call method. The only difference is that you can pass an array as the argument instead of one by one.

Bind
- This method returns a function where the value of this keyword is bound to the owner object.

Question 37

Let vs Var vs Const

Answer 37

1. variables that are declared using var are scoped to the function. If it is created outside the function, then it becomes a global variable.
   - var can also be used/referenced in code before they are declared.
   - redeclaring the same variable with var will not throw an error
2. let and const are block scoped. they can only be accessed within the nearest set of curly braces.
   - you cannot reference a let or const variable before they have been declared in code
   - let lets you reassign it’s value, while const does not.

Question 38

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 38

a null variable is equal to nothing, an undefined variable is one that has not been given a value, and an undeclared variable hasn’t been created yet.

Question 39

What is higher order function?

Answer 39

A higher order function is any function that takes one or more functions as an argument, which it uses to operate on some data, and/or returns a function as a result.

Question 40

What is the difference between == and ===?

Answer 40

== is a loose equality comparison, so if you were to have a var = 2, if we compare it to the string “2” or two it’ll still be the same because it doesn’t check the type of the variable. === operator is strict, so the variable when comparing has to be of the same type and value.

Question 41

What is the difference between store and reducer?

Answer 41

Store - Is what holds all the data your application uses.
Reducer - is what manipulates that data when it recieves an action.

Question 42

How do you send data up from child to parent component?

Answer 42

You can send data up from a child to parent using a callback function to pass that data.