Question
What is virtual DOM? How virtual DOM boosts React performance?
Solution
Like the actual DOM, the virtual DOM is a node tree that lists elements, their attributes and content as objects and properties. render()
method in ReactDOM creates a node tree from React components and updates this tree in response to mutations in the data model caused by actions.
Whenever anything is changed, the entire UI is first re-rendered in virtual DOM representation. The difference between earlier virtual DOM representation and current one is calculated. The real DOM is updated with what has actually changed. Updating virtual DOM is very fast compared to real browser re-render. Hence performance is improved.
Question
In a React project, we add reference to 2 files. One is react.js and other one is react-dom.js. Why we have two include 2 files, instead of one?
Solution
React component library is used in websites and also to create mobile apps using React Native. React.js file is a small file which does the job of creating components. Therefore it is used in both web and React-Native projects. In web, the components are then rendered in browser using react-dom.js. So the 2 files are separated for reusability.
Question
We have a JSX code snippet below.
const content = (
<div>
<h1>Backbencher</h1>
</div>
);
Write the pure JavaScript code after JSX is converted to JavaScript.
Solution
const content = React.createElement(
"div",
{},
React.createElement("h1", {}, "Backbencher")
);
Question
Explain the parameters of React.createElement()
method.
Solution
React.createElement()
accepts three arguments.
createElement(tag, attributes, children);
The fist parameter is tag or component to be rendered. Second parameter accepts an object. The key value pair of the object forms the attribute list of the tag. Third parameter can be a string or other component to be nested inside current tag or component. Here is an example.
React.createElement("div", { id: "hello" }, "Backbencher");
turns out to be
<div id="hello">Backbencher</div>
Question
What is JSX? What is the advantage of using it?
Solution
JSX is a syntax extension for JavaScript. It is created to write React components easily. Without JSX, it is very difficult to write big React components in pure JavaScript.
Question
Write an example of React functional component.
Solution
In React, functional component is a JavaScript function that returns a React element.
function Banner() {
return <h1>Backbencher</h1>;
}
Question
What are props
in a component?
Solution
When React sees an element representing a user-defined component, it passes JSX attributes and children to this component as a single object. That object, we address as props
.
Question
What is a pure function?
Solution
A pure function does not alter its input. It always return the same value for the same input. In React, a component needs to be a pure function with respect to its props. That means for a particular props, the rendered component will always be same.
Question
We have a function component here.
function Banner(props) {
return <h1>{props.name}</h1>;
}
Convert above code to class component.
Solution
class Banner extends React.Component {
render() {
return <h1>{this.props.name}</h1>;
}
}
Question
Here we have a class component.
class Banner extends React.Component {
state = {
text: "",
};
incrementCount = () => {
this.state.text = "Backbencher";
};
render() {
return (
<div>
<button onClick={this.incrementCount}>Click</button>
<h1>{this.state.text}</h1>
</div>
);
}
}
Here when the button is clicked, it should display "Backbencher" text. But that is not happening. What is the cause?
Solution
Here state
is updated in wrong way. state
value needs to be updated using this.setState()
. Only then the UI will be re-rendered.
The incrementCount
needs to be updated as
incrementCount = () => {
this.setState({
text: "Backbencher",
});
};
Question
Is setState()
method synchronous or asynchronous?
Solution
setState()
method is asynchronous.
Question
Following code is giving unexpected result.
this.setState({
counter: this.state.counter + this.props.increment,
});
What could be the reason? How can we fix it?
Solution
Since setState()
is asynchronous, setting new state based on previous state can go wrong sometimes. In such scenarios, we can use callback function syntax to set state.
this.setState((prevState, props) => {
return {
counter: prevState.counter + props.increment,
};
});
Question
In a class component, we have set initial state as:
state = {
name: "Backbencher",
age: 23,
};
We then update the state with following code:
this.setState({
age: 24,
});
What will be the current value of state object?
Solution
States are merged in class components. So the state value will be:
{
name: "Backbencher",
age: 24
}
Question
Here we have a class component:
class Banner extends React.Component {
state = {
country: "India",
};
constructor(props) {
super(props);
}
logMessage() {
console.log(this.state.country);
}
render() {
return (
<div>
<button onClick={this.logMessage}>Click</button>
</div>
);
}
}
When the button is clicked, it is showing an error message instead of displaying India.
Uncaught TypeError: Cannot read property 'state' of undefined
What is the reason and how we can solve it?
Solution
Here logMessage
function is called when the button is clicked. Since the function is not an arrow function, the value of this
inside the function is undefined
. We are trying to extract the value of state
from undefined
. That results in TypeError.
We can solve this by explicitly binding logMessage
to the component class using bind
method.
constructor(props) {
super(props);
this.logMessage = this.logMessage.bind(this);
}
We can also change logMessage
to an arrow function to solve this issue.
logMessage = () => {
console.log(this.state.country);
};
Question
How can we conditionally render JSX in React?
Solution
One technique is to use if
operator. We cannot use if...else
inside JSX. But we can dynamically return React elements based on a condition.
if (isLoggedIn) {
return <Member />;
} else {
return <Guest />;
}
Another technique is to use logical operators to implement inline if
.
<div>{count > 10 && <ShowCount />}</div>
We can implement inline if...else
using JavaScript ternary operator.
{
isLoggedIn ? <Member /> : <Guest />;
}
Question
If a component need not render anything, what can we do?
Solution
render()
method or the functional component can return null
.
Question
Why we provide a key
attribute to list of items?
Solution
Keys help React to understand which items are changed, added or removed.
Question
What is a controlled component in React?
Solution
In a controlled component, the value of an input form element is controlled by React.