React Js

Question 1

What is React?

Answer 1

React is a Javascript library created by Facebook. It’s component based and used to create single page applications. Single page applications only load the application code once. You stay on the same page and the Javascript changes/updates the html or DOM to display new things without speaking to the server.

Question 2

What are the features of React?

Answer 2

Some features of React are, component architecture, one way data flow, UI library, and Virtual Dom.

Question 3

In calling setState, when would you pick one method of calling this function over the other?

Answer 3

You would use a function to set state when you need the current state or props of your component to calculate the next state. It is the most reliable to use the prevState function so you prevent the use of stale state or an “old” version of state that isn’t the current state. If you are certain you have the most current state or don’t need to the current state to calculate your setState then you can pass an object instead of a function.

Question 4

Is setState a synchronous or async call?

Answer 4

setState is an asynchronous class. Meaning that it doesn’t update immediately and is batched. It will be updated on the next rerender of the component.

Question 5

What are the different ways that you can call setState ?

Answer 5

You can set state by directly passing in an object to set with, or create a function that will copy the current state and updates based on the changes you make to it in your function.

Question 6

List some of the major advantages of React.

Answer 6

Reusable components, Virtual DOM, React Developer Tools, faster rendering.

Question 7

What are the limitations of React?

Answer 7

React focus on the view part of MVC i.e. UI of the web application. So, to overcome these that to focus on other development we need other tooling set technologies.

Question 8

What is JSX?

Answer 8

JSX is a syntax extention of Javascript. It produces react elements for the virtual DOM. It represents objects in memory.

Question 9

What is the virtual DOM? Explain how it works within ReactJS.

Answer 9

The DOM (Document Object Modal) is a programming interface for html and xml documents. It represents the page in a tree structure so that programs can read, access, and change the document structure, style and content. It can be modified with scripting language such as JavaScript.

The Virtual DOM is a lightweight representation of the DOM. It exists in memory but is never rendered, In React JSX tells the template compiler how to build in the virtual DOM tree. The Render() function creates the virtual DOM tree. When your app is updated (from things like setState) there will be two virtual DOM trees in memory. React will compare the two trees and compare the differences then reconcile them create a patch then render them to the real DOM. That way all the updates are batched and the DOM is only ever updated once in each update.

Question 10

Why can’t browsers read JSX?

Answer 10

Browsers don’t have inherent implementation for the browsers engine to understand JSX objects. Because JSX objects aren’t JavaScript objects.

Question 11

How different is React’s ES6 syntax when compared to ES5?

Answer 11

Using React with ES5:

Uses the React.createClass() API.
Defines component state using getInitialState().
Exports the component as a module using module.exports.
React with ES6:

Uses the ES6 class.
Defines component state using this.state in the constructor().
Exports the component as a module using the export default.
React with ES5:

Props are implicit.
Implicit binding of “this” to functions.
React with ES6:

Props are passed into the component via the constructor().
Explicit binding of “this” to functions in the constructor, using this.functionname.bind(this).

Question 12

Differentiate between Real DOM and Virtual DOM.Real DOM vs Virtual DOM

Answer 12

There aren’t many major differences between the virtual and real dom. The virtual is an abstraction of the real DOM.

Question 13

What do you understand from “In React, everything is a component.”

Answer 13

Components are the building blocks of a React application’s UI. These components split up the entire UI into small independent and reusable pieces. Then it renders each of these components independent of each other without affecting the rest of the UI.

Question 14

Explain the purpose of render() in React.

Answer 14

Rendering is the React engine process walking through the virtual DOM and collecting the current state, props, structure, desired changes in the UI, etc.

The render function in react is used to create and update the UI. It describes how the ui should look on the browser window. It is part of the component life cycle and isn’t user called. It returns on JSX element that contains the view hierarchy for the current component. Render is called when: the react component is first instantiated following the constructor call, or after an update to the components props, or after a setState call.

Question 15

How can you embed two or more components into one?

Answer 15

The components need to be put into a parent wrapper element. <div> or better use .</div>

Question 16

What is Props?

Answer 16

Props are properties of components in react. They are used to pass data from parent component to child. Props are read only therefor should not be changed by the child component.

