React Fundamental Interview Questions

12. How to update state of functional component in React?

• A. By calling this.setState()

• B. By directly modifying state object

• C. By using useState() hook

• D. By passing props from a parent component

Correct Answer:

• C. By using useState() hook

Explanation:

State of a functional component in React is updated using useState() hook. It provides current state value. It also provides a function to update the state value.

JSX

import { useState } from "react";

function Counter() {
     const [count, setCount] = useState(0);
     return (
          <>
                                        <p>Count: {count}</p>
                                        <button onClick={() => setCount(count + 1)}>Increment</button>
                                   </>
     );
}

Here, count is a state variable and setCount is used to update state value. State updating triggers re-render.

Why other options are incorrect?

• By calling this.setState() - It is used in class components only instead of functional components.

• By directly modifying state object - Direct state modification is not allowed in React.

• By passing props from a parent component - Props is read-only. It can’t be used to update component state.

13. Which is NOT valid way to define inline styles in React?

• A. <div style={{ color: 'red' }}>

• B. <div style="color: red">

• C. <div style={styles}>

• D. <div className="red">

Correct Answer:

• B. <div style="color: red">

Explanation:

In React, inline styles must be provided as JavaScript object instead of string such as plain HTML.

JSX

<div style="color: red"></div>

Here, This is invalid in JSX although valid in HTML. In React, style attribute must be object instead of string. Styles written as string might cause error or ignored.

Why other options are correct?

Following all are valid way to define inline styles in React:

• Inline style using object i.e. <div style={{ color: 'red' }}>

• Inline style using variable i.e. <div style={styles}> and before that store style into variable such as const styles = { color: 'red' };

• CSS class is not inline but valid React syntax i.e. <div className="red"> and this method allows to use external or modular CSS.

14. Which is correct way to render list of items in React?

• A. Using loop in JSX

• B. Using forEach() method

• C. Using for loop

• D. Using map() method

Correct Answer:

• D. Using map() method

Explanation:

“Using the map() method” is a correct and recommended way to render a list of items in React. map() is JavaScript’s method which returns JSX elements. map() iterates over array and returns new array of JSX elements. It perfectly fits to render lists in React.

JSX

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

function List() {
     return (
          <ul>
                                        {items.map((item, index) => (
                                             <li key={index}>{item}</li>
                                        ))}
                                   </ul>
     );
}

Here, map() transforms each array item into <li> element. Key is given to each list item so that React can effectively track list changes.

Why other options are incorrect?

• Using loop in JSX - JSX does not support traditional loops (such as for or while) directly inside markup.

• Using forEach() method - forEach() doesn’t return new array but it returns undefined. Hence, it can’t be used directly in JSX.

• Using for loop - for loop doesn’t return array of elements while React requires array of elements for rendering lists.

15. Which is correct way to render React component?

• A. {MyComponent}

• B. render(MyComponent)

• C. <MyComponent />

• D. React.render(MyComponent)

Correct Answer:

• C. <MyComponent />

Explanation:

React components are rendered using JSX syntax similar to HTML. Using self-closing tag and opening-closing tags if component has children are two valid ways to render a React component.

JSX

<MyComponent />

Here, it instantiate to MyComponent. For function component it is called and for class component it invokes render() method. It inserts resulting UI inside JSX tree.

Why other options are incorrect?

• {MyComponent} - It can’t render component. It only references component definition.

• render(MyComponent) - This is not valid React API.

• React.render(MyComponent) - React.render does not exist. ReactDOM can handled rendering instead of React.

16. Which command is used to create new React app?

• A. create-react-app

• B. npm init react-app

• C. start-react-app

• D. react-init

Correct Answer:

• A. create-react-app

Explanation:

Create React App is a tool which is provided by React team. It is used to create a new React app quickly. It also makes default configurations such as Babel, Webpack, ESLint, etc.

Shell

npx create-react-app my-app

Here, It sets up complete React development environment. It doesn’t require any manual configuration. It allows to start coding immediately.

Why other options are incorrect?

• npm init react-app - It is not valid command.

• start-react-app - It doesn’t exist.

• react-init - It is not a React CLI tool.

17. What is use of React.createElement() function?

• A. Creates new React component

• B. Renders React component to the DOM

• C. Creates new DOM element

• D. None of the above

Correct Answer:

• D. None of the above

Explanation:

React.createElement() is low-level React API. It creates React element i.e. plain JavaScript object that describes what should appear in UI. It do none of the above action directly. Virtual DOM is not the real DOM.

