Questions & Answers

1. What is React?

React, also known as React.js, is an open-source JavaScript library developed by Facebook for building user interfaces (UIs) for web applications

2. What are the features of React?

• Component-Based Architecture
• Virtual DOM
• JSX (JavaScript XML)
• Conditional Statements
• State and Props
• Server-Side Rendering (SSR)
• Simplicity
• React Native

3. What is JSX?

JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React

4. What are the limitations of react?

Limitations of React are listed below:

• React is just a library, not a full-blown framework
• Its library is very large and takes time to understand
• Coding gets complex as it uses inline templating and JSX

5.Why can’t browsers read JSX?

Because JSX is a syntax extension for JavaScript, specifically used with the React library for building user interfaces.

6.How different is React’s ES6 syntax when compared to ES5?

• The full form of ES5 is ECMA Script 5.
• The full form of ES6 is ECMA Script 6


• In ES5 we cannot import a JSX file to another file.
• In ES6 we can import a jsx file to another file


• ES5 uses common javascript function
• ES6 introduced arrow functions (() => {})

7.How is React different from Angular?

• Angular uses real DOM
• React uses Virtual DOM


• Angular provides two way data binding
• React provides single way data binding


• Angular Developed by Google
• React Developed by Facebook

8.What is the purpose of render() in React.

The render() method returns a React element, which represents the structure and content that should be displayed on the screen.

9.What is Props?

props allows data to be passed from parent components to child components, enabling dynamic and customizable UI components.

10. What is a state in React and how is it used?

state in React that enables components to manage and respond to dynamic data changes,

11. Differentiate between states and props.

• Props: Props are used in both class components and functional components.
  State: States are used primarily in class components


• Props: Props are used to pass data from a parent component to a child component
  State: State is used to manage a component's internal data that can change over time.


• Props: Props are immutable.
• States: States is mutable.

12. Differentiate between stateful and stateless components.

Stateful components manage their own state and can use lifecycle methods, while stateless components rely on props to receive data and are primarily used for rendering UI.

13. What are the different phases of React component’s lifecycle?

• Mounting phase
• Updating phase
• Unmounting phase
• Error Handling phase

14. Explain the lifecycle methods of React components in detail.

• Mounting phase: You can initialize state and bind event handlers here.
• Unmounting Phase: It's used for cleaning up resources, subscriptions, or other side effects created in componentDidMount.
• Unmounting Phase: This method is called before a component is removed from the DOM. It's used for cleaning up resources, subscriptions, or other side effects created in componentDidMount.
• Error Handling Phase: It's used for displaying fallback UI or logging the error.

15. What is an event in React?

An event is an action that could be triggered as a result of the user action or system generated event.

16. What are synthetic events in React?

synthetic events are a wrapper around the native browser events, providing a consistent and cross-browser-compatible way to handle events in your components.

17. What do you understand by refs in React?

Refs are a function provided by React to access the DOM element and the React element that you might have created on your own.

18. What do you know about controlled and uncontrolled components?

A controlled component is a form element whose value is controlled by React's state.
An uncontrolled component is a form element whose value is managed by the DOM rather than React's state.

19. What are Higher Order Components(HOC)?

A higher-order component (HOC) is an advanced technique in React for reusing component logic.
A higher-order component is a function that takes a component and returns a new component.

20. What are Pure Components?

React pure components that do not re-render when the value of props and state has been updated with the same values.

21. What is the significance of keys in React?

A “key” is a special string attribute you need to include when creating lists of elements in React. Keys are used in React to identify which items in the list are changed, updated, or deleted.

22. Explain Flux.

Flux is a design pattern and architecture that was created by Facebook to manage the flow of data in complex web applications.

23. What is Redux?

Redux is an open-source JavaScript library used to manage application state.

24.What are the three principles that Redux follows?

• Single Source of Truth
• State is Read-Only
• Changes are Made with Pure Functions

25. What do you understand by “Single source of truth”?

single source of truth principle in Redux ensures that your application's state is consistent and manageable.

26. List down the components of Redux.

• Store
• Action
• Reducer
• Dispatch
• Middleware
• Selectors

27.Explain the role of Reducer

Reducers are a fundamental part of the Redux architecture and are responsible for maintaining the application's state changes in a predictable and manageable manner.

28. What is the significance of Store in Redux?

The "store" is a central and fundamental concept in Redux, serving as the container that holds the entire state of your application

29. How is Redux different from Flux?

Redux uses a single store, and Flux uses a multiple stores approach. This means that Redux keeps state information in one place of the application, whereas Flux uses multiple stores per application.

30. What are the advantages of Redux?

Advantages of Redux are listed below:

• Predictability of outcome – Since there is always one source of truth, i.e. the store, there is no confusion about how to sync the current state with actions and other parts of the application.
• Maintainability – The code becomes easier to maintain with a predictable outcome and strict structure.
• Server-side rendering – You just need to pass the store created on the server, to the client side. This is very useful for initial render and provides a better user experience as it optimizes the application performance.
• Developer tools – From actions to state changes, developers can track everything going on in the application in real time.
• Community and ecosystem – Redux has a huge community behind it which makes it even more captivating to use. A large community of talented individuals contribute to the betterment of the library and develop various applications with it.
• Ease of testing – Redux’s code is mostly functions which are small, pure and isolated. This makes the code testable and independent.
• Organization – Redux is precise about how code should be organized, this makes the code more consistent and easier when a team works with it

31. What is React Router?

React Router is a powerful routing library built on top of React, which helps in adding new screens and flows to the application.

32. Why is switch keyword used in React Router v4?

The ‘switch’ keyword is used when you want to display only a single route to be rendered amongst the several defined routes.

33. Why do we need a Router in React?

A router in React is used to enable navigation and routing within a single-page application (SPA).

34. List down the advantages of React Router.

• Declarative Routing
• Component-Based Routing
• Nested Routing
• Dynamic Routing
• Route Matching
• Route Transition and Animation
• URL Handling and History Management
• Route Guards and Redirects
• Code Splitting and Lazy Loading:
• Server-Side Rendering (SSR) and Static Site Generation (SSG)
• React Context Integration
• Large and Active Community

35. What is the purpose of the mapStateToProps function in Redux?

The mapStateToProps function is used in the Redux pattern to reflect any updates to the Redux store and merge them into props in your component.

36. Explain the difference between server-side rendering and client-side rendering in React.

Server-side rendering (SSR) is when the initial render of a React application is done on the server.
Client-side rendering (CSR) is when the React application is rendered entirely in the browser, using JavaScript.

37. What is the purpose of the combineReducers function in Redux?

The combineReducers function in Redux is used to combine multiple individual reducers into a single root reducer.

38. How do you handle error handling in a React application?

There are several ways that an error can be handled in a React application. Using a try-catch block in a component’s lifecycle routines, like componentDidCatch, is a common way to manage rendering-related issues.

39. What is the difference between a smart component and a dumb component in React?

• Smart component has state and logic
• Dumb conponent has no state or logic


• Smart component can make API calls or perform complex logic
• Dumb componentcan only display data passed to it

40. Explain the concept of a Render Prop in React.

A render prop in React is a technique for conveying component logic

41. How do you handle testing in a React application?

React Testing Library is a great tool for testing React components. It’s a set of helpers that let you test React components without relying on their implementation details.

42. What are the different ways to pass data between components in React?

Data is passed as a property on the element when utilising props to communicate between components.

43. Explain the concept of a Portal in React.

Portal is a feature that allows you to render a component's content (such as JSX elements) into a different part of the DOM hierarchy than its parent component.

44. What is the difference between a functional component and a class component in React?

• A functional component is a plain JavaScript function that takes in props and returns a React element.
  A class component is a JavaScript class that extends React.Component and has a render method that returns a React element.


• A functional component can not have local state and lifecycle methods
  A class component can have local state and lifecycle methods
  


• A Functional components are considered simpler, easier to understand and test, and have better performance than class components
  A Class components are useful when you need to use lifecycle methods or the local state.

45. Explain the concept of a Context in React.

A context is a way to share data that is considered “global” for a component tree. It allows you to pass data through the component tree without having to pass props down manually at every level.

46. How do you handle asynchronous data loading in a React application?

asynchronous data loading can be handled using a technique called “lifting state up”

47. Explain the concept of a Hook in React.

“Hooks are a new feature in React that allows us to add state and other React features to functional components.

48. How do you handle localization in a React application?

One way to handle localization in a React application is to use a library such as react-i18next

49. What is the difference between a static component and a dynamic component in React?

• a static component is a component that is defined with a fixed set of properties or attributes and does not change during its lifecycle.
  A dynamic componentis a component that can change its properties, state or behavior based on interactions with the user or events that occur within the application


• A static component is defined using a simple JavaScript function that returns a tree of elements that represent the component’s UI.
  A dynamic component is typically defined using a class component or a functional component with the useState or useEffect Hooks.

50. Explain the concept of a Custom Hook in React.

A Custom Hook in React is a JavaScript function that lets you extract state logic and behavior out of a component, and reuse it across multiple components

51. What is the difference between a presentational component and a container component in React?

• A presentational component is primarily concerned with how things look.
  A container component is responsible for managing the data and logic of a specific part of the application.


• Presentational components are typically stateless and do not manage complex logic or data fetching.
  Container components typically pass data and callbacks to presentational components.

52. What is the difference between a reducer and an action in Redux?

• An action is a plain JavaScript object that describes the change that should be made to the state of the application.
  A reducer is a pure function that takes the current state of the application and an action, and returns the next state of the application.


• Actions are dispatched from the application to the Redux store, which then passes the action to the reducers.
  The reducer is responsible for handling the actions and updating the state accordingly.

53. How do you handle data validation in a React application?