Question 17

What is a state in React and how is it used?

Answer 17

State is a plain JavaScript object used by React to represent an information about the component’s current situation. The difference is while a “normal” variable “disappears” when their function exits, the state variables are preserved by React. It is used to enables a component to keep track of changing information in between renders and for it to be dynamic and interactive.

Question 18

How can you update the state of a component?

Answer 18

You update the state of a component by calling the setState function.

Question 19

What is arrow function in React? How is it used?

Answer 19

When writing a class component, all of the functions that you write out will need to be bound to the constructor so that the ‘this’ keyword will behave in the appropriate manner to allow you properly render your data. With a standard function the definition of this is dependent on where the function is called, so you would normally need bind this to it in react to get the correct definition of this that we want. An arrow function doesn’t have it’s own definition of this so it inherits it from the constructor.

Question 20

Differentiate between stateful and stateless components. Stateful vs Stateless Components React

Answer 20

In react a stateful component holds a piece of state. By contrast a stateless component does not have state. A stateful component is keeping track of changing data while a stateless component prints out what is given to them via props or always rendering the same thing.

Question 21

What are the different phases of React component’s lifecycle?

Answer 21

There are three phases to a components life cycle: Mounting, Updating, and Unmounting.

Question 22

Explain the lifecycle methods of React components in detail.

Answer 22

In the MOUNTING phase there are 4 methods.

Constructor(): called before anything else, when the component is initiated, and it is the natural place to set up the initial state and other initial values.
method is called with the props, as arguments, and you should always start by calling the super(props) before anything else, this will initiate the parent’s constructor method and allows the component to inherit methods from its parent (React.Component).
GetDerivedStateFromProps(): method is called right before rendering the element(s) in the DOM. Tts where you would set the state object based on the initial props.
render()- method is required, and is the method that actually outputs the HTML to the DOM.

ComponentDidMount()- called after the component is rendered. A natural place to do your api calls.

in the UPDATING(whenever there is a change to a components state or props) phase there are five methods

GetDerivedStateFromProps() - first method called when a component gets updated. Same as the mounting phase its a good place to set the state object based on initial props.

shouldComponentUpdate()- returns a boolean value that specifies whether react should continue with rendering or not. Default is true.

render()- method is required, in the update phase it will re-render the HTML to the DOM with new changes.

getSnapShotBeforeUpdate()- in this method you have access to props and state before the update. So after the update you can check the previous props and state. You should include componentDidUpdate() method otherwise you will get an error.

componentDidUpdate() - called after the component is updated in the DOM.

UNMOUNTING phase as one method

componentWillUnmount() - called when the component is about to be removed from the DOM.

Question 23

What is an event in React?

Answer 23

An event is React is like html events. You have user events such as click, mouseover, onClick, and onChange. The main difference is syntax were react uses camelCase, and the event handlers are in curly braces.

Question 24

How do you create an event handler in React?

Answer 24

You create an event handlers by creating a function for that event handlers then passing it to the JSX responsible for it. One difference in react is that you cannot pass it false to prevent default instead in your function you call the preventDefault() function.

Question 25

What are synthetic events in React?

Answer 25

A synthetic event is a cross-browser wrapper around the browser’s native event. It has the same interface as the browser’s native event, includingstopPropagation()andpreventDefault(), except the events work identically across all browsers. React doesn’t attach event handlers to the nodes themselves. Instead, a single event listener is attached to the root of the document. When an event is fired, React maps it to the appropriate component element.

Question 26

What is a ref in React?

Answer 26

Refs are a way to access DOM nodes or React elements created in the render method.

Refs are normally used to access DOM elements generally to set or get the html properties such as Width, Height etc. You can also use it to get the value e.g from a text field. States define the properties of a component that can change by different actions you perform

Question 27

List some of the cases when you should use Refs.

Answer 27

Managing focus, text selection, or media playback.
Triggering imperative animations.
Integrating with third-party DOM libraries.

Question 28

How do you modularize code in React?

Answer 28

You can modularize code in react by creating a new file for the code you want to separate and export it from that file. In any file you would like to use it in you would import. Note that if your module is a default export you don’t need to use curly braces. Whatever you name it will resolve to the default export. Ifyou need a specific function from the module then you need to specify the name in curly braces { }.

