To sum up, here are the steps then happen in React when DOM gets updated:<\/p>\n\n\n\n
- It takes a snapshot of the current state.<\/li>
- The virtual DOM gets updated<\/li>
- It compares the current state to the snapshot taken before<\/li>
- React figures out which objects were changed<\/li>
- React changes only that <\/em>objects<\/li>
- The real DOM now gets updated.<\/li><\/ol>\n\n\n\n
2. Name some of the most important lifecycle hooks and their purposes. (It\u2019s alternatives in new React Hooks)<\/h2>\n\n\n\n
Let\u2019s rundown them in order. I\u2019ll make highlight the ones, that I think are most important and often used.<\/p>\n\n\n\n
On render:<\/strong><\/p>\n\n\n\n
- constructor<\/li>
- static getDerivedStateFromProps \u2014
useEffect(() => {}, [props1, props2])<\/li> - render<\/li>
- componentDidMount \u2014 useEffect(() => {}, [])<\/em><\/li><\/ol>\n\n\n\n
On re-render:<\/strong><\/p>\n\n\n\n
- static getDerivedStateFromProps \u2014
useEffect(() => {}, [props1, props2])<\/li> - shouldComponentUpdate() \u2014 useMemo()<\/li>
- render<\/li>
- getSnapshotBeforeUpdate()- custom hook to hold previous state<\/li>
- componentDidUpdate \u2014 useEffect(() => {})<\/li><\/ol>\n\n\n\n
Unmounting:<\/strong><\/p>\n\n\n\n
ComponentWillUnmount \u2014 useEffect(() => return {}, [])<\/p>\n\n\n\n
3. Why do we use arrow functions in React and what problem do they solve?<\/h2>\n\n\n\n
The this <\/em>keyword works differently in arrow functions. They do not bind their own this, <\/em>instead, they inherit one from the parent scope, which is called \u201clexical scoping\u201d. If we didn\u2019t use arrow functions, we would need to bind this <\/em>to the parent, which is normally done in the constructor.<\/p>\n\n\n\n
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props)
this.clickHandler = this.clickHandler.bind(this);
}
clickHandler() {
console.log( this )
}
render() {
return <button onClick={this.clickHandler}>Click Me<\/button>
}
}import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props)
}
clickHandler = () => {
console.log( this )
}
render() {
return <button onClick={this.clickHandler}>Click Me<\/button>
}
}<\/pre>\n\n\n\nThe arrow function use is more readable and recommended.<\/p>\n\n\n\n
4. What are keys in React and why do we need them?<\/h2>\n\n\n\n
In short, keys are used in React for diffing algorithm. With the help of keys React can tell which DOM node was changed and update only that one. They are essential when mapping over arrays .
<ul>
<li>New York<\/li>
<li>London<\/li>
<\/ul><\/code><\/p>\n\n\n\n<ul>
<li>New York<\/li>
<li>London<\/li>
<li>Tbilisi<\/li>
<\/ul><\/code><\/p>\n\n\n\nIn this case, since we are inserting a new element at the end of the array, it will work well, because React just iterates over the list and generates a mutation whenever it finds a difference. Remember, React takes a snapshot before updating, so it looks at the previous list.<\/p>\n\n\n\n
But what happens if we insert a new element at the beginning of the array?
<ul>
<li>New York<\/li>
<li>London<\/li>
<\/ul><\/code><\/p>\n\n\n\n<ul>
<li>Tbilisi<\/li>
<li>New York<\/li>
<li>London<\/li>
<\/ul><\/code><\/p>\n\n\n\nReact will insert the city Tbilisi at the beginning, but it will also mutate every other element because it doesn\u2019t know they are the same.<\/p>\n\n\n\n
That\u2019s where keys come to the rescue. With keys, React can match the original list to the new one, and only update just the necessary element.
This is why using unique IDs is always recommended for keys.<\/p>\n\n\n\n5.Why should you use React instead of real JavaScript frameworks, like for example Angular?<\/h2>\n\n\n\n
Unlike Angular or Vue, React is just a library, which of course has its pros and cons. To focus on the pros:<\/p>\n\n\n\n
React is more lightweight and allows the creation of dynamic applications. Also, since React is basically JS with some JSX, it\u2019s easier to get started with.
Using VDOM, makes web applications perform faster.<\/p>\n\n\n\nReact uses a unidirectional data flow, which means that data flows from top to bottom. This makes debugging errors easier.<\/p>\n\n\n\n
There are many chrome extensions that make working and debugging React applications easier. Here are three of my favorites: Components, Redux and React Context. There are others, but these are the primary ones I use in almost every application.<\/p>\n\n\n\n
Since there is no React without JavaScript, you can definitely expect some JavaScript questions on the interview as well. Here are some of them.<\/p>\n\n\n\n
6. What are the different data types in JavaScript?<\/h2>\n\n\n\n
Primitive data types:<\/strong>
undefined \u2014 typeof \u201cundefined\u201d
Boolean \u2014 typeof \u201cboolean\u201d
Number \u2014 typeof \u201cnumber\u201d
String \u2014 typeof \u201cstring\u201d
BigIng \u2014 typeof \u201cbigint\u201d
Symbol \u2014 typeof \u201csymbol\u201d
null \u2014 typeof \u201cobject\u201d<\/p>\n\n\n\nThere are also non-primitive data types that we should mention like Object, Array, Map, Set.<\/p>\n\n\n\n
7. What\u2019s the difference between var and let?<\/h2>\n\n\n\n
var<\/code> is mostly used in before ES6 was introduced. Main difference between var and let is scoping rules. Variables declared byvar<\/code> keyword are scoped to the immediate function body (hence the function scope) whilelet<\/code> variables are scoped to the immediate enclosing<\/em> block denoted by{ }<\/code> (hence the block scope.<\/p>\n\n\n\nThe reason why
let<\/code> keyword was introduced to the language was function scope is confusing and was one of the main sources of bugs in JavaScript.<\/p>\n\n\n\n8. What\u2019s the difference between \u201c==\u201d and \u201c===\u201d?<\/h2>\n\n\n\n
== compares just the value, where as === compares value and type as well.<\/p>\n\n\n\n
![\"\"\/](\"https:\/\/miro.medium.com\/max\/744\/1*QJaTG0pii7O80VADp19N8A.png\")
<\/figure>\n\n\n\n9. What\u2019s the difference between null<\/strong> and undefined<\/strong>?<\/h2>\n\n\n\n
They both represent empty values, but the difference is that when you define a variable but do not assign anything to it, it becomes undefined automatically, but for null, you have to assign it. One other difference is that, as we discussed in our data types question, typeof undefined is undefined but typeof null is object.<\/p>\n\n\n\n
Going also back to our \u201c==\u201d and \u201c===\u201d answer, we definetly know that since null and undefined are different types, they do not strictly equal each other, but what may surprise you is that they loosely do.<\/p>\n\n\n\n
![\"\"\/](\"https:\/\/miro.medium.com\/max\/666\/1*EUuydR3Cuf9D6XyXh8Em_w.png\")
<\/figure>\n\n\n\n10. What is does asynchronous mean?<\/h2>\n\n\n\n
Normally, a given program\u2019s code runs straight along, with only one thing happening at once. If a function relies on the result of another function, it has to wait for the other function to finish and return, and until that happens, the entire program is essentially stopped from the perspective of the user.<\/p>\n\n\n\n
Asynchronous techniques are very useful, particularly in web programming. When a web app runs in a browser and it executes an intensive chunk of code without returning control to the browser, the browser can appear to be frozen. This is called blocking<\/strong>; the browser is blocked from continuing to handle user input and perform other tasks until the web app returns control of the processor.<\/p>\n\n\n\n
Asynchronous solves this problem by not waiting for other operations to complete. Imagine it like this: You are cooking pasta. You put water on the stove and are waiting for it to start boiling. That doesn\u2019t mean you shouldn\u2019t do anything until that, right? You can start preparing the seasoning, put up the plates, or anything else you might want to do. After the water starts boiling, you get back to it and put the pasta in it. That\u2019s pretty much how asynchronous functions work.<\/p>\n","protected":false},"excerpt":{"rendered":"
Interviews are the direct ways to land a job in more ways than you think. More ways than one you may ask? Yes! Interviews are not only for you to show your skills and what you know, but also a great way to see what you don\u2019t know, what people in the industry are asking … \u041f\u0440\u043e\u0434\u043e\u0432\u0436\u0438\u0442\u0438 \u0447\u0438\u0442\u0430\u043d\u043d\u044f “10 Entry Level React Interview Questions”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[132],"tags":[],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2380"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2380"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2380\/revisions"}],"predecessor-version":[{"id":2381,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2380\/revisions\/2381"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- static getDerivedStateFromProps \u2014
- The real DOM now gets updated.<\/li><\/ol>\n\n\n\n