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.
REACT JS & CERTIFICATION
Weekend / Weekday Batch
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.Explain the concept of a Pure Component in React.
A “pure component” in React is a component that updates only when its properties or state have changed. In contrast, a “non-pure component” re-renders each time the parent component re-renders, regardless of whether its props or state have changed. Pure components are more productive since they do not needlessly re-render. By extending React, a component in React can be made pure. React is substituted by PureComponent. Component. This prompts the shouldComponentUpdate method, which decides whether or not to re-render, to provide an automatic shallow comparison of the component’s props and state.
60.Explain the concept of a Higher Order Component (HOC) in React.
In React, a Higher Order Component (HOC) design is used to reuse component logic. It is a function that accepts a component as an argument and outputs a new component that extends the capabilities of the input component. Without having to write duplicate code, HOCs can be used to add shared features, like authentication and data retrieval, to various components. All of the original component’s props as well as any extra props supplied to the HOC are transferred to the wrapped component. HOCs are a potent method for composing and enhancing pre-existing components without changing their original source code.