Question 29

How are forms created in React?

Answer 29

Forms are created in react just like any other elements. The difference with forms compared to html is that the form data is usually handled by the component where the data is stored in state. In html the form data is handled by the DOM.

Question 30

What do you know about controlled and uncontrolled components?

Answer 30

A controlled component is a component that renders form elements and controls them by keeping the form data in the component’s state. In a controlled component, the form element’s data is handled by the React component (not DOM) and kept in the component’s state.

An uncontrolled component is a component that renders form elements, where the form element’s data is handled by the DOM (default DOM behavior). To access the input’s DOM node and extract its value you can use a ref.

Question 31

What is Higher OrderComponents(HOC)?

Answer 31

Concretely, a higher-order component is a function that takes a component and returns a new component.

Whereas a component transforms props into UI, a higher-order component transforms a component into another component.

Question 32

What can you do with HOC?

Answer 32

The idea of HOC’s are to enhance components with functions or data. Some examples when using HOC is when you would like to toggle things in a component. You can build the functionality of toggle then use that component and pass it whatever component you would like to have that functionality.

Question 33

What is the significance of keys in React?

Answer 33

Keys help 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 When children have keys,React uses the key to match children in the old tree with children in the new tree.

Question 34

What is React Router?

Answer 34

React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the url.

Question 35

Why is Switch component used in React Router v4?

Answer 35

A switch component is used when we want to render a route exclusively to the specified route. Switch will render the first child of route or redirect that matches the location.

Question 36

Why do we need a Router in React?

Answer 36

We need router in react so we can navigate among components, allow changing the browser url, and keeping the ui synced with the url. For a user it allows them to navigate through our application without having to refresh on every page change.

Question 37

List down the advantages of ReactRouter.

Answer 37

Just like how react is based on components, in react router v4, the api is‘all about components’. A router can be visualized as a single root component () in which we enclose the specific child routes ().No need to manually set history value: in react router v4, all we need to do is wrap ourroutes within thecomponent.The packages are split: three packages one each for web, native and core. This supports the compact size of our application. It is easy to switch over based on a similar coding style.

Question 38

How is React Router different from conventional routing?

Answer 38

In conventional routing each page has a file that corresponds to it, and if the url changes then a request is sent to a server and the corresponding html is sent back. With react router no server is involved it’s all client side. Only one html page is involved, and only the history attribute is changed when the url is changed.

Question 39

What is React.memo ?

Answer 39

React.memo is a higher order component. React memo will use memoization to reuse the last rendered result to skip rerendering and boost performance in some cases. It only checks for prop changes, if the component wrapped uses useState, useReducer, or useContext hook it will still rerender when state or context changes.

Question 40

What is a constructor? Is it required?

Answer 40

The constructor is a method used to initialize an object’s state in a class. It automatically called during the creation of an object in a class.

Not required.

Question 41

What is the difference between calling a promise and using a .then vs using await?

Answer 41

in .then() it runs through the entire function and then continues the execution before returning back to the .then when the promise is resolved. Whereas in await the function stops execution within the function scope until the promise is resolved

Question 42

Which of these are required properties of the object in your package.json file?

Answer 42

A package.json file must contain “name” and “version” fields.

The “name” field contains your package’s name, and must be lowercase and one word, and may contain hyphens and underscores.

The “version” field must be in the form x.x.x and follow the semantic versioning guidelin

Question 43

What is NPM/Yarn?

Answer 43

NPM and yarn are packages managers that help to manage your dependencies. The main goal is automated dependency and package management. It means you can specify all your projects dependencies inside your packages.json file, then anytime you or someone else needs to get started with your project then can run a install of npm or yarn and immediately have the dependencies installed. You can also specify what versions your project needs to prevent updates breaking your project.

Question 44

Can different versions of the same package be used in the same application?

Answer 44

Yes

Question 45

What are Pure Components?

Answer 45

Pure components will do a shallow comparison on state change. It means that when comparing scalar values(a single value like string or int) it compares their values, but when comparing objects it compares only references. It helps to improve the performance of the app.