React JS Interview Questions and Answers Set 6

51. What is the significance of store in redux?

A store is a javascript object which can hold the application’s state and provide a few helper methods to access the state, dispatch actions and register listeners. The entire state/ object tree of an application is saved in a single store. As a result of this, redux is very simple and predictable. We can pass middleware to the store to handle the processing of data as well as to keep a log of various actions that change the state of stores. All the actions return a new state via reducers.

52.What is the purpose of render method of react-dom?

This method is used to render a react element into the dom in the supplied container and return a reference to the component. If the react element was previously rendered into container, it will perform an update on it and only mutate the dom as necessary to reflect the latest changes.

Reactdom.render(element, container[, callback])

If the optional callback is provided, it will be executed after the component is rendered or updated.

53. How is redux different from flux?

Flux vs redux

Flux Redux
1. The store contains state and change logic 1. Store and change logic are separate
2. There are multiple stores 2. There is only one store
3. All the stores are disconnected and flat 3. Single store with hierarchical reducers
4. Has singleton dispatcher 4. No concept of dispatcher
5. React components subscribe to the store 5. Container components utilize connect
6. State is mutable 6. State is immutable

54.What is the use of react-dom package?

The react-dom package provides dom-specific methods that can be used at the top level of your app. Most of the components are not required to use this module. Some of the methods of this package are:

Render()
Hydrate()
Unmountcomponentatnode()
Finddomnode()
Createportal()

55. What are the advantages of redux?

Advantages of redux are listed below:
Predictability of outcome – since there is always one source of truth, i.e. the store, there is no confusion about how to sync the current state with actions and other parts of the application.

Maintainability – the code becomes easier to maintain with a predictable outcome and strict structure.

Server-side rendering – you just need to pass the store created on the server, to the client side. This is very useful for initial render and provides a better user experience as it optimizes the application performance.

Developer tools – from actions to state changes, developers can track everything going on in the application in real time.

Community and ecosystem – redux has a huge community behind it which makes it even more captivating to use. A large community of talented individuals contribute to the betterment of the library and develop various applications with it.

Ease of testing – redux’s code is mostly functions which are small, pure and isolated. This makes the code testable and independent.

Organization – redux is precise about how code should be organized, this makes the code more consistent and easier when a team works with it.

56.What are portals in react?

Portal is a recommended way to render children into a dom node that exists outside the dom hierarchy of the parent component.

Reactdom.createportal(child, container)

The first argument is any renderable react child, such as an element, string, or fragment. The second argument is a dom element.

57. What is react router?

React router is a powerful routing library built on top of react, which helps in adding new screens and flows to the application. This keeps the url in sync with data that’s being displayed on the web page. It maintains a standardized structure and behavior and is used for developing single page web applications. React router has a simple api.

58.What are fragments?

It’s common pattern in react which is used for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the dom

59. Why is switch keyword used in react router v4?

Although a <div> is used to encapsulate multiple routes inside the router. The ‘switch’ keyword is used when you want to display only a single route to be rendered amongst the several defined routes. The <switch> tag when in use matches the typed url with the defined routes in sequential order. When the first match is found, it renders the specified route. Thereby bypassing the remaining routes.

60.Why is it necessary to capitalize component names?

It is necessary because components are not dom elements, they are constructors. Also, in jsx lowercase tag names are referring to html elements, not components.