ReactJS interview questions

How are Actions defined in Redux?

Actions in React must have a type property that indicates the type of ACTION being performed. They must be defined as a String constant and you can add more properties to it as well. In Redux, actions are created using the functions called Action Creators. Below is an example of Action and Action Creator:

How is React different from Angular?

Angular - made by google, complete mvc, real dom, bi-direction data binding, client side & server side rendering, slower performance React- made by facebook , view layer of mvc, virtual dom, uni-directional data binding, server side rendering, faster performance due to virtual dom

How do you pass props between components?

In order to pass a prop to a component all we have to do is name the prop and set it equal to some value. props can be a Boolean, function, array, number object, string

How do you write comments in React?

Single-line comments // multiline /* content */

How do you handle error handling in a React application?

Try and Catch blocks (during rendering), manage errors that happen inside a functional component by combining the useEffect hook with a try-catch block.

Can web browsers read JSX directly?

Web browsers cannot read JSX directly. This is because they are built to only read regular JS objects and JSX is not a regular JavaScript object For a web browser to read a JSX file, the file needs to be transformed into a regular JavaScript object. For this, we use Babel.

What is React Router?

a JavaScript framework that lets us handle client and server-side routing in React applications. It enables the creation of single-page web or mobile apps that allow navigating without refreshing the page. It also allows us to use browser history features while preserving the right application view.

debugging tools in React

chrome devtools, react developer tools, vscode javascript debugger

Explain the concept of a Context in React.

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. Context is often used for data that is required by many components in an application, such as the currently authenticated user, the current locale, or the theme. It should be noted that context should be used sparingly, as it can make your components more difficult to reason about and test. If possible, it's better to pass props down the component tree manually.

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

react testing library, jest,

Why use react?

Easy creation of dynamic applications: React makes it easier to create dynamic web applications because it provides less coding and provides more functionality, whereas, with JavaScript applications, code tends to get complex very quickly.

what are functional components?

Functional components are just javascript functions, which contains some logic to perform certain actions. These components accept the data as props and return the React element which is nothing HTML content. They can now also have their own state via the use of the useState hook

What is a state in React?

The state is a built-in React object that is used to contain data or information about the component. The state in a component can change over time, and whenever it changes, the component re-renders. The change in state can happen as a response to user action or system-generated events. It determines the behavior of the component and how it will render.

How is Redux different from Flux?

Redux: opensource js library used to manage application state, store's state is immutable, can only have single store, uses concept of reducer Flux: flux is an architecture and not a framework or library, store's state is mutable, can have multiple stores, uses concept of the dispatcher

Explain the lifecycle methods of components.

class based: mounting(componentDidMount), update(componentDidUpdate), unmounting(componentDidUnmount) functional Components: useEffect( ) works in place of these.

Why is there a need for using keys in Lists?

* A key is a unique identifier and it is used to identify which items have changed, been updated or deleted from the lists * It also helps to determine which components need to be re-rendered instead of re-rendering all the components every time. Therefore, it increases performance, as only the updated components are re-rendered

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. Custom Hooks allow you to abstract away state and behavior that is common across your application into a reusable piece of code. Custom Hooks are named with the prefix use (e.g. useForm, useFetch), and can call other Hooks as well as your own custom Hooks. They have the same rules as Hooks and can only be called at the top level of your component or your own custom Hooks. Custom Hooks can receive arguments and return values, just like a regular function, but they also have the ability to manage state and perform side-effects. By abstracting state and behavior into a Custom Hook, you can improve the readability and maintainability of your code.

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. It is an immutable representation of a DOM node, which can be created using React.createElement or JSX. In short, a component is a blueprint for creating elements, and an element is an instance of a component.

Explain the concept of a Renderless Component in React.

A Renderless Component in React is a component that doesn't render any HTML elements to the DOM, but instead exposes data and methods to other components through props and callbacks. The purpose of a renderless component is to encapsulate logic that can be reused across multiple components and keep the component tree lean and flexible. The other components that consume the logic provided by a renderless component can then render the HTML elements they need based on the information and functionality they receive from the renderless component. This approach separates the logic and presentation concerns, making the code easier to maintain and test.

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. It is implemented as a middleware using generator functions in JavaScript and runs in the background, separate from the main thread of your application, watching for actions dispatched to the store. When a specific action is detected, the Saga can perform various tasks and trigger additional actions as needed, updating the store based on the results of the asynchronous operations. The key benefit of using Sagas is that they make it easier to reason about, test, and manage the flow of data in your application.

