Renato Pozzi's Blog

Renato Pozzi's Blog

A Piece of React Interview Questions That You May Not Know

A Piece of React Interview Questions That You May Not Know

Subscribe to my newsletter and never miss my upcoming articles

Are you looking for a new job as a React Developer and you don't feel sure you can make a good impression during the interview? Here are some questions that may help you!

What is Virtual DOM and how is it works?

The Virtual DOM (VDOM) is an in-memory representation of Real DOM. The representation of a UI is kept in memory and synced with the "real" DOM. It's a step that happens between the render function being called and the displaying of elements on the screen. This entire process is called reconciliation.

The VDOM works in three steps:

  • Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.
  • Then the difference between the previous DOM representation and the new one is calculated.
  • Once the calculations are done, the real DOM will be updated with only the things that have actually changed.

What is Lifting State Up in React?

When several components need to share the same changing data then it is recommended to lift the shared state up to their closest common ancestor. That means if two child components share the same data from its parent, then move the state to parent instead of maintaining local state in both of the child components.

What is a HOC (Higher Order Component)

A HOC is a component that takes a component as a parameter and returns another component, the HOC use cases are:

  • Abstract or manipulate the component state.
  • Do some render hijacking.
  • Manipulate the props.
  • Code reusing or logic abstraction.

Here is an example of a HOC:

import React from 'react';

// Take in a component as argument WrappedComponent
const higherOrderComponent = (WrappedComponent) => {
// And return another component
  class HOC extends React.Component {
    render() {
      return <WrappedComponent />;
    }
  }
  return HOC;
};

What is Reconciliation?

When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This is the process of reconciliation.

How events are different in React?

Handling events in React elements has some syntactic differences:

  • React event handlers are named using camelCase, rather than lowercase.
  • With JSX you pass a function as the event handler, rather than a string.
// Vanilla
<button onclick="handleClick()">Click Me</button>

// React
<button onClick={handleClick}>Click Me in React</button>

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 the child can't modify received props.

Is it possible to use React without rendering HTML?

Yes, since the 16.2 version is possible, you have multiple choices to do this, here are some examples of what you can return:

false, null, [], <Fragment></Fragment>, </>

Differences between React and ReactDOM?

The react package contains React.createElement(), React.Component, React.Children, and other helpers related to elements and component classes. You can think of these as the isomorphic or universal helpers that you need to build components. The react-dom package contains ReactDOM.render(), and in react-dom/server we have server-side rendering support with ReactDOMServer.renderToString() and ReactDOMServer.renderToStaticMarkup().

Are custom DOM attributes supported in React?

Well, since React 16, there is support for custom DOM attributes, every custom attribute will end up to the DOM.

How data flow works in React?

React implements one-way reactive data flow using props which reduce boilerplate and is easier to understand than traditional two-way data binding.

What is JSX?

JSX is a XML-like syntax extension to ECMAScript (the acronym stands for JavaScript XML). Basically it just provides syntactic sugar for the React.createElement() function, giving us expressiveness of JavaScript along with HTML like template syntax.

What is the benefit of the key prop in loops?

A key is a special string attribute you should include when creating arrays of elements. Key prop helps React identify which items have changed, are added, or are removed.

Wrapping up

These are only a little piece of the whole React world, but if you have been some trouble answering these questions, don't give up! Keep Going with study and exercises and you will find your way!

Good Luck!

Let's Connect!: Twitter | Linkedin

 
Share this