React Interview Q's

Question 1

What is React?

Answer 1

It is an open-source front-end JavaScript library most popular for single-page web applications. It is helpful when interactive and complex UIs are built for websites or mobile apps. React.js was released for use in 2015 and since then it has become one of the most trusted and used technologies of recent time. It has built one of the largest developer communities around itself.

Question 2

List some of React js’s features.

Answer 2

Important features of React.js include:

Instead of a real DOM, there is Virtual DOM
It completely renders the HTML files on the server into client HTML pages, in other words, server-side rendering
In React.js, the data can be passed to the other parts of an application only in one direction. In other words, there is a unidirectional flow of data.

Question 3

What are the main advantages of React.js?

Answer 3

The main advantages of React.js are:

It enhances the performance of the application
It can be used from the client-side as well as the server-side
The readability of code is higher in React.js because of JSX
It offers easy integration with frameworks such as Angular, Meteor, etc.
It is easy to write UI test cases with React.js

Question 4

What is JSX?

Answer 4

JSX is the syntax extension for Javascript in React.js. With the help of JSX, it is easy to define how the user interface should look. Additionally, with JSX, the file containing the Javascript code can be used to write the HTML structures as well.

Question 5

Describe an event in React.js? How does this differ from an event in JS?

Answer 5

When a user presses a key, clicks the mouse, or performs any action on the machine or when the machine itself triggers an action, these actions are registered as events in React.js.

In React.js, we use camelCase to name events, instead of the lowercase in HTML
In React.js, because of JSX, a function is passed as an event handler, instead of the string in HTML.

In HTML, we specify event in html tags like onclick, onsubmit etc. and pass the string that contain the parenthesis at the end.
In html, we can also add them afterword using external javascript using addEventListener.
In React, we specify event at the time of creating our component.
we use camel case convention in React i. e. onClick, onSubmit.
In React, we bind them using method name only like onClick={greet}.
addEventListener cannot be used in React component

Question 6

How do lists work in React.js?

Answer 6

Lists in React.js are created similar to how they are created in regular Javascript. With lists, data can be displayed in an orderly manner and is useful in displaying menus on websites. For traversing lists, the map() function is used. For example,