Explain the concept of a Thunk in Redux.

A Thunk in Redux is a function that returns another function instead of a plain action object. It's used to perform asynchronous operations and dispatch multiple actions. Thunks allow you to write action creators that return a function instead of an action. This can be useful for performing asynchronous operations, such as API calls, and dispatching multiple actions, such as one to indicate that the API call has started and another to indicate that it has finished. The inner function receives the store's dispatch method as an argument, which can be used to dispatch actions at any point in the future. Thunks are typically implemented using a middleware, such as the redux-thunk middleware.

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. In React, the Virtual DOM acts as an intermediary between the React component's render output and the browser's DOM. When a React component's state changes, React updates the Virtual DOM, instead of directly updating the actual DOM. This is more efficient because updating the Virtual DOM is faster than updating the actual DOM, as it can calculate the difference between the previous and current render output, and only update the parts that have changed. React then takes the updated Virtual DOM and uses it to update the actual DOM, minimizing the amount of work that needs to be done in the actual DOM and improving the overall performance of the application. In summary, the Virtual DOM in React acts as an optimization to increase the speed and efficiency of updates to the user interface.

Explain the concept of a Render Prop in React.

A render prop in React is a technique for conveying component logic. Instead of using a component's props to communicate data and behaviour, a render prop is a function that a component utilises to select what to render. The "provider" component makes the render prop available, but the "consumer" component is the one that uses it. With this approach, component flexibility and reuse are enhanced.

What is the difference between a stateless component and a stateful component in React?

A stateless component: is a component that does not maintain its own internal state. It receives data and callbacks through props (short for properties) and only renders the UI based on those props. Stateless components are typically used for simple, presentational elements that don't need to handle any complex logic or internal state updates. They are simple functions that take props and return JSX. A stateful component, is a component that maintains its own internal state. It can handle internal state updates and side effects, and may also manage the state of other child components. Stateful components are typically used for more complex elements that need to handle user interactions, API calls, or other logic. They are class components that extend React.Component.

What is the significance of Store in Redux?

A store is a JavaScript object which can hold the application's state and provide a few helper methods to access the state, dispatch actions and register listeners. The entire state/ object tree of an application is saved in a single store. As a result of this, Redux is very simple and predictable. We can pass middleware to the store to handle the processing of data as well as to keep a log of various actions that change the state of stores. All the actions return a new state via reducers.

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. The store updates the state, and the updated state is immediately available for consumption by the components. An asynchronous action, on the other hand, is an action that is dispatched but takes some time to complete. Asynchronous actions are typically used when performing network requests or doing other operations that take time. These actions cannot be immediately processed by the Redux store, so they require additional logic to handle their completion.

How do you handle code optimization in a large React application?

Code splitting: This allows you to split your code into smaller chunks that can be loaded on demand, reducing the initial load time of your application. Lazy loading: Lazy loading allows you to load components only when they are required, reducing the amount of code that needs to be loaded and parsed at startup. Use of a bundler such as Webpack: A bundler can help you optimize your code by reducing the size of your JavaScript files, combining multiple files into one, and more. Use of caching: You can cache the data and components that are frequently used in your application to avoid fetching the same data over and over. Use of efficient algorithms and data structures: In order to keep your application fast, it's important to use algorithms and data structures that are optimized for performance. Regular performance monitoring and profiling: Regular performance monitoring and profiling can help you identify performance bottlenecks and areas for improvement in your code. Use of optimization techniques such as memoization: By using techniques such as memoization, you can reduce the number of unnecessary re-renders and computations in your application, improving its overall performance.

What are the components in React?

Components are the building blocks of any React application, and a single app usually consists of multiple components. A component is essentially a piece of the user interface. It splits the user interface into independent, reusable parts that can be processed separately. There are two types of components in React: functional and class components

what are components?

Components are the building blocks of any React application, and a single app usually consists of multiple components. It splits the user interface into independent, reusable parts that can be processed separately.

What is the difference between a connected component and a component in React-Redux?

Connected components are higher-order components that are wrapped around plain components to provide them access to the Redux store. Connected components are used to access the state of the store and dispatch actions. plain components are used to manage UI elements and local component state.

what's a hook in react?

