React Concepts
1. What is react?
React is a JavaScript library for building user interfaces. It was developed by
Facebook, and is often used for building single-page applications and mobile
applications.
React is designed to make it easy to build reusable components that can be used to
build complex user interfaces. It uses a virtual DOM (Document Object Model) to
optimize updates to the actual DOM, which makes it faster than other approaches
that manipulate the DOM directly.
React allows you to write declarative code, which means that you describe the
desired output, and React takes care of the rest. This makes it easier to reason about
your code, and it can improve the performance of your applications.
React is often used in conjunction with other libraries and frameworks, such as
Redux and React Router, to build complete web applications. It is a popular choice
for building modern, interactive user interfaces, and it is widely used by many
companies and organizations around the world.
2. Differentiate between functional and class components. What do you prefer to use
and in which situation?
In React, there are two main types of components: functional components and class
components.
Functional components are simple JavaScript functions that accept props (short for
"properties") as an argument and return a React element. They are called
"functional" because they are literally just functions, and they do not have any
internal state or methods.
Class components, on the other hand, are JavaScript classes that extend the
React.Component base class. They can have internal state and methods, and they
must implement a render() method that returns a React element.
Here is an example of a class component in React:
class MyComponent extends React.Component {
state = { message: 'Hello' };
render() {
return (
<div>
{this.state.message}
</div>
);
}
}
I prefer Functional components because Functional components are generally
simpler and easier to understand, and they are a good choice for components that
do not need to manage state or have any complex logic. They are also more
performant than class components, since they do not have the overhead of the
React.Component base class.
3. What is State and Props in react?
Props are a way for components to receive data from their parent component. They
are passed to the component as an argument, and they can be accessed inside the
component using the props object. Props are considered to be immutable, which
means that they cannot be changed within the component.
State, on the other hand, is a way for a component to maintain and modify its own
data. It is an object that is stored within the component, and it can be modified using
the component's methods. State is considered to be private to the component, and
it should not be accessed or modified directly from outside the component.
4. What is the difference between State and Props? How do you decide what is
controlled by state and what is controlled by pros?
In React, props (short for "properties") and state are used to pass data to
components.
Props are a way for components to receive data from their parent component. They
are passed to the component as an argument, and they can be accessed inside the
component using the props object. Props are considered to be immutable, which
means that they cannot be changed within the component.
State, on the other hand, is a way for a component to maintain and modify its own
data. It is an object that is stored within the component, and it can be modified using
the component's methods. State is considered to be private to the component, and
it should not be accessed or modified directly from outside the component.
One key difference between props and state is that props are passed to a
component from its parent, while state is managed internally by the component.
This means that the parent component has control over the props that it passes to a
child component, but the child component has control over its own state.
Another difference is that props are considered to be immutable, while state can be
modified by the component itself. This means that you should never try to modify
props directly within a component, but you can modify state using the component's
methods.
So, how do you decide what should be controlled by state and what should be
controlled by props? Here are a few guidelines to follow:
• If a piece of data is needed by multiple components, or if it needs to be
shared between components, it should be passed as a prop from the parent
component.
• If a piece of data is specific to a single component, and it does not need to be
shared with any other components,
5. What is Virtual DOM and how it works?
The Virtual DOM (VDOM) is a programming concept that was introduced with the
React library. It is a lightweight in-memory representation of the actual DOM
(Document Object Model), and it is used to optimize updates to the actual DOM.
When a component's state or props change, React calculates the difference between
the current VDOM and the new VDOM, and then updates the actual DOM with the
minimal set of changes that are needed. This process is called "reconciliation".
Here is a simplified example of how the Virtual DOM works:
The component's state or props change, causing the component to re-render.
The component generates a new VDOM based on the new state or props.
React compares the current VDOM with the new VDOM, and calculates the minimal
set of changes that are needed to update the actual DOM.
React updates the actual DOM with the minimal set of changes that were calculated
in step 3.
This process allows React to update the actual DOM efficiently, by minimizing the
number of DOM operations that are needed. It also allows React to batch multiple
updates together, which can further improve the performance of the application.
Overall, the Virtual DOM is a key concept in React, and it is one of the main reasons
that the library is able to provide high-performance updates to the user interface.
6. What is the importance of Key in the map?
In a map (also called a dictionary or associative array in some programming languages), the
key is used to identify a specific value within the map. The key is used to locate the
corresponding value in the map, and it must be unique within the map.
The key is an important part of the map because it allows you to efficiently retrieve values
from the map. Without the key, you would have to search through the entire map to find
the value you are looking for, which would be inefficient and time-consuming.
The keys in a map can be any data type, such as a string, integer, or even an object. The
values can also be any data type, and they can be any number of elements, such as a single
value, a list, or even another map.
7. What are the life- cycle methods in react?
In React, a component's life cycle refers to the sequence of events that occur from the time
the component is created until it is destroyed. During this time, the component goes
through several stages, each with its own set of methods that are called at different points
in the life cycle. These methods are called "life cycle methods."
Here is a list of the main life cycle methods in React:
componentWillMount()
componentDidMount()
shouldComponentUpdate()
componentWillUpdate()
componentDidUpdate()
componentWillUnmount()
There are also several other life cycle methods that are less commonly used, such as
componentWillReceiveProps() and getDerivedStateFromProps().
Each of these life cycle methods serves a specific purpose and is called at a specific point in
the life cycle of a component. For example, the componentDidMount() method is called
after a component has been rendered to the DOM, while the componentWillUnmount()
method is called just before a component is destroyed.
8. Which life- cycle method will you use when calling an API?
When calling an API in a React component, it is generally best to use the
componentDidMount() life cycle method. This method is called after a component
has been rendered to the DOM, so it is a good place to perform any actions that
require the component to be present in the DOM.
Here is an example of how you might use the componentDidMount() method to call
an API in a React component:
class MyComponent extends React.Component {
componentDidMount() {
fetch('https://my-api.com/endpoint')
.then(response => response.json())
.then(data => {
// do something with the data
});
}
render() {
// render the component
}
}
Using the componentDidMount() method to call an API ensures that the API call is
made after the component has been rendered, which can help to avoid potential
issues such as the component trying to access uninitialized state.
It is also possible to call an API in other life cycle methods such as
componentWillMount() or componentDidUpdate(), but componentDidMount() is
generally the preferred method for this purpose.
9. How do we access the parent component in a child and vice versa. (in react)
We can access using props object. Props object is a way for a parent component to
pass data down to its child components.
10. Have you used Context?
Yes. In React, context is a way to pass data through the component tree without
having to pass props down manually at every level. It is designed to share data that is
considered global for a tree of React components, such as the current authenticated
user, theme, or preferred language.
11. How to connect react with backend?
There are several ways to connect a React frontend with a backend, such as a server
or a database. Some common approaches include using a REST API or a GraphQL API.
Here are the general steps to connect a React frontend with a backend using a REST
API:
• Create a server that exposes a REST API for performing CRUD (create, read,
update, delete) operations on your data.
• In your React frontend, use the fetch() function or a library like axios to make
HTTP requests to your backend API.
• Use the componentDidMount() lifecycle method to fetch data from the API
when the component mounts, or use a state management library like Redux
to manage your application's state and make API requests.
• Use the render() method to display the data in your React components.
12. Why use Redux in react?
Redux is a popular state management library for JavaScript applications, including
React applications. It is designed to make it easier to manage and update the state of
an application, especially in applications with complex state or state that is shared
across many components.
There are several benefits to using Redux in a React application:
I. Centralized state management: Redux stores the entire application state in a single
store, making it easier to understand how the state of the application changes over
time. This is especially useful in large applications where the state is complex and
needs to be shared across many components.
II. Predictability: Redux follows strict rules for how the state can be updated, making it
easier to understand how an action will affect the state of the application.
III. DevTools: Redux includes a powerful set of developer tools that allow you to inspect
the state of the application at any point in time and see how it has changed over
time.
IV. Community: Redux has a large and active community, which means there are many
resources available for learning and getting help, as well as a wide range of
middleware and plugins that can be used to extend its functionality.
Redux is not the only state management solution available for React, but it is a
widely used and well-supported option that can be a good choice for many
applications.
13. Explain how to work with redux?
Redux is a state management library for JavaScript applications. It is designed to
make it easier to manage and update the state of an application, especially in
applications with complex state or state that is shared across many components.
Here is a high-level overview of how to work with Redux in a React application:
I. Install the Redux library and dependencies: To use Redux in your React
application, you will need to install the Redux library and any dependencies it
requires, such as the react-redux library. You can do this using a package
manager like npm or yarn.
II. Set up the store: The store is the central object in Redux that holds the state
of the application. To set up the store, you will need to create a reducer
function and pass it to the createStore() function from the Redux library.
III. Connect your components: To allow your React components to access the
state in the store, you will need to use the connect() function from the react-
redux library. This function allows you to map the state from the store to the
props of your components.
IV. Dispatch actions: To update the state in the store, you will need to dispatch
actions. An action is an object that describes the change you want to make to
the state. To dispatch an action, you will need to use the dispatch() function
from the store.
V. Handle actions in the reducer: When an action is dispatched, the reducer
function is called with the current state and the action as arguments. The
reducer should return a new state object based on the action and the current
state.
Here is an example of a simple Redux setup in a React application:
// MyReducer.js
const initialState = { count: 0 };
function myReducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
}
export default myReducer;
// store.js
import { createStore } from 'redux';
import myReducer from './MyReducer';
const store = createStore(myReducer);
export default store;
// MyComponent.js
import React from 'react';
import
14. What is the container pattern?
The container pattern is a way of structuring a React application by separating the
presentation components from the stateful container components.
Presentation components, also known as presentational components or dumb
components, are responsible for rendering the UI and are typically written as
functional components. They receive data and callbacks through props and do not
have their own state.
Container components, also known as smart components, are responsible for
managing the application state and logic. They are typically written as class-based
components and use state and lifecycle methods to control the presentation
components.
The container pattern can help to make a React application more modular and easier
to maintain by clearly separating the concerns of the different types of components.
It can also make it easier to test the presentation components in isolation, as they do
not depend on the state or logic of the container components.
Here is an example of how you might structure a React application using the
container pattern:
Copy code
// Presentation component
function MyPresentationComponent(props) {
return (
<div>
<p>{props.message}</p>
<button onClick={props.onClick}>Click me</button>
</div>
);
}
// Container component
class MyContainerComponent extends React.Component {
state = {
message: 'Hello, world!',
};
handleClick = () => {
this.setState({ message: 'Button was clicked!' });
}
render() {
return (
<MyPresentationComponent
message={this.state.message}
onClick={this.handleClick}
/>
);
}
}
15. What is middleware used for?
In the context of a React application, middleware refers to code that sits between the
application and the backend or server and provides additional functionality or services.
There are several use cases for middleware in a React application:
I. Routing: Middleware can be used to handle routing in a React application, allowing
you to define the routes and mapping them to the appropriate components.
II. Async actions: Middleware can be used to handle asynchronous actions, such as
making API calls or interacting with a database. This can help to manage the flow of
data in the application and avoid blocking the UI.
III. Logging: Middleware can be used to log the actions dispatched in the application,
allowing you to see how the state is changing over time and troubleshoot any issues.
IV. Error handling: Middleware can be used to handle errors that occur in the
application, such as network errors or server-side errors.
V. Authentication: Middleware can be used to handle authentication and authorization
in a React application, allowing you to protect certain routes or resources.
There are many middleware libraries available for use with React, such as Redux Thunk,
Redux Saga, and Redux Observable. Each one provides a different set of features and can be
used to address different needs in the application.
