FrontendDeveloper.in

React Interview Questions

  • Question 211

    How do you print falsy values in JSX?

    The falsy values such as false, null, undefined, and true are valid children but they don't render anything. If you still want to display them then you need to convert it to string. Let's take an example on how to convert to a string,

  • Question 212

    What is the typical use case of portals?

    React Portals are primarily used to render UI components such as modals, tooltips, dropdowns, hovercards, and notifications outside of their parent component's DOM tree. This helps avoid common CSS issues caused by parent elements, such as:

    • **overflow: hidden** on parent elements clipping or hiding child elements like modals or tooltips,
    • stacking context and **z-index** conflicts created by parent containers that prevent child elements from appearing above other content.

    That means, you need to visually “break out” of its container. By rendering these UI elements into a separate DOM node (often directly under <body>), portals ensure they appear above all other content and are not restricted by the parent’s CSS or layout constraints, resulting in correct positioning and visibility regardless of the parent’s styling.

  • Question 213

    How do you set default value for uncontrolled component?

    In React, the value attribute on form elements will override the value in the DOM. With an uncontrolled component, you might want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a defaultValue attribute instead of value.

    render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
User Name:
<input
defaultValue="John"
type="text"
ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}

    The same applies for select and textArea inputs. But you need to use defaultChecked for checkbox and radio inputs.

  • Question 214

    What is your favorite React stack?

    Even though the tech stack varies from developer to developer, the most popular stack is used in react boilerplate project code. It mainly uses Redux and redux-saga for state management and asynchronous side-effects, react-router for routing purpose, styled-components for styling react components, axios for invoking REST api, and other supported stack such as webpack, reselect, ESNext, Babel. You can clone the project https://github.com/react-boilerplate/react-boilerplate and start working on any new react project.

  • Question 215

    What is the difference between Real DOM and Virtual DOM?

    Below are the main differences between Real DOM and Virtual DOM,

    Real DOMVirtual DOM
    Updates are slowUpdates are fast
    DOM manipulation is very expensive.DOM manipulation is very easy
    You can update HTML directly.You Can’t directly update HTML
    It causes too much of memory wastageThere is no memory wastage
    Creates a new DOM if element updatesIt updates the JSX if element update

  • Question 216

    How to add Bootstrap to a react application?

    Bootstrap can be added to your React app in a three possible ways,

    1. Using the Bootstrap CDN: This is the easiest way to add bootstrap. Add both bootstrap CSS and JS resources in a head tag.
    2. Bootstrap as Dependency: If you are using a build tool or a module bundler such as Webpack, then this is the preferred option for adding Bootstrap to your React application
    npm install bootstrap
    1. React Bootstrap Package: In this case, you can add Bootstrap to our React app is by using a package that has rebuilt Bootstrap components to work particularly as React components. Below packages are popular in this category,
    2. react-bootstrap
    3. reactstrap

  • Question 218

    Is it recommended to use CSS In JS technique in React?

    React does not have any opinion about how styles are defined but if you are a beginner then good starting point is to define your styles in a separate *.css file as usual and refer to them using className. This functionality is not part of React but came from third-party libraries. But If you want to try a different approach(CSS-In-JS) then styled-components library is a good option.

  • Question 220

    What is useEffect hook? How to fetch data with React Hooks?

    The useEffect hook is a React Hook that lets you perform side effects in function components. Side effects are operations that interact with the outside world or system and aren't directly related to rendering UI — such as fetching data, setting up subscriptions, timers, manually manipulating the DOM, etc.

    In function components, useEffect replaces the class component lifecycle methods(componentDidMount, componentDidUpdate and componentWillUnmount) with a single, unified API.

    Syntax

    useEffect(() => {
// Side effect logic here

return () => {
// Cleanup logic (optional)
};
}, [dependencies]);

    This effect hook can be used to fetch data from an API and to set the data in the local state of the component with the useState hook’s update function.

    Here is an example of fetching a list of ReactJS articles from an API using fetch.

    import React from "react";

function App() {
const [data, setData] = React.useState({ hits: [] });

React.useEffect(() => {
fetch("http://hn.algolia.com/api/v1/search?query=react")
.then((response) => response.json())
.then((data) => setData(data));
}, []);

return (
<ul>
{data.hits.map((item) => (
<li key={item.objectID}>
</li>
))}
</ul>
);
}

export default App;

    A popular way to simplify this is by using the library axios.

    We provided an empty array as second argument to the useEffect hook to avoid activating it on component updates. This way, it only fetches on component mount.

  • Question 221

    Is Hooks cover all use cases for classes?

    Hooks doesn't cover all use cases of classes but there is a plan to add them soon. Currently there are no Hook equivalents to the uncommon getSnapshotBeforeUpdate and componentDidCatch lifecycles yet.

  • Question 223

    Why do we use array destructuring (square brackets notation) in `useState`?

    When we declare a state variable with useState, it returns a pair — an array with two items. The first item is the current value, and the second is a function that updates the value. Using [0] and [1] to access them is a bit confusing because they have a specific meaning. This is why we use array destructuring instead.

    For example, the array index access would look as follows:

    var userStateVariable = useState("userProfile"); // Returns an array pair
var user = userStateVariable[0]; // Access first item
var setUser = userStateVariable[1]; // Access second item

    Whereas with array destructuring the variables can be accessed as follows:

    const [user, setUser] = useState("userProfile");

  • Question 224

    What are the sources used for introducing hooks?

    Hooks got the ideas from several different sources. Below are some of them,

    1. Previous experiments with functional APIs in the react-future repository
    2. Community experiments with render prop APIs such as Reactions Component
    3. State variables and state cells in DisplayScript.
    4. Subscriptions in Rx.
    5. Reducer components in ReasonReact.

  • Question 225

    How do you access imperative API of web components?

    Web Components often expose an imperative API to implement its functions. You will need to use a ref to interact with the DOM node directly if you want to access imperative API of a web component. But if you are using third-party Web Components, the best solution is to write a React component that behaves as a wrapper for your Web Component.

Get LinkedIn Premium at Rs 399