Hooks are a feature in React that allows us to add state and other React features to functional components. They were introduced in React 16.8 and have since become a popular way to manage state and side effects in functional components. Hooks are named functions that start with the word use and allow us to reuse stateful logic across components without having to write a class component.

How do you handle security in a React application?

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.

What is the use of render() in React?

It is required for each component to have a render() function. This function returns the HTML, which is to be displayed in the component. If you need to render more than one element, all of the elements must be inside one parent tag like <div>, <form>. in functional components, render is performed at the "Root".

Explain the concept of a Middleware in Redux.

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. It allows you to extend the store's behavior without modifying the store itself. Middlewares are applied using the applyMiddleware method and can be composed together to achieve a desired behavior. When an action is dispatched, it passes through each middleware in the order they were composed, giving the middleware an opportunity to interact with the action before it reaches the store. This provides a way to manipulate actions and state, and to perform complex actions that can span multiple actions.

How do you handle browser compatibility in a React application?

Polyfills: To support older browsers, you can use polyfills, which are JavaScript libraries that emulate missing features in older browsers. Browser detection: You can use libraries like browser-detect to detect the user's browser and its version, and adjust your code accordingly. Feature detection: Instead of relying on browser detection, you can use feature detection to check if a specific feature is supported by the user's browser before using it. CSS Reset: You can use CSS resets like normalize.css to make sure that all browsers display the styles in a consistent way. Testing: Regular testing in different browsers and devices is essential to catch any compatibility issues early in the development process.

How do you handle data validation in a React application?

PropTypes: React provides a built-in library called PropTypes that allows you to specify the expected data types for your component's props. 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. 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. 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.

What are props in React?

Props are short for Properties. It is a React built-in object that stores the value of attributes of a tag and works similarly to HTML attributes. Props provide a way to pass data from one component to another component. Props are passed to the component in the same way as arguments are passed in a function.

What are Pure Components?

Pure components are the simplest and fastest components which can be written. They can replace any component which only has a render(). These components enhance the simplicity of the code and performance of the application.

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. This keeps the URL in sync with data that's being displayed on the web page. It maintains a standardized structure and behavior and is used for developing single page web applications. React Router has a simple API.

What are forms in React?

React employs forms to enable users to interact with web applications. Using forms, users can interact with the application and enter the required information whenever needed. Form contain certain elements, such as text fields, buttons, checkboxes, radio buttons, etc Forms are used for many different tasks such as user authentication, searching, filtering, indexing, etc

What are the limitations of React?

React is just a library, not a full-blown framework Its library is very large and takes time to understand It can be little difficult for the novice programmers to understand Coding gets complex as it uses inline templating and JSX

describe Reacts performance

React uses virtual DOM, which makes web applications perform faster. Virtual DOM compares its previous state and updates only those components in the real DOM, whose states have changed, rather than updating all the components — like conventional web applications.

explain data binding in React

React's one-way data binding keeps everything modular and fast. A unidirectional data flow means that when designing a React app, you often nest child components within parent components.

What do you understand by refs in React?

Refs is the short hand for References in React. It is an attribute which helps to store a reference to a particular React element or component, which will be returned by the components render configuration function. we use useRef to access the DOM as its inappropriate to access it directly through methods such as document.getElementById('id')

What are the three principles that Redux follows?

Single source of truth: The state of the entire application is stored in an object/ state tree within a single store. The single state tree makes it easier to keep track of changes over time and debug or inspect the application. State is read-only: The only way to change the state is to trigger an action. An action is a plain JS object describing the change. Just like state is the minimal representation of data, the action is the minimal representation of the change to that data. Changes are made with pure functions: In order to specify how the state tree is transformed by actions, you need pure functions. Pure functions are those whose return value depends solely on the values of their arguments.

what's the virtual DOM?

a lightweight representation in React of the real DOM in the memory, and that is known as the virtual DOM. When the state of an object changes, virtual DOM changes only that object in the real DOM, rather than updating all the objects.

how do you create a React app?

build using CLI(command line interface) using create-react-app(deprecated), or using vite (npm create vite@latest), or next.js(npx create-next-app@latest)

Explain the lifecycle methods of React components in detail.