React.createElement() actually creates a React Element. It doesn’t create component or DOM node. This created element is used later on during reconciliation and rendering process.

Syntax

React.createElement(
type,
props,
children
);

Example

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

It produces object similar to:

JavaScript

{
     type: "h1",
     props: { children: "Hello React" }
}

Why other options are incorrect?

• Creates new React component - Component is created or defined using function or class instead of createElement().

• Renders React component to the DOM - ReactDOM.createRoot(...).render(...) is used to render a React component to DOM.

• Creates new DOM element - React’s renderer (ReactDOM) is used to create a new DOM element instead of createElement().

18. How to conditionally render elements in React?

• A. Using if statements

• B. Using ternary operators

• C. Using logical && operator

• D. All of the above

Correct Answer:

• D. All of the above

Explanation:

In React, elements can be conditionally render elements in following ways based on situation:

• Using if statements - primarily used for complex logic.

• Using ternary operators - mainly used for inline conditions.

• Using logical && operator - commonly used to render only on true condition.

Why other options are correct?

• Using if statements - It is used outside JSX and before return. It is useful for complex logic. It can’t be used directly inside JSX.

JSX

function Greeting({ isLoggedIn }) {
     if (isLoggedIn) {
          return <h1>Welcome back!</h1>;
     }
     return <h1>Please sign in.</h1>;
}

• Using ternary operators - It is mainly used for inline conditional rendering. It is brief and more readable. It is mostly used in JSX.

JSX

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

• Using the logical && operator - It is used to render something only if condition is true. Mainly used during simple conditional display. 0 is considered as false, so use it carefully.

JSX

function Notifications({ hasMessages }) {
     return (
          <>
                                                  {hasMessages && <p>You have new messages</p>}
                                    </>
     );
}

19. Which is NOT valid way to define React component?

• A. Class component

• B. Function component

• C. Object component

• D. Stateless component

Correct Answer:

• C. Object component

Explanation:

Class component, Function component and Stateless component are valid ways to define React component.

Object component is not a valid way to define React component. There is no such concept in React. It is not valid React component nor supported by React. React component must be either functional or class instead of plain object.

Why other options are correct?

• Class component - It uses ES6 classes and extends React.Component. It is older but still supported. It uses React.Component.

JSX

class MyComponent extends React.Component {
     render() {
          return <h1>Hello</h1>;
     }
}

• Function component - It uses plain JavaScript function. It is recommended, modern and preferred way to define component.

JSX

function MyComponent() {
     return <h1>Hello</h1>;
}

• Stateless component - It is not different type. It is used to describe function components which do not manage state. It is conceptual term for function components. It is used for simple function components.

JSX

const MyComponent = () => <h1>Hello</h1>;

20. What is purpose of keys in React lists?

• A. They control the styling of list items

• B. They determine the order in which list items are rendered

• C. They provide a unique identifier for each list item

• D. They are used to specify the data type of list items

Correct Answer:

• C. They provide a unique identifier for each list item

Explanation:

Keys are used in React lists to uniquely identify elements in list. Using it React can efficiently update and re-render only changed items in list instead of re-rendering entire list. While doing list rendering keys are used to identify which item is added, removed, updated, or reordered.

JSX

const items = ["Apple", "Banana", "Cherry"];
function List() {
     return (
          <ul>
                                         {items.map((item, index) => (
                                             <li key={index}>{item}</li>
                                         ))}
                                   </ul>
     );
}

Here, key uniquely identifies each <li> element. Instead of array index, use a stable unique ID such as database’s table column ID.

Why other options are incorrect?

• They control the styling of list items - Styling is handled using CSS, className, or inline styles.

• They determine the order in which list items are rendered - Order is determined using array order.

• They are used to specify the data type of list items - React keys are not related to data types. It is used for unique identification and reconciliation.

21. Which is NOT valid JSX syntax?

• A. <div className="container"></div>

• B. <div class="container"></div>

• C. <div></div>

• D. <div>{variable}</div>

Correct Answer:

• B. <div class="container"></div>

Explanation:

JSX is short form of JavaScript XML. It is React’s syntax extension for JavaScript. In JSX, some HTML attributes are renamed to avoid conflicts with JavaScript reserved key words.

<div class="container"></div> - It is not a valid JSX syntax. Here, class is reserved keyword in JavaScript. JSX requires to use className instead instead of class.

Why other options are correct?

• <div className="container"></div> - It is a correct way to apply CSS classes in JSX.

• <div></div> - It is valid JSX element.

