You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -28,7 +28,7 @@ Layout process give exact co-ordinates to each node of the render tree, where th
28
28
29
29
So when we do,
30
30
31
-
``document.getElementById('elementId').innerHTML = "New Value"``
31
+
`document.getElementById('elementId').innerHTML = "New Value"`
32
32
33
33
Following thing happens:
34
34
@@ -66,15 +66,17 @@ While this was a very simple approach from a front-end perspective, it was also
66
66
67
67
Updating virtual DOM in ReactJS is faster because ReactJS uses
68
68
69
-
- Efficient diff algorithm
70
-
- Batched update operations
71
-
- Efficient update of sub tree only
72
-
- Uses observable instead of dirty checking to detect change
69
+
- Efficient diff algorithm
70
+
- Batched update operations
71
+
- Efficient update of sub tree only
72
+
- Uses observable instead of dirty checking to detect change
73
73
74
74
## ReactJS uses observable’s to find the modified components. Whenever setState() method is called on any component, ReactJS makes that component dirty and re-renders it.
75
75
76
76
### Whenever setState() method is called, ReactJS creates the whole Virtual DOM from scratch. Creating a whole tree is very fast so it does not affect the performance.
77
+
77
78
### Once you render a JSX element, every single Virtual DOM object gets updated.Compared to updating real DOM objects, the Virtual DOM updates faster. Before updating, a copy of the virtual DOM is made and later compared with the updated Virtual DOM.
79
+
78
80
### So at any given time, ReactJS maintains two virtual DOM, one with the updated state Virtual DOM and other with the previous state Virtual DOM. Then React can figure out which objects have been changed, and this process is called Diffing. Once React knows which objects to update, it updates only those objects in the Real DOM.
79
81
80
82
ReactJS using diff algorithm compares both the Virtual DOM to find the minimum number of steps to update the Real DOM.
@@ -83,7 +85,6 @@ ReactJS uses following steps to find the difference in both the Virtual DOM’s
83
85
84
86
**1. Re-render all the children if parent state has changed.** If the state of a component has changed, then ReactJS re-renders all the child components even if child components are not modified. To prevent the unwanted re-render of the child components we can use shouldComponentUpdate() component life cycle method. This will further help in boosting the performance.
85
87
86
-
87
88
**2. Breadth First Search.** ReactJS traverse the tree using BST. Consider the below tree. States of element B and H have changed. So when using BST ReactJS reached element B it will by default re-render the element H. This is the reason to use BST for tree traversal
88
89
89
90
<imgsrc="BST.jpeg"/>
@@ -94,14 +95,13 @@ Two elements of different types will produce different trees.
94
95
95
96
## The developer can hint at which child elements may be stable across different renders with a key prop.
96
97
97
-
98
98
**Virtual DOM is the name React developers gave to their DOM manipulation engine.** Virtual DOM provides a series of Javascript calls that tell the library how to build an in-memory DOM tree and how to update it when data bound to it changes. The central piece of Virtual DOM is its smart diffing algorithm: once the differences in the model have been mapped to the in-memory copy of the DOM, the algorithm finds the minimum number of operations required to update the real DOM. This results in two copies of the in-memory DOM being present during the diffing process.
99
99
100
100
## Summing up, updating the browser’s DOM is a three-step process in React.
101
101
102
102
- Whenever anything may have changed, the entire UI will be re-rendered in a Virtual DOM representation.
103
103
104
-
- The difference between the previous Virtual DOM representation and the new one will be calculated.
104
+
- The difference between the previous Virtual DOM representation and the new one will be calculated.
105
105
106
106
- The real DOM will be updated with what has actually changed. This is very much like applying a patch.
107
107
@@ -125,7 +125,6 @@ And once your application begins to change many things at once or deal with larg
125
125
126
126
## When a React UI is rendered for the first time after launching the app, it is first rendered into a virtual DOM, which is not an actual DOM object graph, but a light-weight, pure JavaScript data structure of plain objects and arrays that represents a real DOM object graph. A separate process then takes that virtual DOM structure and creates the corresponding real DOM elements
127
127
128
-
129
128
## Then, when a change occurs, a new virtual DOM is created from scratch. That new virtual DOM will reflect the new state of the data model. React now has two virtual DOM data structures at hand: The new one and the old one. It then runs a diffing algorithm on the two virtual DOMs, to get the set of changes between them. Those changes, and only those changes, are applied to the real DOM: This element was added, this attribute's value changed, etc.
@@ -140,7 +139,6 @@ The thing about immutable data structures is that, as the name implies, you can
140
139
141
140
What this means in terms of change detection is that when a React component's state consists of immutable data only, there's an escape hatch: When you're re-rendering a component, and the component's state still points to the same data structure as the last time you rendered it, you can skip re-rendering. You can just use the previous virtual DOM for that component and the whole component tree stemming from it. There's no need to dig in further, since nothing could possibly have changed in the state.
142
141
143
-
144
142
## Some more Theory on Virtual DOM
145
143
146
144
Virtual Dom is javascript object as similar to real DOM. On every mutation triggered either through “setState, dispatcher ” react creates a new virtual tree from scratch by adjusting those changes. React can produce upto 200000 trees in 1 second. In fact, it can produce tree much faster and more efficiently. Creation of new virtual tree follows [Breadth-first search](https://en.wikipedia.org/wiki/Breadth-first_search) strategy so that changes of any node could be adjusted through parent node if the change has happened on parent node too. If the changes have been done at the root node itself (first root of tree), then react will scrap down the complete tree and create new tree from scratch and also trigger re-rendered for the child components again.
@@ -162,17 +160,10 @@ Once all the steps are executed, React will repaint the Real DOM. This means dur
My collection of common JS / React / Node Interview questions, along with answers that I was putting together for myself while preparing for Interviews. Most of them, I was actually asked in real Interviews over the past few months. And very recentely I got my first job as full-stack Developer coming from a completely different educational and career background (Banking) and after completing my Programming Bootcamp from The Hacking School
172
164
173
165
This github repo, is by no means comprehensive, and for each of the concepts, there are better and more in depth coverage in the web (I have tried to include the sources as much as possible) - But my only aim with this repo is to have a reference tool so that I could continue a technical discussion with the interviewer for two, three or four hours.
#### First lets look at STATELESS Component vs Pure Component
2
+
3
+
STATELESS COMPONENT declared as a function that has no state and returns the same markup given the same props.
4
+
5
+
A quote from the React documentation:
6
+
7
+
```
8
+
These components must not retain internal state, do not have backing instances, and do not have the component lifecycle methods. They are pure functional transforms of their input, with zero boilerplate. However, you may still specify .propTypes and .defaultProps by setting them as properties on the function, just as you would set them on an ES6 class.
9
+
```
10
+
11
+
#### PURE COMPONENT is one of the most significant ways to optimize React applications. The usage of Pure Component gives a considerable increase in performance because it reduces the number of render operation in the application.
12
+
13
+
Let’s look at a simple example
14
+
15
+
```js
16
+
classWelcomeextendsReact.PureComponent {
17
+
render() {
18
+
return<h1>Welcome</h1>;
19
+
}
20
+
}
21
+
22
+
Hello= () => {
23
+
return<h1>Hello</h1>;
24
+
};
25
+
```
26
+
27
+
So above there is an example of a very simple Welcome Pure Component and Hello Stateless Component. **When you use these two in your Parent Component, you will see Hello will re-render whenever Parent Component will re-render but Welcome Component will not.**
28
+
29
+
#### This is because PureComponent changes the life-cycle method `shouldComponentUpdate` and adds some logic to automatically check whether a re-render is required for the component. This allows a PureComponent to call the method render only if it detects changes in state or props.
30
+
31
+
### When to use Pure Components?
32
+
33
+
Suppose you creating a dictionary page in which you display the meaning of all the English words starting with A. Now you can write a component which takes a word and its meaning as props and return a proper view. And suppose you using pagination to display only 10 words at a time and on scroll asking (i.e. sending an API call) for another 10 words and updating the state of the parent component. Pure Components should be used in this case as it will avoid rendering of all the words which rendered in previous API request.
34
+
35
+
Also in cases where you want to use lifecycle methods of Component then we have to use Pure Components as stateless components don't have lifecycle methods.
36
+
37
+
### When to use Stateless Components?
38
+
39
+
Suppose you want to create a label with some beautiful UI which will be used to rate the credibility of a profile like BEGINNER, MODERATE, EXPERT. Since its a very small component whose re-render will hardly make any difference and creating a new component for such a small case will be time-consuming. Also if you keep making components for very small-small view, soon you will end up with so many components and it will be hard to manage when working with a big project. Also always keep in mind Pure Component comes with peculiarities of the shallowEqual.
40
+
41
+
#### Conclusion
42
+
43
+
Pure Components gives a considerable increase in performance because it reduces the number of render operation in the application which is a huge win for complex UI and therefore advised to use if possible. Also, there will be cases where you want to use the lifecycle methods of Component and in such cases, we cannot use stateless components.
44
+
45
+
Stateless Components are easy and fast to implement. They are good for very small UI view where re-render cost won’t matter that much. They provide cleaner code and less number of files to deal with.
Copy file name to clipboardExpand all lines: Redux/README.md
+3-1
Original file line number
Diff line number
Diff line change
@@ -30,7 +30,9 @@ This means that all data in an application follows the same lifecycle pattern, m
30
30
31
31
## An example of How data and state flows in Redux
32
32
33
-
Basically in React the `setState()` method is the initial and final step for changing the state and re-rendering the component. But with Redux this state changing will have to go through 5 / 6 different steps before state change can happen. Here's an example. All these because in Redux all the application's state lives in one immutable state-tree called store. That store is at the fundamental level is a simple javascript object. And the reason its called **immutable** is because one does not simply modify the state tree. What we do is, we distribute action. **State is read-only**: The state cannot be changed directly by the view or any other process (maybe as a result of network callback or some other event). In order to change the state, you must express your intent by emitting an action. An action is a plain object describing your intent, and it contains a type property and some other data. Actions can be logged and later replayed which makes it good for debugging and testing purpose.
33
+
Basically in React the `setState()` method is the initial and final step for changing the state and re-rendering the component. But with Redux this state changing will have to go through 5 / 6 different steps before state change can happen.
34
+
**All these because in Redux all the application's state lives in one immutable state-tree called store.**
35
+
That store is at the fundamental level is a simple javascript object. And the reason its called **immutable** is because one does not simply modify the state tree. What we do is, we distribute action. **State is read-only**: The state cannot be changed directly by the view or any other process (maybe as a result of network callback or some other event). In order to change the state, you must express your intent by emitting an action. An action is a plain object describing your intent, and it contains a type property and some other data. Actions can be logged and later replayed which makes it good for debugging and testing purpose.
0 commit comments