An array of numbers is taken by the map() function and their value is multiplied by 5
var numbers = [2,4,6,8,10]
const multiplyNums = numbers.map((number => {
return (number*5);
});
console.log (multiplyNums);
Output: The output in Javascript will be logged in the console. The output in the above case is [10, 20, 30, 40, 50]

Question 7

What are keys used in React.js lists?

Answer 7

Keys are used in React.js Lists because:

Key helps in identifying what objects have been altered, moved, or deleted from lists
With the help of keys, it is easier to determine which objects must be re-rendered instead of all components being re-rendered all the time.
React.js interview questions that ask about the use of a certain function or component in React.js programming are common.

Question 8

Is HTML used in React?

Answer 8

No, it uses an HTML-in JavaScript syntax called JSX (JavaScript and XML) that converts HTML tags to React elements.

Question 9

Can you tell two downsides of React?

Answer 9

It is difficult to integrate with an MVC framework like Rails. Also, users need to have the knowledge about integrating user interface into MVC framework.

Question 10

Can you explain the differences between real DOM and virtual DOM?

Answer 10

Real DOM and Virtual DOM differ in following ways:

Real Dom:
-updates slowly
-HTML can directly update
-Memory waste

Virtual Dom:
-Updates faster
-Can’t be updated directly
-Less memory consumption

Question 11

Explain flux concept in React.

Answer 11

It is a new kind of architecture used for client-side web applications. Supports the concept of Unidirectional Data Flow.

Question 12

What is Redux in React?

Answer 12

An open-source JavaScript library for front-end development and acts as a container for JavaScript applications that is used for the applications state management.

Question 13

Explain the ‘Store’ feature.

Answer 13

It is a feature of Redux that allows the application to save the entire State at one place. This allows you to get regular updates from the store directly.

Question 14

What is a high order component in React?

Answer 14

It is an advanced-level technique in React for reusing component logic.

Question 15

What is the presentational segment?

Answer 15

It is a component in React that just renders HTML and its only function is presentation markup.

Question 16

Explain props in reactjs?

Answer 16

Props in React mean properties. They act as a communication channel from parent to child.

Question 17

What does super keyword mean in React?

Answer 17

It is used to call super or parent class.

Question 18

What is yield catch phrase in JS?

Answer 18

It is used to delay and resume a generator work.

Question 19

List the two types of React component.

Answer 19

Two types of React component are as follows:

Function component
Class component

Question 20

What is a synthetic event in react js?

Answer 20

It is an object that serves as a cross browser wrapper of the browser’s native event.

Question 21

In Redux, what is an action?

Answer 21

In Redux, an action is an object that contains information about an event that has occurred in an application.

Question 22

What are stateless components?

Answer 22

They are pure functions with no render method.

Question 23

What is react router and why would you use it?

Answer 23

It is a library for routing in React. With React router, you can persist certain elements on the page while changing or re-rendering others that you include as sub routes. For example, the navbar can remain while the main content of the page changes. The navbar wouldn’t need to re-render which improves performance.

Question 24

Explain Jest.

Answer 24

Jest is a JavaScript framework created by Facebook and is based on Jasmine. Its feature-rich API helps to get results quickly.

Question 25

What exactly is the dispatcher?

Answer 25

It is the central hub of data flow in a Flux application that acts as a directory of callbacks.

Question 26

Explain the callback function.

Answer 26

It is called when setState () has finished. A state can be updated in response to prop changes or server response using setState() method The main purpose is to prevent a component from re-rendering.

Question 27

Explain react state.

Answer 27

It is an object which stores the component’s property values. Also, it decides how the component renders and behaves.

Question 28

Can state be updated in React.js?

Answer 28

Yes, it can be updated directly or indirectly. To implement this one can use either this. setState function or the updater function.

Question 29

What is the use of the arrow function?

Answer 29

Arrow function helps to create a compact function expression. Also they help predict bugs when passed as a callback.

Question 30

List the lifecycle steps of React.

Answer 30

The steps are as follows:

Initialization
State/Property updates
Destruction

Question 31

What are react portals?

Answer 31

They are used to render an element outside its hierarchy using CreatePortalmethod. Hence they allow developers to render outside the hierarchy tree.

Question 32

Explain Context.

Answer 32

React Context is a way to share data globally between React components. It achieved this by passing props from parent to child and storing them in a store. Thus child component(s) can use these props through the store.

Question 33

What is the use of Webpack?

Answer 33

Webpack is a command line tool used to bundle different code files and assets into single large file.. It has been built over Node.js and helps minimize Javascript, CSS files, images, etc.

Question 34

What is Babel?

Answer 34

It is an open-source JavaScript compiler that converts the latest JavaScript versions to old ones.

Question 35

How are React.js and React Native different?

Answer 35

Where ReactJS is a front end open-source JavaScript library for UIs, React Native is an open-source mobile framework for platforms such as Android and iOS.

Question 36

How do browsers read JSX files?

Answer 36

As JSX is a combination of HTML and JavaScript, browsers are unable to read it. And hence a transpiler is needed to convert JSX to Javascript so that browsers can understand.

Question 37

What is most advised way for naming components?

Answer 37

By using reference rather than using displayName because it provides a clear and concise name for the component.

Question 38

Mention one difference between props and state?

Answer 38

State is mutable while Props are immutable. This means that the state is internal and managed by the component while props are external and managed by anything that renders the component.

Question 39

What is ‘create-react-app’?

Answer 39

It provides a development environment for creating React applications using the JavaScript features as it creats a basic setup for the application without requiring to configure everything. It is very helpful in building a single-page application in React.

Question 40

What are error boundaries?

Answer 40

They help catch errors in child components, log the error and show fallback UI.

Question 41

Why will you use <></> empty tag?

Answer 41

To declare fragments

Question 42

What are mixins?

Answer 42

Mixins are a way of defining code that can be reused in multiple class hierarchies. They are intended to provide member implementations en masse. To define a mixin, use the mixin declaration. In the rare case where you need to define both a mixin and a class, you can use the mixin class declaration.

The advantage of mixins is that they can be used to simplify the design of APIs in which multiple interfaces need to include the same methods and properties.

Question 43

What is React Query?

Answer 43

React Query is a popular library for managing server state and caching in React applications. It provides hooks and utilities to fetch, cache, and update data from your server in a declarative and efficient way.

Some key features of React Query include:

1. Data Fetching: React Query provides hooks like useQuery and useMutation to fetch and mutate data from your server. These hooks handle caching, stale-while-revalidate, and other optimizations out of the box.
2. Automatic Caching: It automatically caches query results in memory and supports various cache configurations to control caching behavior, including time-based invalidation and manual invalidation.
3. Query Invalidation and Refetching: React Query handles automatic invalidation and refetching of queries when data changes, ensuring that your UI stays up to date with the latest data from the server.
4. Optimistic Updates: It supports optimistic updates for mutations, allowing you to update the UI optimistically before receiving a response from the server, providing a smoother user experience.
5. Pagination and Infinite Loading: React Query includes built-in support for pagination and infinite loading, making it easy to implement efficient data fetching patterns in your application.
6. Server-Side Rendering (SSR) Support: It provides built-in support for server-side rendering (SSR) and seamless integration with popular SSR frameworks like Next.js.

Overall, React Query simplifies the management of server state in React applications, reducing boilerplate code and improving performance by handling caching and data fetching optimizations for you.

Question 44

What is the context API?

Answer 44

The Context API in React is a mechanism for passing data through the component tree without having to pass props down manually at every level. It allows you to share values like themes, locale preferences, or authentication status across the entire React component tree.

The Context API consists of two main parts:

1. Context Provider: The Context Provider component is used to wrap a part of the component tree where you want to make certain data available to all descendant components. It accepts a value prop which can be accessed by any child component that subscribes to the context.
2. Context Consumer: The Context Consumer component is used to consume the context value within a functional component. It allows components to access the context value without having to explicitly pass it down through props.

Here’s a basic example of how the Context API works:

```javascript
// Create a new context
const MyContext = React.createContext();

// Define a Context Provider
function MyProvider({ children }) {
const [value, setValue] = React.useState(‘defaultValue’);

return (
<MyContext.Provider value={{ value, setValue }}>
{children}
</MyContext.Provider>
);
}

// Define a component that consumes the context
function MyComponent() {
return (
<MyContext.Consumer>
{({ value, setValue }) => (
<div>
<p>Value from context: {value}</p>
<button onClick={() => setValue('newValue')}>
Change Value
</button>
</div>
)}
</MyContext.Consumer>
);
}

// Usage
function App() {
return (
<MyProvider>
<MyComponent></MyComponent>
</MyProvider>
);
}
~~~

In this example, MyProvider is the Context Provider, which wraps the MyComponent. MyComponent consumes the context value using the Context Consumer. When the button inside MyComponent is clicked, it updates the context value through the setter function provided by the context. All components within the provider will re-render with the updated value.