React Concepts Q&A
React Concepts Q&A
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>
);
}
}
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:
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".
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.
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?
Here is an example of how you might use the componentDidMount() method to call
an API in a React component:
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.
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?
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?
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.
// store.js
import { createStore } from 'redux';
import myReducer from './MyReducer';
// MyComponent.js
import React from 'react';
import
14. What is the container pattern?
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.
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.
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.