componentWillMount() - Executed just before rendering takes place both on the client as well as server-side. componentDidMount() - Executed on the client side only after the first render. componentWillReceiveProps() - Invoked as soon as the props are received from the parent class and before another render is called. shouldComponentUpdate() - Returns true or false value based on certain conditions. If you want your component to update, return true else return false. By default, it returns false. componentWillUpdate() - Called just before rendering takes place in the DOM. componentDidUpdate() - Called immediately after rendering takes place. componentWillUnmount() - Called after the component is unmounted from the DOM. It is used to clear up the memory spaces.

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

use the useEffect hook in combination with fetch or a library like axios to load data in a component after it has been rendered. allows you to synchronize a component with an external system, such as a server, by running a side effect (the data loading) after the component has rendered. The hook takes a callback function that contains the effect, and an array of dependencies. Another way is to use a library like redux-thunk or redux-saga to handle the async request and store the data in the store/state. These libraries provide an easy way to handle async actions and keep the component state clean.

How do you implement state in React?

through useState, Redux, useContext

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. It has a type property that defines the type of action being performed, and a payload property that provides any additional data needed to perform the action. Actions are dispatched from the application to the Redux store, which then passes the action to the reducers. 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. The reducer is responsible for handling the actions and updating the state accordingly. It should not perform any side-effects, such as making API calls, but should instead only return the next state. In summary, actions describe what should change, while reducers define how the state should change in response to the actions.

What is an arrow function and how is it used in React?

An arrow function is a short way of writing a function to React. It is unnecessary to bind 'this' inside the constructor when using an arrow function. This prevents bugs caused by the use of 'this' in React callbacks.

what's an event in React?

An event is an action that a user or system may trigger, such as pressing a key, a mouse click, etc. React events are named using camelCase, rather than lowercase in HTML. With JSX, you pass a function as the event handler, rather than a string in HTML.

Why can't browsers read JSX?

Browsers can only read JavaScript objects but JSX in not a regular JavaScript object. Thus to enable a browser to read JSX, first, we need to transform JSX file into a JavaScript object using JSX transformers like Babel and then pass it to the browser.

What are the differences between class and functional components?

Class Components: can hold or manage state directly, complex as compared to functional component, works with all lifecycle methods Functional Components: can hold or manage state via the use of Hooks, redux, or useContext. simple and easy to understand, doesn't work with lifecycle methods

What can you do with HOC?

Code reuse, logic and bootstrap abstraction Render High jacking State abstraction and manipulation Props manipulation

In React, everything is a component." Explain.

Components are the building blocks of a React application's UI. These components split up the entire UI into small independent and reusable pieces. Then it renders each of these components independent of each other without affecting the rest of the UI.

What do you know about controlled and uncontrolled components?

Controlled components: don't maintain state, data controlled by parent component, take in current values through props and then notify the changes via callbacks Uncontrolled components: maintain their own state, data is controlled by the DOM, refs are used to get their current values

What were the major problems with MVC framework?

DOM manipulation was very expensive Applications were slow and inefficient There was huge memory wastage Because of circular dependencies, a complicated model was created around models and views

How do you handle code splitting in a React application?

Dynamic Imports: Dynamic imports allow you to load a component lazily only when it is needed. This is done using the import() syntax and provides a way to split code into smaller chunks that can be loaded on demand.

What is the purpose of render() in React?

Each React component must have a render() mandatorily. It returns a single React element which is the representation of the native DOM component. If more than one HTML element needs to be rendered, then they must be grouped together inside one enclosing tag such as <form>, <group>,<div> etc (functional components are all enclosed in an index.js file). This function must be kept pure i.e., it must return the same result each time it is invoked.

What are Higher Order Components(HOC)?

Higher Order Component is an advanced way of reusing the component logic. Basically, it's a pattern that is derived from React's compositional nature. HOC are custom components which wrap another component within it. They can accept any dynamically provided child component but they won't modify or copy any behavior from their input components. You can say that HOC are 'pure' components.

what is jsx?

JSX is a shorthand for JavaScript XML. This is a type of file used by React which utilizes the expressiveness of JavaScript along with HTML like template syntax. This makes the HTML file really easy to understand. This file makes applications robust and boosts its performance.

How do you handle data persistence in a React application?

