DEV Community

Mohammad Faisal
Mohammad Faisal

Posted on • Edited on • Originally published at mdfaisal.com

16 React Interview Questions

To read more articles like this, visit my blog

Answering a conceptual question in an interview doesn’t mean you will be better than others on the job, but it surely means you have the time and interest to understand the deep concepts in a framework.

One’s understanding of documentation separates a good developer from a great developer.

Today, we will look into some of these conceptual questions that you may want to know as a React developer. If you are looking for simple syntax-related questions, then this article is not for you!

Let’s get started!

1. What is Render Hijacking in React?

As Mr. Google says, Render Hijacking is

“The concept of render hijacking is the ability to control what a component will output from another component”.

Practically you wrap your component with another Higher-Order-Component (HOC). And then, you inject props according to your need that can cause a change in the rendering logic.

Basically, what you are doing is enabling the component to behave differently.

2. What will happen if you use setState() in the constructor?

When you use setState() React re-renders the whole component once again. So if you call setState() inside a constructor, React tries to re-render the component that does not exist, creating a recursive problem.

You would get errors like this:

Can only update a mounted or mounting component.
Enter fullscreen mode Exit fullscreen mode

So we need to use this.state to initialize variables inside the constructor. Like the following

constructor(props) {
    this.state = {
        // anything that you want inside state
    }
}
Enter fullscreen mode Exit fullscreen mode

3. What are synthetic events in React?

Events are any browsers essentially parts. Like onclick , onscroll Etc. But as React works with a virtual dom, we need to have a wrapper that works consistently across different browsers.

React normalizes events so that they have consistent properties across different browsers. — React Documentation

So, in summary, synthetic events are a cross-browser wrapper for different events. Important to note: they are not mapped one-to-one with browsers native events.

4. What are portals in React?

If you want to render some child component into a DOM node outside the component tree hierarchy, then React Portal is the way to go.

The syntax for this is

ReactDOM.createPortal(child, container)
Enter fullscreen mode Exit fullscreen mode

The first argument is any render-able React child, such as an element, string, or fragment. The second argument is a DOM element.

5. What is reconciliation?

When a component’s props or state change, We need to re-render the component. Whether the actual DOM will be updated or not depends on the difference between these two nodes (previous and current).

But to compare 2 nodes, we will need an O(n³) complexity which is not practical in real-life scenarios. That’s why React team has decided to use a heuristic approach.

And the name of this process is called reconciliation. If you are interested, refer to the documentation.

6. Why does React uses className over the class?

class Is a keyword in JavaScript, and JSX is an extension of JavaScript. That’s the principal reason why React uses className instead of class.


render() {   
  return <span className={'menunavigation-menu'}>{'Menu'}</span>
}
Enter fullscreen mode Exit fullscreen mode

Pass a string as the className prop.

7. What is React Fiber?

Fiber is the new reimplementation of the core algorithm in React v16. We already talked about reconciliation, and the new implementation is called React Fiber.

Here is great documentation for you to follow if you are interested in understanding the core concepts.

8. What is the Goal of React Fiber?

The goal of React Fiber is to increase its suitability for areas like animation, layout, and gestures. Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames.

9. What are uncontrolled components?

The normal way to store state in a react component is useState or this.state . But one problem is that they are tied to the rendering process. As a result, in some cases, you face some difficulty.

If you store the state of a component using, ref then that component is called an uncontrolled component. it’s more like traditional HTML

In the below UserProfile component, the name input is accessed using ref.

class UserProfile extends React.Component {
    constructor(props) {
        super(props)
        this.handleSubmit = this.handleSubmit.bind(this)
        this.input = React.createRef()
    }
    handleSubmit(event) {
        alert('A name was submitted:' + this.input.current.value)
        event.preventDefault()
    }
    render() {
        return <div></div>
    }
}
Enter fullscreen mode Exit fullscreen mode

10. Why are fragments better than container divs?

Below is the list of reasons,

  1. Fragments are a bit faster and use less memory by not creating an extra DOM node. This only has a real benefit on huge and deep trees.

  2. Some CSS mechanisms like Flexbox and CSS Grid have a special parent-child relationship, and adding divs in the middle makes it hard to keep the desired layout.

  3. The DOM Inspector is less cluttered.

