SOOPRO Pathshala provides React Interview Questions and Answers
React, also known as React.js, is an open-source JavaScript library developed by Facebook for building user interfaces (UIs) for web applications
JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React
Because JSX is a syntax extension for JavaScript, specifically used with the React library for building user interfaces.
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 (() => {})
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
The render() method returns a React element, which represents the structure and content that should be displayed on the screen.
props allows data to be passed from parent components to child components, enabling dynamic and customizable UI components.
state in React that enables components to manage and respond to dynamic data changes,
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.
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.
Mounting phase
Updating phase
Unmounting phase
Error Handling phase
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.
An event is an action that could be triggered as a result of the user action or system generated event.
synthetic events are a wrapper around the native browser events, providing a consistent and cross-browser-compatible way to handle events in your components.
Refs are a function provided by React to access the DOM element and the React element that you might have created on your own.
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.
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.
React pure components that do not re-render when the value of props and state has been updated with the same values.
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.
Flux is a design pattern and architecture that was created by Facebook to manage the flow of data in complex web applications.
Redux is an open-source JavaScript library used to manage application state.
Single Source of Truth
State is Read-Only
Changes are Made with Pure Functions
single source of truth principle in Redux ensures that your application's state is consistent and manageable.
Store
Action
Reducer
Dispatch
Middleware
Selectors
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.
The "store" is a central and fundamental concept in Redux, serving as the container that holds the entire state of your application
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
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
React Router is a powerful routing library built on top of React, which helps in adding new screens and flows to the application.
The ‘switch’ keyword is used when you want to display only a single route to be rendered amongst the several defined routes.
A router in React is used to enable navigation and routing within a single-page application (SPA).
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.
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.
The combineReducers function in Redux is used to combine multiple individual reducers into a single root reducer.
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.
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
A render prop in React is a technique for conveying component logic
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.
Data is passed as a property on the element when utilising props to communicate between components.
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.
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.
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.
asynchronous data loading can be handled using a technique called “lifting state up”
“Hooks are a new feature in React that allows us to add state and other React features to functional components.
One way to handle localization in a React application is to use a library such as react-i18next
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 component is 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.
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
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.
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.
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.
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
A Virtual DOM (Document Object Model) is a lightweight in-memory representation of the actual DOM in a web page.
A Thunk is a function that returns another function instead of a plain action object.
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.
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.
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.
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.
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.
Memoization is a technique used to optimize the performance of a component by avoiding unnecessary re-renders.
React uses forms to allow users to interact with the web page.
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.
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.
Yes, ReactJS does use HTML, but in a slightly different way than traditional HTML-based web development.
Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML.
React, was released by Facebook in 2013.
Current version of react is 18.2
The Repository URL of react is https://github.com/facebook/react
Polling simply means checking for new data over a fixed interval of time by making API calls at regular intervals to the server.
Component-Based Architecture
Virtual DOM and Efficient Updates
Unidirectional Data Flow and Flux Architecture
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.
DOM Diffing: Whenever there is a change in the state of the UI elements, a new virtual DOM is created.
React has gained widespread adoption in the web development community due to its ease of use, efficiency, and versatility
Rendering in React involves the process of creating and updating the user interface based on the application's state changes
The create-react-app is an excellent tool for beginners, which allows you to create and run React project very quickly
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.
React Hooks are simple JavaScript functions that we can use to isolate the reusable part from a functional component.
React Fiber is a backwards compatible, complete rewrite of the React core.