30
loading...
My Top React Interview Questions
This article summarizes a list of React interview questions that I would ask candidates and that I get often asked in interviews.
It’s the V in the MVC (Model - View -Controller), so it is rather an open-source UI library than a framework.
JSX (JavaScript XML) allows us to write HTML inside JavaScript. The official docs describe it as “syntax extension to JavaScript”.
React recommends using JSX, but it is also possible to create applications without using JSX at all.
A simple JSX example:
const element = <h1>Hello, world!</h1>;- Integrating the methods mentioned above.
- Using Redux.
- Utilizing React’s Context API.
So let’s take a look at the differences:
Functional components are JavaScript functions and therefore can be declared using an arrow function or the
function keyword. Props are simply function arguments and can be directly used inside JSX:const Card = (props) => {
return(
<h2>Title: {props.title}</h2>
)
}
function Card(props){
return(
<h2>Title: {props.title}</h2>
)
}Class components are declared using the ES6
class keyword. Props need to be accessed using the this keyword:class Card extends React.Component{
constructor(props){
super(props);
}
render(){
return(
<h2>Title: {this.props.title}</h2>
)
}
}In functional components we need to use the
useState hook to be able to handle state:const Counter = (props) => {
const [counter, setCounter] = useState(0);
const increment = () => {
setCounter(++counter);
}
return (
<div>
<p>Count: {counter}</p>
<button onClick={increment}>Increment Counter</button>
</div>
)
}It’s not possible to use React Hooks inside class components, therefore state handling is done differently in a class component:
class Counter extends React.Component {
constructor(props){
super(props);
this.state = {counter : 0};
this.increment = this.increment.bind(this);
}
increment {
this.setState((prevState) => {
return {counter: prevState.counter++};
});
}
render() {
return (
<div>
<p>Count: {this.state.counter}</p>
<button onClick={this.increment}>Increment Counter</button>
</div>
)
}
}The Virtual DOM (VDOM) is a lightweight JavaScript object and it contains a copy of the real DOM.
| Real DOM | Virtual DOM |
|---|---|
| Slow & expensive DOM manipulation | Fast & inexpensive DOM manipulation |
| Allows direct updates from HTML | It cannot be used to update HTML directly |
| Wastes too much memory | Less memory consumption |
No, they are different.
The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components.
The virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs.
Fiber is the new reconciliation engine in React 16.
Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames.
Both props and state are plain JavaScript objects.
Props (short for “properties”) is an object of arbitrary inputs that are passed to a component by its parent component.
State are variables that are initialized and managed by the component and change over the lifetime of a specific instance of this component.
The value of an input element in a controlled React component is controlled by React.
The value of an input element in an uncontrolled React component is controlled by the DOM.
React class components provide these lifecycle methods:
componentDidMount(): Runs after the component output has been rendered to the DOM.componentDidUpdate(): Runs immediately after updating occurs.componentWillUnmount(): Runs after the component is unmounted from the DOM and is used to clear up the memory space.There exist some other rarely used and legacy lifecycle methods.
Hooks are used in functional components instead of the above-mentioned lifecycle methods. The Effect Hook
useEffect adds, for example, the ability to perform side effects and provides the same functionality as componentDidMount, componentDidUpdate, and componentWillUnmount.React.Component but it provides in some cases a performance boost if its render() function renders the same result given the same props and state.React needs keys to be able to identify which elements were changed, added, or removed. Each item in an array needs to have a key that provides a stable identity.
It’s not recommended to use indexes for keys if the order of items may change as it can have a negative impact on the performance and may cause state issues. React will use indexes as keys if you do not assign an explicit key to list items.
Check out Robin Pokorny’s article for an in-depth explanation of the negative impacts of using an index as a key. Here is another in-depth explanation about why keys are necessary if you’re interested in learning more.
A higher-order component (HOC) is a function that takes a component and returns a new component.
They are an advanced technique in React for reusing component logic and they are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature:
const EnhancedComponent = higherOrderComponent(WrappedComponent);Whereas a component transforms props into UI, a higher-order component transforms a component into another component.
React 16 introduced a new concept of an “error boundary”.
Hooks solve a wide variety of seemingly unconnected problems in React that were encountered by Facebook over five years of writing and maintaining tens of thousands of components:
this keyword inside class components.The Effect hook lets us perform side effects in functional components. It helps us to avoid redundant code in different lifecycle methods of a class component. It helps to group related code.
A Ref is a special attribute that can be attached to any component. It can be an object created by
React.createRef(), a callback function or a string (in legacy API).To get direct access to a DOM element or component instance you can use ref attribute as a callback function. The function receives the underlying DOM element or class instance (depending on the type of element) as its argument.
In most cases, refs should be used sparingly.
I hope this list of React interview questions will help you to get your next React position. Leave me a comment if you know any other important React interview questions.
If you liked this article, follow me on Twitter to get notified about new blog posts and more content from me.
If you are looking for more interview questions you should take a look at this list of top 500 React interview questions & answers.
30