Local storage: This allows you to store key-value pairs in the browser's local storage, which can be retrieved even after the user closes the browser or restarts their device. Cookies: Cookies are small pieces of data that are stored in the user's browser and can be accessed by the website on subsequent visits. IndexedDB: It's a low-level API for client-side storage of large amounts of structured data, including files/blobs. Web SQL Database: This is a deprecated technology for storing data in a client-side database using SQL. Server-side storage: You can also store data on a remote server using an API or a database such as MySQL, MongoDB, etc. Redux or useContext: State management libraries like Redux be used to manage and persist application state across different components and sessions.

what is React?

React is a front-end JavaScript library developed by Facebook in 2011. It follows the component based approach which helps in building reusable UI components. It is used for developing complex and interactive web and mobile UI. Even though it was open-sourced only in 2015, it has one of the largest communities supporting it.

explain performance in React

React updates only those components that have changed, rather than updating all the components at once. This results in much faster web applications

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

Static Component, does not change function welcome(props) { return <h1>Hello, {props.name}</h1>; } Dynamic Component, change its properties, state or behavior based on interactions with the user or events that occur within the application. A dynamic component is typically defined using a class component or a functional component with the useState or useEffect Hooks.

What are the components of Redux?

Store: Holds the state of the application. Action: The source information for the store(have type and payload). Reducer: Specifies how the application's state changes in response to actions sent to the store.

what are class components?

These types of components can hold and manage their own state and have a separate render method to return JSX on the screen. They are also called Stateful components as they can have a state.

How do you modularize code in React?

We can modularize code by using the export and import properties. They help in writing the components separately in different files. If an element is getting reused often such as an input or button, it should probably be in a component of its own.

How do you update the state of a component?

We can update the state of a component by using the built-in 'setState()' method redux: by dispatching an action to change the state in the redux store useContext: by settings the state within the context provider wrapper using useState

how do you create an event in React?

create a function, assign said function to an event on the html element within the jsx file such as an onClick, onMouseMove, onLoad, onError

How do you create forms in React?

create form element, provide action(url to submit to) and method(get, put, delete, post) to communicate with api. if an input form, provide input fields, otherwise can also be used for deleting which requires no input element unless desired for confirmation.

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. It involves caching the results of a component's render so that if the inputs (props) to the component do not change, the cached result can be reused, instead of re-computing the result. React provides a built-in hook called useMemo for implementing memoization. useMemo takes a function and an array of dependencies as arguments and returns a memoized value. The function is re-executed only if one or more of the dependencies have changed.

How is React different from React Native?

react is for web apps (css, html), native is for mobile (ios, android) no css or html

How do you style React components?

Inline Styling : style={{color:"blue"}} CSS styleSheets via classes or ids CSS modules: ensures no naming conflicts because it's only accessible by the component that imported it. <h1 class={style.header}>header</h1> CSS frameworks: tailwind, bootstrap,

advantages of React

It increases the application's performance It can be conveniently used on the client as well as server side Because of JSX, code's readability increases React is easy to integrate with other frameworks like Meteor, Angular, etc Using React, writing UI test cases become extremely easy

Why do we need to React Router?

It maintains consistent structure and behavior and is used to develop single-page web applications. Enables multiple views in a single application by defining multiple routes in the React application.

what are the features of React?

It uses the virtual DOM instead of the real DOM. It uses server-side rendering. It follows uni-directional data flow or data binding.

Explain how lists work in React

* We create lists in React as we do in regular JavaScript. Lists display data in an ordered format The traversal of lists is done using the map() function

How do you implement React routing?

<BrowserRouter or Hashrouter> enclosing=> <Routes> enclosing => <Route path="/" element={<component/>} />

What is a higher-order component in React?

A higher-order component acts as a container for other components. This helps to keep components simple and enables re-usability. They are generally used when multiple components have to use a common logic.

What are the advantages of Redux?

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.

How is React routing different from conventional routing?

ReactRouting: single html page, user navigates multiple views in the same file, page does not refresh since it's a single file, improved performance Conventional routing(html file): each view is in a new html file, user navigates multiple files for each view, page refreshes every time user navigates, slower performance.

Explain the role of Reducer.

Reducers are pure functions which specify how the application's state changes in response to an ACTION. Reducers work by taking in the previous state and action, and then it returns a new state. It determines what sort of update needs to be done based on the type of the action, and then returns new values. It returns the previous state as it is, if no work needs to be done.

What is Redux?

Redux is an open-source, JavaScript library used to manage the application state. React uses Redux to build the user interface. It is a predictable state container for JavaScript applications and is used for the entire application's state management. Useful in larger applications vs useContext better in small, and useState best to use in smallest applications

