Beginner

Question 1

How to render HTML in React?

Answer 1

You can use dangerouslySetInnerHTML prop to render HTML in React. It is used to set HTML directly from React. You should be careful while using this property as it can cause XSS attacks.

Question 2

What is the purpose of key attribute in React?

Answer 2

The string attribute key is a special attribute you need to include when rendering an array of elements. Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.

Question 3

What is the difference between state and props?

Answer 3

Props are used to pass data from parent to child. They are like function arguments. They are immutable.

State is used to store component data. It is managed within the component and is mutable.

Question 4

What is the naming convention for React components?

Answer 4

In React, the naming convention for components is to use PascalCase, meaning the first letter of each word in the component’s name should be capitalized.

For example, UserProfile, SidebarItem, or NavigationMenu. This convention differentiates custom React components from regular HTML tags in JSX, as React treats elements starting with a lowercase letter as DOM tags and those starting with a capital letter as custom components.

Question 5

Why shouldn’t you use index as a key in React lists and iterators?

Answer 5

Using index as a key can negatively impact performance and may cause issues with the component state. When the list items change due to additions, deletions, or reordering, using indexes can lead to unnecessary re-renders or even incorrect UI updates.

React uses keys to identify elements in the list, and if the key is just an index, it might reuse component instances and state inappropriately. Especially in cases where the list is dynamic or items can be reordered, it’s recommended to use unique and stable identifiers as keys to ensure consistent behavior.

Question 6

What is the difference between Real DOM and Virtual DOM?

Answer 6

Virtual DOM is the representation of a UI in the form of a plain javascript object. It is a node tree that lists the elements, their attributes and content as Objects and their properties.

Real DOM is the real representation of a UI which can be seen and inspected in the browser. Manipulating the virtual DOM is much faster than real DOM, because nothing gets drawn on the screen. React uses this virtual DOM to figure out the most efficient way to update the browser DOM.

Question 7

What’s the component’s lifecycle in React?

Answer 7

In React functional components, lifecycle-like behaviors are achieved using hooks:

Mounting and Unmounting:
Utilizing the useEffect hook with an empty dependency array ([]) ensures the hook runs after the component mounts to the DOM.

The cleanup function returned within the useEffect callback offers a mechanism for handling tasks when the component is about to unmount.

Updates:
The useEffect hook, when invoked without a dependency array or with specific dependencies, executes after every render or when specified prop/state changes are detected.

Question 8

What is the difference between stateful and stateless components?

Answer 8

The main difference between stateful and stateless components is one has state and the other doesn’t.

Stateful components keep track of changes to their state and re-render themselves when the state changes.

Stateless components, on the other hand, render whatever is passed to them via props or always render the same thing.

Question 9

Can we change the state of the component directly?

Answer 9

No, we can’t change the state of the component directly. State can only be changed by using setState() method. Changing the state variable directly won’t re-render the component.

Question 10

What is JSX?

Answer 10

JSX is a syntax extension to JavaScript and comes with the full power of JavaScript.

It lets you write HTML-like markup inside a JavaScript file.

JSX produces React “elements”.

You can embed any JavaScript expression in JSX by wrapping it in curly braces. After compilation, JSX expressions become regular JavaScript objects.

Question 11

How do React Server Components handle data fetching?

Answer 11

Server Components can directly access backend resources, databases, or filesystems to fetch data during rendering, eliminating the need for a separate API layer for data fetching.

Question 12

What are the features of React?

Answer 12

Use of Virtual DOM instead of Real DOM, JSX, Server-side rendering, Unidirectional data flow or data binding, Reusable components, etc.

Question 13

What are React Hooks?

Answer 13

Hooks allow function components to have access to state and other React features.

Hooks are functions that let you “hook into” React state and lifecycle features from function components.

Hooks don’t work inside classes — they let you use React without classes. Some common hooks include useState, useEffect, useMemo, useRef, useCallback, etc.

Question 14

How do Server Components differ from Client Components?

Answer 14

Server Components are rendered on the server and do not require client-side JavaScript for rendering.

While Server Components and Client components can coexist in the same app, Server Components can import and render Client components.

Question 15

What is the difference between controlled and uncontrolled components?

Answer 15

A Controlled Component takes its current value through props and notifies changes through callbacks like onChange.
A parent component “controls” it by handling the callback and managing its own state and passing the new values as props to the controlled component.

An Uncontrolled Component stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

Question 16

What are different options to style a React component?

Answer 16

CSS Stylesheets, Inline styles, CSS Modules, Styled Components, CSS in JS libraries, etc.

Question 17

How to write a comment in React?

Answer 17

You can write a comment in JSX by wrapping it in curly braces and using JavaScript’s multi-line comment syntax.

{/* This is a comment */}

Question 18

What is React?

Answer 18

React, is an open-source JavaScript library for building user interfaces (UIs).

It was developed and maintained by Meta and is widely used by developers to create interactive and dynamic web applications.

Question 19

How to render a list in React?

Answer 19

In React, you can render a list by using the JavaScript map function to iterate over an array of items and return a JSX element for each item.

It’s important to provide a unique key prop to each element in the list for React’s diffing algorithm to function efficiently during re-renders. Here’s a basic example:

const items = [‘Apple’, ‘Banana’, ‘Cherry’];

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

Question 20

What is the difference between react and react-dom packages?

Answer 20

React is a library for building user interfaces.

The package react contains only the renderer-agnostic code i.e. the core React library, algorithm for computing changes in the UI and other helpers (e.g. React.createElement, React.Component, React.Children).

The package eact-dom contains the code specific to the DOM rendering of React components (ReactDOM.render).

Question 21

What are fragments in React?

Answer 21

React doesn’t allow returning multiple elements from a component. You can use fragments to return multiple elements.

Fragments in React allow for a group of elements to be returned from a component’s render method without adding an extra node to the DOM. They are useful when you want to return multiple elements without wrapping them in a parent container.

Question 22

What is the difference between class components and function components?

Answer 22

Class components let you define your components with the help of classes. You can extend from React.Component class to create a component. Class components also allow you to define component level lifecycle methods.

Function components are defined by writing a function which returns a React element. Functional components are the preferred way to write React components. There are no lifecycle methods similar to class components available in functional components; you can use React hooks instead to manage the component lifecycle.