React Skill Interview Questions

Background

React is a one of the popular tool for building UI components using front-end JavaScript library. React is also known as React.js or ReactJS.

Important reasons, why to read this article?

To check your basic React skill.
To understand the React features along with their use-case and example.
To crack some challenges or interviews of React.

In this article, questions having options. Correct answers are given along with detailed description and code examples. Hence, one can have actual idea about the concept.

Questions

Which is recommended way to handle events in React?
What is state in React?
What does ES6 means?
Which are common ways to handle data in React?
Which is used to pass data to component from outside in React?
What is virtual DOM in React?
What is Babel?
What is purpose of keys in React lists?
Which method is used to initialize state in React component?
What is everything in React?
What is JSX in React?
Which function is called to render HTML to web page in React?
What is default port where webpack server runs?
How to conditionally render components in React?
Which command is used to install create-react-app globally?

Answers

1. Which is recommended way to handle events in React?

A. Inline event handlers
B. Using event listeners with JavaScript
C. Adding event delegation
D. Passing callback functions as props

Correct Answer:

D. Passing callback functions as props

Explanation:

“Passing callback functions as props” is a common and recommended way to handle events, especially when child component needs to communicate with a parent components. This is achieved by passing callback functions as props.

Using it parent component can control state and behavior. Child component can trigger actions without managing logic themselves. It makes clear and predictable data flow from top to down.

JSX

function Parent() {
  const handleClick = () => {
    console.log("Button clicked!");
  };
  return <Child onButtonClick={handleClick} />;
}

function Child({ onButtonClick }) {
  return <button onClick={onButtonClick}>Click me</button>;
}

Why other options are incorrect?

Inline event handlers - It can be used but ti’s not a key architectural pattern.
Using event listeners with JavaScript - React abstracts it and not typically used in React.
Adding event delegation - Delegation is internally handled by React instead of by developers manually.

2. What is state in React?

A. A permanent storage
B. Internal storage of the component
C. External storage of the component
D. None of the above mentioned

Correct Answer:

B. Internal storage of the component

Explanation:

State refers to the data which is managed inside component and can change over time. React automatically re-renders a component when stated changes to reflect the updated data. State is local and internal for the component. It is mutable so it can change. It controls component behaviour and what it can render.

Why other options are incorrect?

A permanent storage - State is not permanent and it exists only during component is mounted.
External storage of the component - External data is usually handled using props, context, or external stores such as Redux.
None of the above mentioned - One option is correct.

3. What does ES6 means?

A. ECMAScript 6
B. ECMA 6
C. ECMAJavaScript 6
D. EJavaScript 6

Correct Answer:

A. ECMAScript 6

Explanation:

ES6 means ECMAScript 6 and also known as ES2015. It is 6th major version of ECMAScript standards. This specifications defines how JavaScript works.

let and const, arrow functions (=>) development, classes feature, template literals implementation, destructuring feature, and modules implementation, etc. are key features of ES6.

Why other options are incorrect?

ECMA 6 - It is incomplete because it doesn’t include “Script”.
ECMAJavaScript 6 - It is not a valid term.
EJavaScript 6 - It is incorrect naming.

4. Which are common ways to handle data in React?

A. State & Props
B. Services & Components
C. State & Services
D. State & Component

Correct Answer:

A. State & Props

Explanation:

In React, data is mainly handled using State and Props.

State:

It is managed inside the component.
It is used for data which can change over time.
The component re-renders when the state changes.

Props:

It is short form of Properties.
It is passed from a parent to a child components.
It is used to send data and functions between components.
It is read-only and can’t be modified by a receiving component.

JSX

function Child(props) {
  return <h1>{props.message}</h1>;
}

function Parent() {
  const message = "Hello React!";
  return <Child message={message} />;
}

Why other options are incorrect?

Services & Components - Not how part of data handling.
State & Services - Services are external and not core data handling.
State & Component - Components are structures instead of data handlers.

5. Which is used to pass data to component from outside in React?

A. setState
B. render with arguments
C. props
D. PropTypes