11. What are the limitations of React?

Apart from the advantages, there are few limitations of React too,

  1. React is just a view library, not a full framework.

  2. There is a learning curve for beginners who are new to web development.

  3. Integrating React into a traditional MVC framework requires some additional configuration.

  4. The code complexity increases with inline templating and JSX.

  5. Too many smaller components leading to over-engineering or boiler-plate.

12. How to create props proxy for HOC component?

You can add/edit props passed to the component using a props proxy pattern like this:

function HOC(WrappedComponent) {
    return class Test extends React.Component {
        render() {
            const newProps = { title: 'New Header', footer: false, showFeatureX: false, showFeatureY: true }
            return <WrappedComponent {...this.props} {...newProps} />
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

13. What happens if you use props in the initial state?

The constructor function never updates the current state of the component. It’s called only once before the component is mounted.

So let’s say we are using props to initialize the state of a component.

function SomeComponent(props){

    const [count , setCount]= useState(props.count);
}
Enter fullscreen mode Exit fullscreen mode

Now if the props.count changes from the parent, then the child will never be updated because the useState was called only once. So it’s not a good idea to pass props to initialize state.

14. Do Hooks replace render props and higher-order components?

Both render props and higher-order components render only a single child, but in most cases, Hooks are a simpler way to serve this by reducing nesting in your tree.

15. Can you force a component to re-render without calling setState?

Whenever your component's state or props change, the component will re-render. But if, for some reason, we have to force a component to re-render, then what we can call the foreUpdate() function.

component.forceUpdate(callback)
Enter fullscreen mode Exit fullscreen mode

16. Why you can’t update props in React?

The React philosophy is that props should be immutable and top-down. This means that a parent can send any prop values to a child but can’t modify received props.

That’s it. Maybe you knew some of them or maybe you didn’t. I think (and hope) you have learned a thing or two from this article.

Have a great day!

Resources:

Have something to say? Get in touch with me via LinkedIn or Personal Website

Top comments (5)

Collapse
 
arafatweb profile image
Arafat Hossain Ar

Useful! Some of the questions are new to me.
Thanks.

Collapse
 
mohammadfaisal profile image
Mohammad Faisal

Welcome!

Collapse
 
yogini16 profile image
yogini16

Thank you for sharing this.
Along with set of interview questions, a hands on on any tech for important concepts is really helpful

Collapse
 
mohammadfaisal profile image
Mohammad Faisal

You're welcome!

Collapse
 
ghamadi profile image
Ghaleb

Great post, but there are a few inaccurate statements that I feel the need to correct.

If you want to render some child component into a DOM node outside the component tree hierarchy

The DOM node does not have to be outside the component tree hierarchy. It can be any DOM element, whether rendered by the component tree or not.

If you store the state of a component using, ref then that component is called an uncontrolled component. it’s more like traditional HTML.

Uncontrolled components are simply the opposite of controlled components—they manage their state internally. It has nothing to do with relying on useState vs relying on useRef. In fact, useState inside an uncontrolled component is completely valid. ref only plays a role here in how the current state can be accessed (read) from by the parent component.

You can confirm this in the docs here.

Why are fragments better than container divs?

I would challenge an interviewer asking me such a question. They are not better or worse; they behave completely differently depending on the situation. In many cases you need the wrapper div, and in other cases the div breaks behavior. Only in the cases where the wrapper is redundant would a fragment be "better" to reduce the number of DOM elements.

Now if the props.count changes from the parent, then the child will never be updated because the useState was called only once.

This is not accurate. useState will be called on every render. There's no magic to skip one line of code or another in a functional component. It's just that the useState will only use the argument passed the first time it's called because during the first time, the variable holding the state in the useState's closure is still undefined.

So it’s not a good idea to pass props to initialize state.

This is not accurate either. If your component is supposed to react when the value passed as a prop changes, then it seems like a use-case for a controlled component, and you shouldn't be initializing internal state to copy that value.

If you want to take a default value, and then manage the state internally afterwards, then you don't expect the default value to change during the component's lifecycle.