1. PropTypes: will validate the props passed to your component at runtime, and will log warnings in the browser console if any props are of the wrong type.
2. Custom validation functions: You can write custom validation functions to check the validity of your data. These functions can be called inside your component, and can be used to set error messages or update the state to indicate invalid data.
3. Third-party libraries: There are several third-party libraries available for data validation in React, such as yup, joi, or zod. These libraries provide a more powerful and flexible way to validate data, and often provide a more user-friendly way to report errors.

54. What is the difference between a synchronous action and an asynchronous action in Redux?

A synchronous action is an action that is dispatched and immediately processed by the Redux store.
An asynchronous action, on the other hand, is an action that is dispatched but takes some time to complete

55. Explain the concept of a Virtual DOM in React.

A Virtual DOM (Document Object Model) is a lightweight in-memory representation of the actual DOM in a web page.

56. Explain the concept of a Thunk in Redux

A Thunk is a function that returns another function instead of a plain action object.

57. How do you handle security in a React application?

Handling security in a React application involves multiple steps, including:

Input validation: Validate all user inputs on the client and server side to prevent any malicious data from being processed.
Authenticating and authorizing users: Use a secure authentication mechanism such as JSON Web Tokens (JWT) to ensure that only authorized users can access sensitive data.
Storing sensitive data securely: Do not store sensitive information such as passwords and credit card numbers in local storage, use encrypted storage instead.
Implementing HTTPS: Use HTTPS to ensure secure communication between the client and server and protect against network attacks such as man-in-the-middle attacks
Keeping dependencies up-to-date: Regularly update React and its dependencies to patch any known security vulnerabilities.
Using Content Security Policy (CSP): Implement a Content Security Policy (CSP) to restrict the types of resources that can be loaded in a React application and prevent cross-site scripting (XSS) attacks.
Regular security audits: Conduct regular security audits to identify and address potential security issues in a timely manner.

58. Explain the concept of a Provider in React-Redux.

The “Provider” in React-Redux is a higher-order component that wraps your React application and provides it with the ability to access the Redux store.

59. Explain the concept of a Sagas in Redux.

A Saga in Redux is a way to manage side effects (e.g. asynchronous operations like data fetching and impure operations like accessing the browser cache) in a Redux application.

60. Explain the concept of a Middleware in Redux.

a middleware is a software component that sits between the store and the action dispatching process to add additional functionality, such as logging, crash reporting, handling asynchronous actions, etc.

61. What is the difference between a React component and a React element?

A React component is a JavaScript class or function that returns a React element. It is a reusable piece of UI that describes a part of the user interface.
A React element, on the other hand, is a plain JavaScript object that represents a DOM node.

62. Explain the concept of a Memoization in React

Memoization is a technique used to optimize the performance of a component by avoiding unnecessary re-renders.

63. What are forms in React?

React uses forms to allow users to interact with the web page.

64. How do you write comments in React?

There are two ways to write comments in React:

Single-line Comments: Single-line comments are used for adding comments that only span a single line of code.
Multi-line Comments: Multi-line comments are used for adding comments that span multiple lines of code.

65. What is an arrow function in React?

Arrow functions were introduced in ECMAScript 6 (ES6) and provide a more compact and often clearer syntax for creating functions compared to traditional function expressions.

66. Does React JS use HTML?

Yes, ReactJS does use HTML, but in a slightly different way than traditional HTML-based web development.

67. What are the components in React?

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML.

68. When was ReactJS released?

React, was released by Facebook in 2013.

69. What is the current stable version of ReactJS?

Current version of react is 18.2

70. What is the Repository URL of ReactJS?

The Repository URL of react is https://github.com/facebook/react

71. What do you understand with the term polling?

Polling simply means checking for new data over a fixed interval of time by making API calls at regular intervals to the server.

72.Tell us three reasons behind the success of ReactJS?

Component-Based Architecture
Virtual DOM and Efficient Updates
Unidirectional Data Flow and Flux Architecture

73. What is the difference between createElement and cloneElement?

createElement is the code that JSX gets compiled or converted into and is used by reacting to create elements. cloneElement is used for cloning elements and passing them new props.

74. Explain DOM diffing

DOM Diffing: Whenever there is a change in the state of the UI elements, a new virtual DOM is created.

75. Why is React widely used today?

React has gained widespread adoption in the web development community due to its ease of use, efficiency, and versatility

76. How does rendering work in React?

Rendering in React involves the process of creating and updating the user interface based on the application's state changes

77. What is the meaning of create-react-app in React?

The create-react-app is an excellent tool for beginners, which allows you to create and run React project very quickly

78. What is the StrictMode component used in React?

The React StrictMode can be viewed as a helper component that allows developers to code efficiently and brings to their attention any suspicious code which might have been accidentally added to the application.

79. What are Hooks in React?

React Hooks are simple JavaScript functions that we can use to isolate the reusable part from a functional component.

80. What is React Fiber?

React Fiber is a backwards compatible, complete rewrite of the React core.