Correct Answer:

C. props

Explanation:

props is short form of properties. It is used to pass data to a component from outside, generally from parent component to child component. It is read-only. It allow components to be reusable. It enables one-way data flow such as from parent to child.

JSX

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return <Greeting name="React" />;
}

Why other options are incorrect?

setState - It is used to update the state inside a component.
render with arguments - Using is components don’t receive data.
PropTypes - It is used for type-checking of props instead of passing data.

6. What is virtual DOM in React?

A. A DOM element with the virtual attribute
B. A representation of the UI kept in memory
C. The Document Object Model of a virtualized list
D. A term for when the DOM is hidden from view

Correct Answer:

B. A representation of the UI kept in memory

Explanation:

The Virtual DOM is a lightweight and in-memory representation of real DOM. It is used efficiently to determine what changes need to be made to the actual DOM. React updates Virtual DOM while state or props change. It compares new Virtual DOM with previous one (that process is called diffing). Only necessary changes are applied to real DOM which improves performance.

Why other options are incorrect?

A DOM element with the virtual attribute - Such attribute doesn’t exist.
The Document Object Model of a virtualized list - It is different concept.
A term for when the DOM is hidden from view - It is not related to React.

7. What is Babel?

A. A Transpiler
B. An Interpreter
C. A Compiler
D. None of the above

Correct Answer:

A. A Transpiler

Explanation:

Babel is a JavaScript transpiler. It converts or transpiles the modern JavaScript (i.e. ES6+) code into backward-compatible JavaScript. Hence, it can run into the older environments such as legacy browsers.

JSX

const add = (a, b) => a + b;

Above babel transform into something like below:

JSX

var add = function (a, b) {
  return a + b;
};

Why other options are incorrect?

An Interpreter - Interpreter executes code line by line. Babel does not execute code line by line.
A Compiler - A compiler usually converts code to machine-level or bytecode. Babel converts JavaScript to JavaScript.
None of the above - One option is correct.

8. What is purpose of keys in React lists?

A. To add a unique style to each item
B. To specify which item is selected
C. To encrypt list data
D. To improve performance by helping React identify which items have changed

Correct Answer:

D. To improve performance by helping React identify which items have changed

Explanation:

keys are special attributes used during rendering lists. It mainly helps React to efficiently update and re-render components by identifying which list item has been added, removed, or changed.

Using key React compares previous and new versions of a list effectively. Key helps in match elements correctly between renders and avoids unnecessary re-renders to improve overall performance.

JSX

const items = ["Apple", "Banana", "Cherry"];

const list = items.map((item, index) => (
  <li key={index}>{item}</li>
));

``

Here, each list item has a unique key to help React for tracking it across renders.

Why other options are incorrect?

To add a unique style to each item - Styling is unrelated to keys.
To specify which item is selected - Selection is handled via state/props.
To encrypt list data - Keys have nothing to do with security.

9. Which method is used to initialize state in React component?

A. this.state()
B. useState()
C. initState()
D. constructor()

Correct Answer:

D. constructor()

Explanation:

In class-based components state is initialized inside constructor() method. It is a traditional way of setting up state before component mounts.

useState() would be the correct answer, if question is only about functional components.

JSX - Class Component

class MyComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return <div>{this.state.count}</div>;
  }

}

Why other options are incorrect?

this.state() - It is an object instead of a function.
useState() - It is used to initialize state in functional components and not in class components.
initState() - No such method exists in React.

10. What is everything in React?

A. Module
B. Component
C. Package
D. Class

Correct Answer:

B. Component

Explanation:

Everything in React is a component. Whole user interface is built by combining small reusable components. Component represents a part of the UI. It can be functional or class-based. It can accept props and can manage state. It encourages re-usability. It provides modular design.

JSX

function Welcome() {
  return <h1>Hello, React!</h1>;
}

Here, Welcome is a component. In React, whole app itself is a component.

Why other options are incorrect?

Module - JavaScript files can be a module. But, React itself is component-based.
Package - React is a package. But, not everything inside it.
Class - In React, all components are not classes because many components are functions.