What is Redux?

Redux is one of the most trending libraries for front-end development in today's marketplace. It is a predictable state container for JavaScript applications and is used for the entire applications state management. Applications developed with Redux are easy to test and can run in different environments showing consistent behavior.

What do you understand by "Single source of truth"?

Redux uses 'Store' for storing the application's entire state at one place. So all the component's state are stored in the Store and they receive updates from the Store itself. The single state tree makes it easier to keep track of changes over time and debug or inspect the application. Redux only uses a single Store

How do you handle accessibility in a React application?

Semantic HTML: Use semantic HTML elements, such as <button>, <nav>, and <header>, to clearly define the structure and purpose of your content. Accessible Props: Use accessible props, such as aria-label, role, and tabIndex, to provide additional information to assistive technologies, such as screen readers. Keyboard Navigation: Ensure that all functionality can be accessed using a keyboard, and that keyboard focus is managed correctly. Color Contrast: Make sure that the contrast between the text and the background is high enough to be readable by people with color blindness or low vision. Alternative Text: Provide alternative text for images, videos, and other non-text elements to ensure that information is accessible to screen reader users. Screen Reader Testing: Test your application with screen readers and other assistive technologies to identify and fix any accessibility issues.

How do you handle server-side rendering in a React application?

Server-side rendering (SSR) in React involves rendering your React components on the server and sending the resulting HTML to the client. This provides a number of benefits, including improved performance and search engine optimization (SEO). To implement SSR in a React application, you can use a library like Next.js or Razzle, which provide an easy-to-use framework for handling SSR.

What are the differences between state and props?

State: holds info about components, mutable, can be changed, child components cannot access (top to bottom, not bottom to top). stateless components cannot have state Props: allows to pass data from one components to other components as an argument, immutable, read only, child component can access. stateless components can have props.

What are synthetic events in React?

Synthetic events combine the response of different browser's native events into one API, ensuring that the events are consistent across different browsers. The application is consistent regardless of the browser it is running in. such as preventDefault() in e.preventDefault(), or an input field changing when populating searches

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. It allows you to pass the store down to your components using context, without having to manually pass it down as props through every level of the component tree. By using the Provider, you ensure that all of your components can subscribe to the store and dispatch actions to modify its state. In other words, the Provider acts as a bridge between your React components and your Redux store, making the store accessible to all components in your application.

describe data flow in React

Unidirectional data flow: React follows a unidirectional data flow. This means that when designing a React app, we often nest child components within parent components. And since the data flows in a single direction, it becomes easier to debug errors and know where the problem occurs in an application at the moment.

How do you handle optimization in a large React application?

Use the React Developer Tools to identify and fix performance bottlenecks. The React Developer Tools allow you to track the performance of individual components and identify which components are causing the most re-renders. Use PureComponent and memo instead of Components. These are more efficient alternatives to React.Component that only re-render when props or state have changed. Use the useMemo hook to memoize expensive calculations. This hook allows you to cache the results of expensive calculations and only recalculate them when the inputs have changed. Code splitting: Code splitting is a technique where you split your application into smaller chunks of code that are loaded on demand. This can greatly improve the performance of your application. Optimize the loading time of your application by using techniques like code minification, compression, and caching.

What do you understand by Virtual DOM? Explain its works.

Virtual DOM works in three simple steps. 1.Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation. 2.Then the difference between the previous DOM representation and the new one is calculated. 3.Once the calculations are done, the real DOM will be updated with only the things that have actually changed.

List some of the cases when you should use Refs.

When you need to manage focus, select text or media playback To trigger imperative animations Integrate with third-party DOM libraries

What is the difference between a React component and a React class?

class components are defined as JavaScript classes that extend the React.Component class, have a render method, and can have additional lifecycle methods and state. functional components are defined as plain JavaScript functions that return the component's JSX markup, and that they can use state and other React features with hooks. functional components are generally simpler and easier to read, while class components offer more features and flexibility

How can you embed two or more components into one?

importing component and putting it within the JSX html portion <Component1/> <Component2/> so long as it's properly imported it will show with no issues.

How do you handle events in React?

via an event handler which is a callback function that is attached to an element in the UI, and it's executed when a specified event occurs. For example, to handle a click event on a button, you would define a function in your React component that updates the component's state, and then attach that function to the button as an onClick event handler.