• <div>{variable}</div> - Embedding JavaScript expressions inside {} is allowed in JSX.

22. What is use of React.Fragment component?

• A. To group multiple elements without adding an extra DOM node

• B. To create a new React component

• C. To add comments to JSX

• D. To handle asynchronous operations

Correct Answer:

• A. To group multiple elements without adding an extra DOM node

Explanation:

The use of React.Fragment component is to group multiple elements without adding extra DOM node. It is used to wrap multiple child elements and they can be returned from component without adding extra DOM node. In React, component must be returned as a single parent element and this can be managed perfectly using fragments.

JSX

import React from "react";
function MyComponent() {
     return (
          <React.Fragment>
                                             <h1>Title</h1>
                                             <p>Description</p>
                                  </React.Fragment>
     );
}

Here, It renders <h1> and <p> as siblings in the DOM, without adding extra <div>.

JSX - shorter syntax, behaves same way

function MyComponent() {
     return (
          <>
                                             <h1>Title</h1>
                                             <p>Description</p>
                                   </>
     );
}

Why other options are incorrect?

• To create a new React component - Fragment can’t be used to create a new React component, because Fragment is not component. Hence, it will not allow to define logic in it. It is structural helper only.

• To add comments to JSX - JSX has its own comment syntax.

JSX

{/* This is a comment */}

• To handle asynchronous operations - Asynchronous operations is handled using useEffect() or async functions instead of fragments.

23. Which is correct way to handle forms in React?

• A. Using the onSubmit event handler

• B. Using the onChange event handler

• C. Using the onClick event handler

• D. Using the onFormSubmit event handler

Correct Answer:

• A. Using the onSubmit event handler

• B. Using the onChange event handler

Explanation:

In React, forms are mainly handled using controlled components. onSubmit and onChange event handler is a correct way to handle forms in React.

onSubmit -

• It is used on <form> element. It handles form submission logic.

• Generally event.preventDefault() used inside submission logic to stop page reloads.

JSX

function MyForm() {
     const handleSubmit = (e) => {
          e.preventDefault();
          console.log("Form submitted");
     };
     return (
          <form onSubmit={handleSubmit}>
                                             <button type="submit">Submit</button>
                                   </form>
     );
}

onChange -

• It is used on form inputs such as input, textarea, select, etc.

• It is updated to update component state as user types or changes values.

• It is used to tracks user input.

JSX

function MyForm() {
     const [name, setName] = React.useState("");
     return (
          <input
                                             type="text"
                                             value={name}
                                             onChange={(e) => setName(e.target.value)}
                                   />
     );
}

Why other options are incorrect?

• Using the onClick event handler - It triggers actions such as button click. It is not standard or recommended way to handle form submission in React forms.

• Using the onFormSubmit event handler - It does not exist as it is invalid React or HTML event.

24. Which hook is used to perform side effects in functional component?

• A. useState()

• B. useEffect()

• C. useContext()

• D. useReducer()

Correct Answer:

• B. useEffect()

Explanation:

useEffect() hook is used to perform side effects in functional components. Side effects commonly used to fetch data from API, subscribe to events, update DOM manually, set up timers and intervals, logging, perform side effects.

JSX

import { useEffect } from "react";

function Example() {
     useEffect(() => {
          console.log("Component mounted");
          return () => {
               console.log("Component unmounted");
          };
     }, []);
     return <div>Hello</div>;
}

Here, effect runs after component renders and cleanup function runs when component unmounts.

Why other options are incorrect?

• useState() - It is used to manage state instead of to perform side effects.

• useContext() - It is used to consume values from React Context not for side effects.

• useReducer() - It is used for complex state management such as Redux patterns.

25. 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:

In React, passing callback functions as props is a common and recommended pattern for handling events. It passes callback functions as props from parent to child component. It keeps data flow unidirectional.

JSX

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

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

Here, Parent defines event logic and child triggers it via prop. This makes component reusable and maintainable.

Why other options are incorrect?

• Inline event handlers - It is valid and commonly used but it is not designed for handling events across components. It is not core pattern.

JSX

<button onClick={() => console.log("Clicked")} />

• Using event listeners with JavaScript - It is not recommended. Adding event listeners with addEventListener is uncommon.

• Adding event delegation - React internally handles event delegation. Hence, developers typically do not implement it manually.

Summary

Here, for each and every question; First, question is mentioned with multiple possible answers. And then, possible correct options are given. After that, detailed explanation is described with theory concept as well as with code samples. Lastly, it is mentioned why the other options are in-correct or in-appropriate.

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