11. What is JSX in React?

A. A JavaScript-based XML language
B. A syntax extension for JavaScript
C. A type of JavaScript function
D. A cross-platform, object-oriented programming language used by developers to make web pages interactive

Correct Answer:

B. A syntax extension for JavaScript

Explanation:

JSX stands for JavaScript XML. It is a syntax extension for JavaScript. Using it developers can write HTML like code directly inside JavaScript, which React then transforms into regular JavaScript function calls. It makes React code easier to read and more expressive with closer to how UI is structured visually.

JSX

const element = <h1>Hello, world!</h1>;

Above JSX code is compiled by tools like below Babel:

JavaScript

React.createElement("h1", null, "Hello, world!");

Why other options are incorrect?

A JavaScript-based XML language - JSX looks like XML. But, it is not a standalone language.
A type of JavaScript function - JSX is syntax instead of a function.
A cross-platform, object-oriented programming language used by developers to make web pages interactive - This describes JavaScript itself instead of JSX.

12. Which function is called to render HTML to web page in React?

A. render()
B. returns()
C. ReactDOM_render()
D. None of the above

Correct Answer:

C. ReactDOM_render()

Explanation:

In React, ReactDOM.render() function is used to render or mount component to actual web page i.e. DOM.

It takes two parameters. React element or component and DOM container where it should be rendered.

JSX

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Here, function it connects React to real browser DOM and making UI appear on webpage.

Why other options are incorrect?

render() - This method is inside class component which which returns JSX. But, it does not render directly to webpage.
returns() - It is not a valid React function.
None of the above - One option is correct.

13. What is default port where webpack server runs?

A. 3000
B. 6060
C. 3030
D. 8080

Correct Answer:

D. 8080

Explanation:

webpack-dev-server also known as webpack server runs on port 8080 by default. Different port can be explicitly configured in webpack configuration file or via command line to change 8080 default port.

Shell

npx webpack serve

Above command typically starts development server at 8080:

http://localhost:8080

Why other options are incorrect?

3000 - It is common for create-react-app instead of webpack-dev-server.
6060 - it is not used by webpack-dev-server.
3030 - It is not a standard default port.

14. How to conditionally render components in React?

A. Using the switch statement
B. Using the if statement
C. Using the ternary conditional operator condition ? true : false
D. Using the for loop

Correct Answer:

C. Using the ternary conditional operator condition ? true : false

Explanation:

Conditional rendering means showing or hiding components based on a condition. JSX is an expression-based syntax. Ternary conditional operator is most commonly used and it appropriate option for conditional rendering inside JSX in React. It works cleanly inside JSX. It is widely used in real-world React applications.

JSX

function Greeting({ isLoggedIn }) {
  return (
    <div>
                     {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in</h1>}
              </div>
  );
}

Why other options are incorrect?

Using the switch statement - It is not used directly inside JSX for rendering.
Using the if statement - It can’t be written directly inside JSX.
Using the for loop - It is used for iteration or map() instead of conditional rendering.

15. Which command is used to install create-react-app globally?

A. npm install -g create-react-app
B. npm install create-react-app
C. npm install -f create-react-app
D. install -g create-react-app

Correct Answer:

A. npm install -g create-react-app

Explanation:

“npm install -g create-react-app” command is used to install “create-react-app” globally via npm.

Shell

npm install -g create-react-app

Here, npm install will install a package and -g will install it globally.

Why other options are incorrect?

npm install create-react-app - Installs it locally in the current project, not globally.
npm install -f create-react-app - -f is not a valid flag for global installation.
install -g create-react-app - Missing npm, so it’s an invalid command.

Summary

Here, for each and every question; questions are given with multiple option and then correct answer is mentioned. Explanation is described with theory concept as well as code example. Lastly, also mentioned why the other options are in-correct or in-appropriate.

Now, I believe one will be able to properly answer or understand the most popular React Skill interview questions. These questions will be useful to both beginner or intermediate React developers.