Top 50+ React Interview Questions and Answers

1. What are functional hooks? what is their work? 

Functional hooks in React are special functions that let you “hook into” React  state and lifecycle features from function components. Prior to hooks, these  features were only accessible in class components. Hooks allow you to use state,  lifecycle methods, and other React features without writing a class. 

Common React Hooks 

useState: 

Purpose: Manages state in a functional component. 

Usage: const [state, setState] = useState(initialState); 

How it works: useState returns a state variable and a function to update it. The  initial state is passed as an argument, and React keeps track of the state  between re-renders. 

useEffect: 

Purpose: Performs side effects in function components (e.g., data fetching,  subscriptions). 

Usage: useEffect(() => { /* side effect code */ return () => { /* cleanup code */ }; },  [dependencies]); 

How it works: useEffect runs after every render by default. You can control when  it runs by providing a dependencies array. If certain values in the array change,  the effect runs again. Cleanup can be done by returning a function inside the  effect. 

useContext: 

Purpose: Accesses React context data. 

Usage: const value = useContext(MyContext); 

How it works: useContext accepts a context object (returned from  React.createContext) and returns the current context value, allowing you to  subscribe to context changes. 

useReducer:

Purpose: Manages state using a reducer function, suitable for complex state  logic. 

Usage: const [state, dispatch] = useReducer(reducer, initialState); 

How it works: useReducer takes a reducer function and an initial state, returning  the current state and a dispatch function. The dispatch function is used to send  actions to the reducer to update the state. 

useCallback: 

Purpose: Memoizes a function to prevent its recreation on every render. 

Usage: const memoizedCallback = useCallback(() => { /* function code */ },  [dependencies]); 

How it works: useCallback returns a memoized version of the callback function  that only changes if one of the dependencies has changed. 

useMemo: 

Purpose: Memoizes a value to prevent expensive calculations on every render. 

Usage: const memoizedValue = useMemo(() => computeExpensiveValue(a, b),  [a, b]); 

How it works: useMemo returns a memoized value that only recalculates when  one of the dependencies changes. 

useRef: 

Purpose: Creates a mutable object that persists across renders. Usage: const refContainer = useRef(initialValue); 

How it works: useRef returns a ref object with a current property. Unlike state,  changing current does not cause a re-render. 

useLayoutEffect: 

Purpose: Similar to useEffect, but fires synchronously after all DOM mutations. 

Usage: useLayoutEffect(() => { /* effect code */ return () => { /* cleanup code */ };  }, [dependencies]); 

How it works: useLayoutEffect runs synchronously after DOM updates, blocking  the browser’s paint until the effect finishes.

Working of Hooks 

Hooks rely on the order in which they are called. They must be called at the top  level of the functional component and not inside loops, conditions, or nested  functions to maintain the correct state and effect order. This rule ensures that  React can properly associate the hooks with the component. 

Here’s a simple example demonstrating useState and useEffect: import React, { useState, useEffect } from ‘react’; 

function ExampleComponent() { 

 const [count, setCount] = useState(0); 

 useEffect(() => { 

 document.title = `You clicked ${count} times`; 

 // Cleanup function (if necessary) 

 return () => { 

 // Cleanup code here 

 }; 

 }, [count]); // Effect depends on `count` 

 return ( 

 <div> 

 <p>You clicked {count} times</p> 

 <button onClick={() => setCount(count + 1)}>Click me</button>  </div> 

 ); 

}

export default ExampleComponent; 

In this example, useState initializes a state variable count, and useEffect updates  the document title every time count changes. The dependencies array [count]  ensures the effect only runs when count changes. 

Summary 

React hooks provide a powerful way to use state and lifecycle features in function  components, making them a versatile alternative to class components. The main hooks like useState, useEffect, and useContext cover most common use cases,  while hooks like useReducer, useCallback, useMemo, and useRef handle more  specific needs. By following the rules of hooks, developers can create clean,  efficient, and reusable functional components. 

2. What is useMemo hook? 

The useMemo hook in React is used to memoize a computed value. This means  that useMemo will only recompute the memoized value when one of its  dependencies has changed. This can optimize performance by avoiding  expensive calculations on every render. 

Example 

Here’s an example to illustrate how useMemo works: 

import React, { useState, useMemo } from ‘react’; 

function ExpensiveComputationComponent({ num }) { 

 const computeExpensiveValue = (number) => { 

 console.log(‘Computing…’); 

 let total = 0; 

 for (let i = 0; i < 1000000000; i++) { 

 total += number; 

 }

 return total; 

 }; 

 const memoizedValue = useMemo(() => computeExpensiveValue(num), [num]); 

 return ( 

 <div> 

 <h2>Computed Value: {memoizedValue}</h2> 

 </div> 

 ); 

} 

function App() { 

 const [num, setNum] = useState(1); 

 const [text, setText] = useState(”); 

 return ( 

 <div> 

 <ExpensiveComputationComponent num={num} /> 

 <button onClick={() => setNum(num + 1)}>Increment Number</button> 

 <input value={text} onChange={(e) => setText(e.target.value)}  placeholder=”Type something…” /> 

 </div> 

 ); 

}

export default App; 

How It Works 

Memoization: In the example above, computeExpensiveValue(num) is an  expensive calculation. By using useMemo, React will only call this function when  num changes. If num stays the same between renders, the memoized value is  returned without recomputing. 

Dependencies Array: The second argument to useMemo is the dependencies  array [num]. This tells React to recompute the memoized value only if num  changes. If num does not change, useMemo returns the previously memoized  value, avoiding the expensive computation. 

Performance Optimization: This optimization can be crucial in scenarios where  the calculation is complex and the component re-renders frequently. By avoiding  unnecessary computations, useMemo helps keep your app performant. 

When to Use useMemo 

Expensive Calculations: When you have a function that performs expensive  calculations and you want to avoid recomputing it unnecessarily. 

Referential Equality: When you want to ensure that the same reference is  returned for objects or arrays between renders if their contents have not  changed, which can be useful for avoiding unnecessary re-renders of child  components or expensive operations in dependency arrays of other hooks. 

When Not to Use useMemo

Premature Optimization: Do not use useMemo to prematurely optimize your  code. First, identify performance bottlenecks and then apply useMemo where  necessary. 

Lightweight Calculations: For simple calculations that are not performance intensive, useMemo might add unnecessary complexity without providing  significant benefits. 

Summary 

The useMemo hook is a powerful tool for optimizing performance in React  applications by memoizing the results of expensive calculations and returning the  memoized result unless the dependencies have changed. This can help in  avoiding unnecessary computations and keeping your application running  smoothly. However, it should be used judiciously and only when there’s a clear  performance benefit. 

3. What is the use of usecallback? 

The useCallback hook in React is used to memoize callback functions. This  means that useCallback will return a memoized version of the callback function  that only changes if one of its dependencies has changed. This can be useful to  optimize performance by preventing unnecessary re-creations of functions,  especially when passing them as props to child components that rely on  referential equality to avoid unnecessary renders. 

Syntax 

const memoizedCallback = useCallback(() => { 

 // Function logic here 

}, [dependencies]); 

Parameters 

callback: The function to be memoized.

dependencies: An array of dependencies that the memoized function depends  on. 

Example 

Here’s an example to illustrate how useCallback works: 

import React, { useState, useCallback } from ‘react’; 

function ChildComponent({ onButtonClick }) { 

 console.log(‘ChildComponent rendered’); 

 return ( 

 <button onClick={onButtonClick}>Click me</button> 

 ); 

} 

function ParentComponent() { 

 const [count, setCount] = useState(0); 

 const handleClick = useCallback(() => { 

 console.log(‘Button clicked’); 

 }, []); 

 return ( 

 <div> 

 <p>Count: {count}</p> 

 <button onClick={() => setCount(count + 1)}>Increment</button>  <ChildComponent onButtonClick={handleClick} /> 

 </div> 

 );

} 

export default ParentComponent; 

How It Works 

Memoization: In the example above, handleClick is memoized using  useCallback. This means that handleClick will always refer to the same function  instance unless its dependencies change (in this case, it has no dependencies,  so it never changes). 

Referential Equality: When handleClick is passed as a prop to ChildComponent,  ChildComponent will not re-render unnecessarily because the onButtonClick prop  does not change between renders. If handleClick was re-created on every  render, ChildComponent would re-render every time ParentComponent re renders, which could lead to performance issues. 

When to Use useCallback 

Optimization: Use useCallback to prevent unnecessary re-creations of functions,  especially when passing functions as props to memoized child components. This  can help optimize rendering performance. 

Referential Equality: Use it to ensure that functions maintain referential equality  between renders, which can be important for avoiding unnecessary updates in  dependency arrays of other hooks like useEffect, useMemo, or useLayoutEffect. 

When Not to Use useCallback 

Simple Functions: For functions that do not have a significant impact on  performance or are not passed as props to child components, using useCallback  might add unnecessary complexity. 

Premature Optimization: Avoid using useCallback for premature optimization.  First, identify performance bottlenecks and then apply useCallback where  necessary. 

Summary

The useCallback hook is a useful tool for optimizing performance in React  applications by memoizing callback functions and ensuring they maintain  referential equality between renders. This can help prevent unnecessary re renders of child components and improve overall application efficiency. However,  it should be used judiciously and primarily in cases where function re-creation  impacts performance or correctness. 

4. What are the class based component life cycle methods? 

Class-based components in React have several lifecycle methods that allow  developers to hook into different stages of a component’s lifecycle: mounting,  updating, and unmounting. Additionally, there are methods for error handling.  Here’s a comprehensive overview of these lifecycle methods: 

Mounting Phase 

These methods are called when an instance of a component is being created and  inserted into the DOM. 

constructor(): 

Purpose: Initialize state and bind event handlers. 

Usage: 

constructor(props) { 

 super(props); 

 this.state = { /* initial state */ }; 

 // Bind event handlers if necessary 

} 

static getDerivedStateFromProps(props, state): 

Purpose: Sync state with props. Called right before rendering, both on initial  mount and subsequent updates. 

Usage:

static getDerivedStateFromProps(props, state) { 

 if (props.someValue !== state.someValue) { 

 return { 

 someValue: props.someValue, 

 }; 

 } 

 return null; // No state update needed 

} 

render(): 

Purpose: Describe what the UI should look like. 

Usage: 

render() { 

 return ( 

 <div>{this.state.someValue}</div> 

 ); 

} 

componentDidMount(): 

Purpose: Perform side effects such as data fetching, subscriptions, etc., after the  component has been inserted into the DOM. 

Usage: 

componentDidMount() { 

 // Fetch data or set up subscriptions 

}

Updating Phase 

These methods are called when a component is being re-rendered due to  changes in props or state. 

static getDerivedStateFromProps(props, state): 

(Same as in the mounting phase, called on updates as well.) shouldComponentUpdate(nextProps, nextState): 

Purpose: Optimize performance by preventing unnecessary re-renders. Usage: 

shouldComponentUpdate(nextProps, nextState) { 

 return nextProps.someValue !== this.props.someValue; } 

render(): 

(Same as in the mounting phase.) 

getSnapshotBeforeUpdate(prevProps, prevState): 

Purpose: Capture information from the DOM before it potentially changes. Usage: 

getSnapshotBeforeUpdate(prevProps, prevState) { 

 // Capture some information from the DOM 

 return null; 

} 

componentDidUpdate(prevProps, prevState, snapshot):

Purpose: Perform operations after the component has been updated. Usage: 

componentDidUpdate(prevProps, prevState, snapshot) { 

 // Operate on the DOM or perform additional updates 

} 

Unmounting Phase 

These methods are called when a component is being removed from the DOM. 

componentWillUnmount(): 

Purpose: Clean up operations such as invalidating timers, canceling network  requests, or cleaning up subscriptions. 

Usage: 

componentWillUnmount() { 

 // Clean up operations 

} 

Error Handling 

These methods are called when there is an error during rendering, in a lifecycle  method, or in the constructor of any child component. 

static getDerivedStateFromError(error): 

Purpose: Render a fallback UI after an error has been thrown. Usage: 

static getDerivedStateFromError(error) { 

 return { hasError: true };

} 

componentDidCatch(error, info): 

Purpose: Log error information. 

Usage: 

componentDidCatch(error, info) { 

 // Log the error to an error reporting service 

} 

Summary 

Class-based component lifecycle methods in React provide hooks for managing  the component’s lifecycle. These methods allow developers to initialize state,  fetch data, handle updates, and clean up resources, giving fine-grained control  over the component’s behavior. By using these lifecycle methods appropriately,  you can ensure that your React components perform optimally and handle side  effects correctly. 

5. How do you use componentDidMount()? 

The componentDidMount lifecycle method is used in React class components to  perform actions after the component has been rendered to the DOM. This is a  common place to initiate API calls, set up subscriptions, or perform other side  effects that require the component to be present in the DOM. 

How to Use componentDidMount 

To use componentDidMount, you need to define it within a class component.  Here is a step-by-step guide and an example: 

Define a Class Component: Create a class component by extending  React.Component.

Initialize State: If needed, initialize the state in the constructor. 

Define the componentDidMount Method: Implement componentDidMount to  perform any necessary side effects. 

Update State or Perform Side Effects: Inside componentDidMount, you can  update the component’s state or perform other side effects. 

Example 

Here’s an example of a class component that fetches data from an API when it  mounts and displays it: 

import React, { Component } from ‘react’; 

class DataFetcher extends Component { 

 constructor(props) { 

 super(props); 

 this.state = { 

 data: null, 

 loading: true, 

 error: null, 

 }; 

 } 

 componentDidMount() { 

 // Perform the data fetching in componentDidMount 

 fetch(‘https://api.example.com/data’)

 .then(response => { 

 if (!response.ok) { 

 throw new Error(‘Network response was not ok’);  } 

 return response.json(); 

 }) 

 .then(data => { 

 this.setState({ data, loading: false });  }) 

 .catch(error => { 

 this.setState({ error, loading: false });  }); 

 } 

 render() { 

 const { data, loading, error } = this.state; 

 if (loading) { 

 return <div>Loading…</div>; 

 } 

 if (error) { 

 return <div>Error: {error.message}</div>;  }

 return ( 

 <div> 

 <h1>Fetched Data</h1> 

 <pre>{JSON.stringify(data, null, 2)}</pre> 

 </div> 

 ); 

 } 

} 

export default DataFetcher; 

Explanation 

Constructor: The constructor initializes the component’s state with data as null,  loading as true, and error as null. 

componentDidMount: 

Data Fetching: The fetch method is used to request data from the API. 

Handling Response: The response is checked to ensure it’s okay, then parsed to  JSON. 

Updating State: The state is updated with the fetched data and loading is set to  false. 

Error Handling: If an error occurs, the state is updated with the error and loading  is set to false. 

render: 

Loading State: If loading is true, a loading message is displayed. Error State: If there’s an error, an error message is displayed.

Data Display: If data is successfully fetched, it’s displayed in a <pre> tag,  formatted as JSON. 

Summary 

The componentDidMount method is ideal for performing actions that require the  component to be fully rendered in the DOM, such as data fetching, setting up  subscriptions, or initializing third-party libraries. By using this method, you ensure  that such actions occur after the initial render, providing a seamless experience  for the user. 

6. What are higher order components? 

Higher-Order Components (HOCs) in React are advanced techniques for reusing  component logic. An HOC is a function that takes a component and returns a  new component, typically enhancing or augmenting the original component with  additional functionality or data. HOCs are a pattern that emerges from React’s  compositional nature. 

Definition 

A Higher-Order Component is a function that: 

Takes a component: The HOC receives a component as an argument. 

Returns a new component: It returns a new component that wraps the original  component and adds additional functionality. 

Syntax 

const EnhancedComponent = higherOrderComponent(WrappedComponent); Example 

Let’s create an HOC that provides logging functionality to any component. Logging HOC 

import React from ‘react’; 

// Higher-Order Component that logs when the component mounts and unmounts

function withLogging(WrappedComponent) { 

 return class extends React.Component { 

 componentDidMount() { 

 console.log(`Component ${WrappedComponent.name} mounted`);  } 

 componentWillUnmount() { 

 console.log(`Component ${WrappedComponent.name} will unmount`);  } 

 render() { 

 return <WrappedComponent {…this.props} />; 

 } 

 }; 

} 

// Example component 

class MyComponent extends React.Component { 

 render() { 

 return <div>Hello, {this.props.name}!</div>; 

 } 

} 

// Enhance MyComponent with withLogging HOC 

const MyComponentWithLogging = withLogging(MyComponent);

// Usage in another component 

function App() { 

 return <MyComponentWithLogging name=”John” />; 

} 

export default App; 

Explanation 

withLogging HOC: 

Logs messages when the component mounts and unmounts. 

Wraps the WrappedComponent and returns a new component that includes the  logging functionality. 

Props Forwarding: 

The HOC forwards all received props to the wrapped component using  {…this.props}. 

Common Use Cases 

Code Reuse: Share common functionality (e.g., logging, data fetching) across  multiple components. 

Conditional Rendering: Render components based on certain conditions (e.g.,  authentication). 

Enhancement: Add new behaviors or properties to existing components. More Complex Example 

Consider an HOC that adds authentication logic to a component: Authentication HOC

import React from ‘react’; 

// Simulated authentication check 

function isAuthenticated() { 

 return true; // Assume user is authenticated for this example } 

function withAuth(WrappedComponent) { 

 return class extends React.Component { 

 render() { 

 if (!isAuthenticated()) { 

 return <div>Please log in to view this content.</div>;  } 

 return <WrappedComponent {…this.props} />; 

 } 

 }; 

} 

// Example component 

class Dashboard extends React.Component { 

 render() { 

 return <div>Welcome to your dashboard, {this.props.user}!</div>;  } 

}

// Enhance Dashboard with withAuth HOC 

const DashboardWithAuth = withAuth(Dashboard); 

// Usage in another component 

function App() { 

 return <DashboardWithAuth user=”John Doe” />; 

} 

export default App; 

Explanation 

withAuth HOC: 

Checks if the user is authenticated. 

If not, renders a login prompt; otherwise, renders the wrapped component. Props Forwarding: 

Forwards props to the Dashboard component. 

Best Practices 

Avoid Mutating the Original Component: HOCs should not modify the wrapped  component. Instead, they should return a new component. 

Static Methods: If the wrapped component has static methods, copy them to the  enhanced component. 

Display Name: Set a descriptive display name for debugging purposes. function withLogging(WrappedComponent) { 

 class WithLogging extends React.Component { 

 componentDidMount() {

 console.log(`Component ${WrappedComponent.name} mounted`);  } 

 componentWillUnmount() { 

 console.log(`Component ${WrappedComponent.name} will unmount`);  } 

 render() { 

 return <WrappedComponent {…this.props} />; 

 } 

 } 

 WithLogging.displayName = `WithLogging(${WrappedComponent.displayName  || WrappedComponent.name || ‘Component’})`; 

 return WithLogging; 

} 

Summary 

Higher-Order Components (HOCs) are a pattern in React for reusing component  logic by wrapping existing components with additional functionality. They enable  code reuse, separation of concerns, and enhanced functionality without  modifying the original component. HOCs are widely used for tasks like logging,  authentication, and more, making code more modular and maintainable. 

7. Have you used Context API? What is the use of it?

The Context API in React is a powerful feature that allows you to share state and  functionality between components without having to pass props down manually  through each level of the component tree. This is particularly useful for global  data that many components need to access, such as themes, user  authentication, or settings. 

Key Concepts 

Context Creation: A context is created using React.createContext(). 

Provider: The context provider component, which holds the data and makes it  available to all nested components. 

Consumer: Components that need the context data use a consumer or the  useContext hook. 

Example Use Case: Theme Context 

Here’s a step-by-step example of how to use the Context API to manage and  access theme data across a React application. 

Step 1: Create a Context 

import React, { createContext, useState } from ‘react’; 

// Create a context for the theme 

const ThemeContext = createContext(); 

export default ThemeContext; 

Step 2: Create a Provider Component 

javascript 

Copy code 

import React, { useState } from ‘react’; 

import ThemeContext from ‘./ThemeContext’;

// Create a provider component 

const ThemeProvider = ({ children }) => { 

 const [theme, setTheme] = useState(‘light’); 

 // Toggle theme function 

 const toggleTheme = () => { 

 setTheme((prevTheme) => (prevTheme === ‘light’ ? ‘dark’ : ‘light’));  }; 

 return ( 

 <ThemeContext.Provider value={{ theme, toggleTheme }}>  {children} 

 </ThemeContext.Provider> 

 ); 

}; 

export default ThemeProvider; 

Step 3: Use the Provider in Your App 

import React from ‘react’; 

import ReactDOM from ‘react-dom’; 

import App from ‘./App’; 

import ThemeProvider from ‘./ThemeProvider’; 

ReactDOM.render( 

 <ThemeProvider>

 <App /> 

 </ThemeProvider>, 

 document.getElementById(‘root’) 

); 

Step 4: Consume the Context in a Component 

Using the useContext Hook (Functional Component): 

import React, { useContext } from ‘react’; 

import ThemeContext from ‘./ThemeContext’; 

const ThemedComponent = () => { 

 const { theme, toggleTheme } = useContext(ThemeContext); 

 return ( 

 <div style={{ background: theme === ‘light’ ? ‘#fff’ : ‘#333’, color: theme ===  ‘light’ ? ‘#000’ : ‘#fff’ }}> 

 <p>The current theme is {theme}</p> 

 <button onClick={toggleTheme}>Toggle Theme</button>  </div> 

 ); 

}; 

export default ThemedComponent; 

Using the Context Consumer (Class Component): 

import React from ‘react’; 

import ThemeContext from ‘./ThemeContext’;

class ThemedComponent extends React.Component { 

 render() { 

 return ( 

 <ThemeContext.Consumer> 

 {({ theme, toggleTheme }) => ( 

 <div style={{ background: theme === ‘light’ ? ‘#fff’ : ‘#333’, color: theme ===  ‘light’ ? ‘#000’ : ‘#fff’ }}> 

 <p>The current theme is {theme}</p> 

 <button onClick={toggleTheme}>Toggle Theme</button>  </div> 

 )} 

 </ThemeContext.Consumer> 

 ); 

 } 

} 

export default ThemedComponent; 

Advantages of Using Context API 

Avoid Prop Drilling: Context allows you to pass data through the component tree  without having to pass props down manually at every level. 

Global State Management: Context is ideal for managing global state that many  components need to access. 

Cleaner Code: By avoiding prop drilling, your code can be cleaner and easier to  maintain. 

When to Use Context

Global State: Data that needs to be accessible throughout the application, such  as user authentication status, themes, or language settings. 

Theming: Managing UI themes that need to be applied consistently across  various components. 

User Settings: Settings or preferences that are user-specific and need to be  accessed by multiple components. 

When Not to Use Context 

Frequent Updates: If the data in the context is updated very frequently, it can lead  to performance issues because every update will cause all consumers to re render. 

Isolated State: If the state is only needed by a few components, passing props  might be simpler and more efficient. 

Summary 

The Context API in React is a powerful tool for managing global state and  avoiding prop drilling. It provides a way to share values between components  without having to explicitly pass props through every level of the component tree.  Properly using context can make your React application more maintainable and  your code cleaner. However, it should be used judiciously, especially for state  that updates frequently, to avoid potential performance pitfalls. 

8. Already have state management in React, so why go for Redux? 

While React’s built-in state management is powerful and sufficient for many  applications, there are specific scenarios where a state management library like  Redux can provide significant benefits. Here’s why you might choose to use  Redux over React’s built-in state management: 

1. Centralized State Management 

React State Management: 

State is managed at the component level. 

For passing state down the component tree, props are used.

For sharing state across distant components, context or prop drilling is needed. Redux: 

Manages application state in a single, centralized store. 

All components can access the state without passing props through intermediate  components. 

Makes it easier to manage and reason about the state, especially in larger  applications. 

2. Predictable State Changes 

React State Management: 

State updates are handled through component methods and can become  complex as the application grows. 

Redux: 

Enforces a strict unidirectional data flow. 

State changes are made using pure functions called reducers. 

Each action describes what happened, making the state changes predictable and  traceable. 

3. Debugging and DevTools 

React State Management: 

Debugging can be more challenging as state is spread across various  components. 

Redux: 

Redux DevTools provide powerful features like action logging, time travel  debugging, and state inspection. 

Makes it easier to track and debug the application state over time. 4. Middleware for Asynchronous Logic 

React State Management:

Handling asynchronous operations can become scattered and hard to manage,  typically using hooks like useEffect. 

Redux: 

Middleware (such as Redux Thunk or Redux Saga) allows for more structured  handling of asynchronous logic. 

Actions and state transitions can be managed in a centralized and consistent  manner. 

5. Scalability 

React State Management: 

Managing state becomes increasingly complex as the application grows,  especially with deeply nested components. 

Redux: 

Scales well with large applications by keeping state management separate from  UI components. 

Encourages a clear separation of concerns, making the codebase easier to  maintain and scale. 

6. Consistency Across Components 

React State Management: 

Ensuring consistency of state across different parts of the application can be  challenging. 

Redux: 

Single source of truth ensures that state is consistent across all components. 

Makes it easier to implement features that require shared state, like  authentication and theming. 

7. Reusability and Maintainability 

React State Management: 

Reusing state logic across different components can lead to code duplication and  complexity.

Redux: 

Reusable state logic via action creators and reducers. 

Promotes writing reusable, testable, and maintainable code. 

When to Use Redux 

Large-Scale Applications: Applications with a large number of components and  complex state management requirements. 

Complex State Interactions: Scenarios where multiple components need to  interact with the same piece of state. 

Asynchronous State Management: Need for structured handling of complex  asynchronous operations. 

Debugging and Traceability: Applications where debugging and tracing state  changes are crucial. 

Consistency: Ensuring consistent state across the application is essential. When Not to Use Redux 

Small Applications: Simple applications where React’s built-in state management  is sufficient. 

Low Complexity: Applications with simple state management needs and minimal  interactions between components. 

Learning Curve: If the team is not familiar with Redux and the application’s  complexity doesn’t justify the additional learning and setup time. 

Example Scenario 

Consider an e-commerce application where multiple components need access to  the shopping cart state. With React’s state management, you might need to pass  the cart state and actions through multiple levels of components, leading to prop  

drilling and increased complexity. With Redux, you can manage the cart state in a  centralized store and allow any component to access and update the cart directly,  simplifying the state management process. 

Summary

While React’s built-in state management is sufficient for many use cases, Redux  provides a more structured and scalable approach for managing state in complex  and large applications. It offers benefits like centralized state management,  predictable state changes, powerful debugging tools, and middleware for  asynchronous logic, making it a valuable tool in the React ecosystem. 

9. How Redux works? 

Redux is a predictable state container for JavaScript applications, primarily used  with libraries like React or Angular for building user interfaces. It provides a  centralized store to manage the entire application’s state, which ensures that the  state changes are predictable and can be traced throughout the application.  Here’s an overview of how Redux works: 

1. Single Immutable State Tree 

Redux stores the entire application state in a single JavaScript object called the  store. 

This state tree is immutable, meaning it cannot be changed directly. 

To update the state, you dispatch an action, which describes what happened in  the application. 

2. Actions 

Actions are plain JavaScript objects that represent events or user interactions in  the application. 

Each action must have a type property that describes the type of action being  performed. 

Optionally, actions can have additional properties to carry data necessary for the  action. 

const incrementAction = { 

 type: ‘INCREMENT’, 

};

const addTodoAction = { 

 type: ‘ADD_TODO’, 

 payload: { 

 id: 1, 

 text: ‘Learn Redux’, 

 }, 

}; 

3. Reducers 

Reducers are pure functions that specify how the application’s state changes in  response to actions. 

A reducer takes the current state and an action as arguments and returns the  new state. 

const counterReducer = (state = 0, action) => { 

 switch (action.type) { 

 case ‘INCREMENT’: 

 return state + 1; 

 case ‘DECREMENT’: 

 return state – 1; 

 default: 

 return state; 

 } 

}; 

const todosReducer = (state = [], action) => { 

 switch (action.type) { 

 case ‘ADD_TODO’:

 return […state, action.payload]; 

 default: 

 return state; 

 } 

}; 

4. Store 

The store is the object that holds the application state. 

It has methods like getState() to retrieve the current state, dispatch(action) to  trigger state changes, and subscribe(listener) to register callback functions that  are called whenever the state changes. 

import { createStore, combineReducers } from ‘redux’; 

// Combine multiple reducers into a single reducer 

const rootReducer = combineReducers({ 

 counter: counterReducer, 

 todos: todosReducer, 

}); 

// Create the Redux store 

const store = createStore(rootReducer); 

5. Dispatching Actions 

To update the state, you dispatch actions to the store using the dispatch method. 

The store then forwards the action to the reducers, which calculate the new state  based on the action type and payload. 

store.dispatch(incrementAction); 

store.dispatch(addTodoAction);

6. Selectors 

Selectors are functions that extract specific pieces of state from the Redux store. 

They help in decoupling the state structure from the components and provide a  centralized way to access the state. 

const selectCounter = state => state.counter; 

const selectTodos = state => state.todos; 

7. Middleware 

Middleware provides a way to extend Redux with custom functionality. 

It intercepts dispatched actions before they reach the reducers and can perform  asynchronous tasks, logging, routing, and more. 

import { applyMiddleware, createStore } from ‘redux’; 

import thunk from ‘redux-thunk’; 

const store = createStore(rootReducer, applyMiddleware(thunk)); 8. React Integration 

React components can access the Redux store and subscribe to state changes  using the connect function (with class components) or hooks like useSelector and  useDispatch (with functional components). 

Components can dispatch actions to update the state and re-render based on the  changes. 

import { connect } from ‘react-redux’; 

const CounterComponent = ({ counter, increment, decrement }) => (  <div> 

 <p>Count: {counter}</p> 

 <button onClick={increment}>Increment</button> 

 <button onClick={decrement}>Decrement</button>

 </div> 

); 

const mapStateToProps = state => ({ 

 counter: state.counter, 

}); 

const mapDispatchToProps = dispatch => ({ 

 increment: () => dispatch({ type: ‘INCREMENT’ }), 

 decrement: () => dispatch({ type: ‘DECREMENT’ }), 

}); 

export default connect(mapStateToProps,  

mapDispatchToProps)(CounterComponent); 

Summary 

Redux works by maintaining the application state in a single immutable state  tree. Actions describe the changes to the state, reducers specify how the state  changes in response to actions, and the store orchestrates the flow of actions  and state changes. Middleware, selectors, and integration with libraries like  React provide additional functionality and make Redux a powerful state  management solution for JavaScript applications. 

10. Have you used any Middlewares? What is the purpose of using  middlewares? 

Yes, I’ve used middleware in various contexts, including with React. Middleware  generally refers to software that sits between different parts of an application,  processing requests and responses. In the context of React, middleware is most  commonly used with state management libraries like Redux. 

Purpose of Using Middleware in React

Middleware in React applications, particularly with Redux, serves several  important purposes: 

Handling Asynchronous Actions: 

Middleware like redux-thunk or redux-saga allows for managing asynchronous  actions in Redux. Normally, Redux actions are synchronous, but with  middleware, you can handle side effects like API calls, which are inherently  asynchronous. 

redux-thunk: Allows action creators to return a function instead of an action  object. This function can perform asynchronous operations and dispatch actions  when the operations are completed. 

redux-saga: Uses generator functions to manage side effects, providing a more  powerful and declarative way to handle complex asynchronous workflows. 

Logging and Debugging: 

Middleware can be used to log actions and state changes, which helps in  debugging. For example, redux-logger logs every action and the resulting new  state, providing a clear trace of what actions were dispatched and how they  affected the state. 

Error Handling: 

Middleware can catch and handle errors that occur during the dispatching of  actions. This helps in preventing the application from crashing and allows for  graceful error handling and displaying user-friendly error messages. 

Authorization and Access Control: 

Middleware can intercept actions to check user authentication status and  permissions. This ensures that only authorized users can perform certain actions  or access specific parts of the application. 

Batching Actions:

Middleware can aggregate multiple actions into a single action. This can be  useful for performance optimization, ensuring that the state updates only once  after processing a batch of actions. 

Cross-Cutting Concerns: 

Middleware can address concerns that affect multiple parts of the application,  such as analytics (tracking user actions) or feature toggles (enabling/disabling  features dynamically). 

Example of Middleware in React with Redux-Thunk 

Here’s a brief example demonstrating how redux-thunk can be used to handle an  asynchronous action: 

// actions.js 

export const fetchData = () => { 

 return async (dispatch) => { 

 dispatch({ type: ‘FETCH_DATA_REQUEST’ }); 

 try { 

 const response = await fetch(‘https://api.example.com/data’);  const data = await response.json(); 

 dispatch({ type: ‘FETCH_DATA_SUCCESS’, payload: data });  } catch (error) { 

 dispatch({ type: ‘FETCH_DATA_FAILURE’, error: error.message });  } 

 }; 

};

// reducer.js 

const initialState = { 

 loading: false, 

 data: [], 

 error: null, 

}; 

const dataReducer = (state = initialState, action) => {  switch (action.type) { 

 case ‘FETCH_DATA_REQUEST’: 

 return { …state, loading: true }; 

 case ‘FETCH_DATA_SUCCESS’: 

 return { …state, loading: false, data: action.payload };  case ‘FETCH_DATA_FAILURE’: 

 return { …state, loading: false, error: action.error };  default: 

 return state; 

 } 

}; 

// store.js 

import { createStore, applyMiddleware } from ‘redux’; import thunk from ‘redux-thunk’; 

import dataReducer from ‘./reducer’;

const store = createStore(dataReducer, applyMiddleware(thunk)); 

In this example, redux-thunk allows the fetchData action creator to return a  function that performs an asynchronous API call. Depending on the outcome of  the API call, different actions are dispatched to update the state accordingly. 

Conclusion 

Middleware in React, particularly with state management libraries like Redux, is  essential for managing asynchronous operations, logging, error handling,  authorization, and other cross-cutting concerns. By using middleware, you can  keep your React application’s codebase clean, modular, and maintainable. 

11. What is the difference between local storage and session storage? 

Local Storage and Session Storage are both web storage mechanisms provided  by the Web Storage API that allow web applications to store data in a user’s  browser. They are similar in many ways but have key differences that determine  their use cases. 

Local Storage 

Local Storage is designed for storing data that needs to persist across sessions  and even after the browser is closed and reopened. Here are some key  characteristics: 

Persistence: Data stored in Local Storage does not expire. It remains available  until it is explicitly deleted by the user or the web application. 

Scope: Data is scoped to the domain. This means that data stored in Local  Storage is accessible to all pages on the same domain. 

Storage Limit: Typically, Local Storage can hold around 5-10 MB of data,  although this can vary by browser.

Usage Example: 

// Storing data 

localStorage.setItem(‘key’, ‘value’); 

// Retrieving data 

const value = localStorage.getItem(‘key’); 

// Removing data 

localStorage.removeItem(‘key’); 

// Clearing all data 

localStorage.clear(); 

Session Storage 

Session Storage is designed for storing data that should only persist for the  duration of the page session. Here are its key characteristics: 

Persistence: Data stored in Session Storage is only available for the duration of  the page session. Once the browser tab is closed, the data is deleted. 

Scope: Data is scoped to the page session. This means that data stored in  Session Storage is accessible only to the page that created it and any iframes  within that page, as long as they are on the same domain. 

Storage Limit: Session Storage typically has the same storage limits as Local  Storage (around 5-10 MB), but this can also vary by browser. 

Usage Example: 

// Storing data 

sessionStorage.setItem(‘key’, ‘value’);

// Retrieving data 

const value = sessionStorage.getItem(‘key’); 

// Removing data 

sessionStorage.removeItem(‘key’); 

// Clearing all data 

sessionStorage.clear(); 

Key Differences 

Lifetime: 

Local Storage: Data persists until explicitly deleted. 

Session Storage: Data is cleared when the page session ends (i.e., when the tab  is closed). 

Scope: 

Local Storage: Data is accessible to all pages under the same domain. Session Storage: Data is accessible only within the same page session. Use Cases: 

Local Storage: Suitable for storing data that needs to persist across browser  sessions, such as user preferences, settings, or long-term tokens. 

Session Storage: Suitable for storing data that is relevant only for the current  session, such as temporary form data or session-specific state. 

By understanding these differences, you can choose the appropriate storage  mechanism based on the persistence and scope requirements of your web  application’s data.

 

For Free Demo classes Call: 8237077325

Registration Link: React JS Classes in Pune!

 

12. Why is React so popular? 

React has become extremely popular for web development for several reasons.  Here are some of the key factors contributing to its popularity: 

1. Component-Based Architecture 

React’s component-based architecture allows developers to build reusable UI  components. This modular approach makes it easier to manage and maintain  code, as components can be developed, tested, and reused independently. 

2. Virtual DOM 

React uses a Virtual DOM to optimize rendering. Instead of updating the actual  DOM directly, React updates a virtual representation of the DOM. Changes are  then efficiently reconciled with the actual DOM. This process boosts  performance, particularly for complex and dynamic applications. 

3. Declarative Syntax 

React’s declarative syntax makes it easier to reason about the UI. Developers  describe what the UI should look like for different states, and React takes care of  updating the UI when the state changes. This approach simplifies the process of  building interactive UIs. 

4. Strong Ecosystem and Community Support 

React has a strong ecosystem, including tools, libraries, and extensions that  enhance its functionality. Popular tools like React Router for routing, Redux for  state management, and Next.js for server-side rendering contribute to its  versatility. Additionally, a large and active community provides extensive  resources, tutorials, and third-party components. 

5. Learn Once, Write Anywhere

React’s philosophy of “learn once, write anywhere” allows developers to apply  their knowledge across different platforms. React Native, for instance, enables  building mobile applications using React. This cross-platform capability is  appealing to developers who want to use a consistent development approach  across web and mobile. 

6. JSX Syntax 

JSX, a syntax extension for JavaScript, allows developers to write HTML-like  code within JavaScript. This blending of HTML and JavaScript makes the code  more intuitive and easier to write and understand, reducing the mental shift  between different languages. 

7. Performance 

React’s efficient handling of DOM manipulations and re-renders through the  Virtual DOM, along with its ability to handle large-scale applications, contributes  to its performance advantages. React also provides hooks like useMemo and  useCallback to optimize performance. 

8. Rich Tooling 

React has a robust set of development tools. The React Developer Tools  extension for browsers allows developers to inspect React component  hierarchies, making debugging and development more straightforward. 

9. Flexibility 

React is not a full-fledged framework but a library focused on the view layer. This  flexibility allows developers to choose their own stack and integrate React with  other libraries and frameworks, tailoring the setup to their project’s needs.

10. Backward Compatibility and Updates 

React maintains a strong commitment to backward compatibility. Updates to the  library are introduced in a way that minimizes disruption to existing codebases,  encouraging adoption of new features without breaking existing applications. 

Conclusion 

React’s popularity stems from its combination of performance, developer  experience, flexibility, and strong community support. Its component-based  architecture, efficient rendering with the Virtual DOM, declarative syntax, and rich  ecosystem make it a powerful tool for building modern web applications. These  advantages, along with continuous improvements and innovations, ensure that  React remains a top choice for developers. 

13. What is react fragment? 

In React, a Fragment is a special type of component that allows you to group  multiple elements without adding an extra node to the DOM. This can be very  useful when you need to return multiple elements from a component’s render  method but want to avoid unnecessary wrappers like <div> or <span>, which can  

clutter the DOM and potentially interfere with styling or layout. 

Key Features of React Fragment 

No Extra DOM Nodes: Unlike adding a <div> or any other HTML element, a  Fragment doesn’t create an additional node in the DOM. This keeps the DOM  clean and avoids unnecessary complexity. 

Short Syntax: React provides a shorthand syntax for Fragments, making it easier  to use: 

Full Syntax: <React.Fragment></React.Fragment> 

Shorthand Syntax: <> </>

Example Usage 

import React from ‘react’; 

function App() { 

 return ( 

 <React.Fragment> 

 <h1>Hello, world!</h1> 

 <p>This is a paragraph inside a Fragment.</p>  </React.Fragment> 

 ); 

} 

export default App; 

Shorthand Syntax 

import React from ‘react’; 

function App() { 

 return ( 

 <> 

 <h1>Hello, world!</h1> 

 <p>This is a paragraph inside a Fragment.</p>  </> 

 ); 

} 

export default App; 

When to Use Fragments

Returning Multiple Elements: When a component needs to return multiple  elements but you don’t want to wrap them in an extra DOM node. 

function List() { 

 return ( 

 <> 

 <li>Item 1</li> 

 <li>Item 2</li> 

 <li>Item 3</li> 

 </> 

 ); 

} 

Improving Performance: By avoiding unnecessary wrapper elements, you can  keep the DOM tree less complex, which can improve rendering performance. 

Cleaner Markup: Using Fragments can lead to cleaner and more readable  markup, as it reduces the number of unnecessary elements. 

Fragment with Key Attribute 

In some cases, especially when rendering lists of elements, you might need to  use keys to help React identify which items have changed, been added, or  removed. React Fragments can also accept the key attribute: 

function Table({ rows }) { 

 return ( 

 <> 

 {rows.map((row, index) => (

 <React.Fragment key={index}> 

 <td>{row.firstName}</td> 

 <td>{row.lastName}</td> 

 </React.Fragment> 

 ))} 

 </> 

 ); 

} 

Conclusion 

React Fragments are a useful feature for grouping elements without adding extra  nodes to the DOM. They help in keeping the DOM structure clean and are  particularly handy when returning multiple elements from a component. The  shorthand syntax (<> </>) makes them easy to use and integrate into your React components. 

14. What is the difference between state and props? 

In React, state and props are two fundamental concepts that manage data and  affect how components render and behave. Understanding the differences  between them is crucial for effective React development. 

State 

State is a built-in object that holds data that may change over the lifetime of the  component. It is used to manage dynamic data and control the component’s  behavior and rendering. 

Key Characteristics of State: 

Mutable: State can be changed within the component using the setState method  or the useState hook in functional components. 

Local to the Component: State is local to the component where it is defined. It  cannot be accessed or modified by other components directly.

Triggers Re-render: When the state changes, React re-renders the component to  reflect the new state. 

Example of Using State: 

import React, { useState } from ‘react’; 

function Counter() { 

 const [count, setCount] = useState(0); 

 return ( 

 <div> 

 <p>You clicked {count} times</p> 

 <button onClick={() => setCount(count + 1)}> 

 Click me 

 </button> 

 </div> 

 ); 

} 

Props 

Props (short for properties) are a way of passing data from a parent component  to a child component. They are used to configure a component and make it more  reusable. 

Key Characteristics of Props: 

Immutable: Props are read-only and cannot be changed by the child component.  They are passed from the parent component and should be treated as  immutable. 

Passed from Parent to Child: Props are passed down the component hierarchy,  allowing data to flow from parent to child components. 

Used for Configuration: Props are often used to customize the behavior or  appearance of a child component.

Example of Using Props: 

function Greeting(props) { 

 return <h1>Hello, {props.name}!</h1>; 

} 

function App() { 

 return ( 

 <div> 

 <Greeting name=”Alice” /> 

 <Greeting name=”Bob” /> 

 </div> 

 ); 

} 

Key Differences Between State and Props 

Mutability: 

State: Mutable and can be updated with setState or useState. Props: Immutable and set by the parent component. 

Scope: 

State: Local to the component where it is defined. 

Props: Passed from parent to child components. 

Usage: 

State: Used to manage dynamic data and handle component-specific changes. Props: Used to pass data and configuration from parent to child components.

Re-rendering: 

State: Changes in state trigger a re-render of the component. 

Props: Changes in props trigger a re-render of the child component receiving the  props. 

Control: 

State: Controlled and modified within the component itself. 

Props: Controlled and passed down by the parent component. 

Summary 

In summary, state is used for data that needs to change and be managed within  a component, while props are used to pass data and configuration from parent  components to child components. Both are essential for creating interactive and  dynamic React applications, but they serve different purposes and have different  characteristics. 

15. Difference between useMemo and useContext hook? 

In React, both useMemo and useContext are hooks that serve distinct purposes  and are used in different scenarios. Understanding their differences and  appropriate use cases is essential for writing efficient and maintainable React  components. 

useMemo 

useMemo is a React hook that memoizes the result of a computation. It is used  to optimize performance by preventing expensive calculations from being re executed on every render if the dependencies have not changed. 

Key Characteristics of useMemo: 

Memoization: It caches the result of a computation and reuses it until the  specified dependencies change. 

Performance Optimization: Useful for expensive calculations or resource intensive operations that do not need to run on every render.

Dependencies Array: It takes a function and a dependencies array. The function  is only re-evaluated when one of the dependencies changes. Example of useMemo: 

import React, { useMemo, useState } from ‘react’; 

function ExpensiveComponent({ items }) { 

 const [count, setCount] = useState(0); 

 const expensiveCalculation = (items) => { 

 console.log(‘Expensive calculation’); 

 return items.reduce((acc, item) => acc + item, 0); 

 }; 

 const total = useMemo(() => expensiveCalculation(items), [items]); 

 return ( 

 <div> 

 <p>Total: {total}</p> 

 <button onClick={() => setCount(count + 1)}>Increment</button>  <p>Count: {count}</p> 

 </div> 

 ); 

} 

In this example, useMemo prevents expensiveCalculation from running on every  render unless the items array changes. 

useContext 

useContext is a React hook that allows components to subscribe to context  changes. It is used to access the value of a React context directly in a functional  component. 

Key Characteristics of useContext: 

Context Consumption: It provides a way to consume context values in functional  components. 

Avoid Prop Drilling: Useful for passing data through the component tree without  having to pass props down manually at every level.

Reactivity to Context Changes: The component re-renders whenever the context  value changes. 

Example of useContext: 

import React, { useContext } from ‘react’; 

const ThemeContext = React.createContext(‘light’); 

function ThemedComponent() { 

 const theme = useContext(ThemeContext); 

 return ( 

 <div style={{ background: theme === ‘dark’ ? ‘#333’ : ‘#FFF’, color: theme ===  ‘dark’ ? ‘#FFF’ : ‘#000’ }}> 

 <p>The current theme is {theme}</p> 

 </div> 

 ); 

} 

function App() { 

 return ( 

 <ThemeContext.Provider value=”dark”> 

 <ThemedComponent /> 

 </ThemeContext.Provider> 

 ); 

} 

In this example, useContext allows ThemedComponent to access the current  value of ThemeContext directly. 

Key Differences Between useMemo and useContext 

Purpose: 

useMemo: Used for memoizing the result of a computation to optimize  performance and avoid unnecessary recalculations. 

useContext: Used for accessing the current value of a context to avoid prop  drilling and share data across components. 

Usage: 

useMemo: Takes a computation function and a dependencies array to determine  when to re-compute the memoized value.

useContext: Takes a context object and returns the current context value. Performance: 

useMemo: Helps in optimizing performance by reducing the number of  computations. 

useContext: Helps in simplifying state management and making data available  throughout the component tree without performance-specific optimizations. Reactivity: 

useMemo: Re-computes the memoized value only when one of the  dependencies changes. 

useContext: Causes the component to re-render whenever the context value  changes. 

Summary 

useMemo is used to optimize performance by memoizing expensive calculations  based on dependencies. 

useContext is used to consume context values and manage shared state across  the component tree, avoiding the need for prop drilling. 

Understanding when and how to use these hooks can greatly improve the  efficiency and maintainability of your React applications. 

16. How do you improve the performance of application? 

Improving application performance in React involves a combination of best  practices and techniques that optimize rendering, minimize unnecessary  operations, and manage resource usage efficiently. Here are several strategies to  enhance the performance of a React application: 

1. Use React.memo for Component Memoization 

React.memo is a higher-order component that memoizes functional components,  preventing them from re-rendering if their props haven’t changed. 

const MyComponent = React.memo(function MyComponent(props) {  // component code 

});

2. Use useMemo and useCallback Hooks 

useMemo: Memoizes the result of a computation to avoid recalculating on every  render unless dependencies change. 

useCallback: Memoizes callback functions to prevent unnecessary re-creations  on every render. 

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]); 3. Code Splitting and Lazy Loading 

Use dynamic import() and React’s Suspense to split your code and load  components lazily. This reduces the initial load time by breaking the app into  smaller chunks. 

const LazyComponent = React.lazy(() => import(‘./LazyComponent’)); 

function App() { 

 return ( 

 <Suspense fallback={<div>Loading…</div>}> 

 <LazyComponent /> 

 </Suspense> 

 ); 

} 

4. Optimize State Management 

Lift State Up: Avoid deeply nested state. Instead, lift state up to the nearest  common ancestor. 

Avoid Unnecessary State: Keep only necessary state in components. Derived  data should be computed as needed. 

Use Context Wisely: Overusing useContext can lead to unnecessary re-renders.  Only use context for truly global data. 

5. Avoid Inline Functions and Objects

Creating functions or objects inline can cause unnecessary re-renders because  they are recreated on each render. 

// Bad 

<button onClick={() => handleClick(id)}>Click me</button> 

// Good 

const handleClick = useCallback(() => doSomething(id), [id]); <button onClick={handleClick}>Click me</button> 

6. Use Efficient Rendering Techniques 

Virtualize Long Lists: Use libraries like react-window or react-virtualized for  rendering long lists efficiently by only rendering items that are in the viewport. 

Avoid Index as Key in Lists: Use unique identifiers for keys in lists to avoid  rendering issues. 

7. Optimize Images and Media 

Responsive Images: Use srcset and responsive images to serve appropriate  image sizes based on the user’s device. 

Lazy Load Images: Use the loading=”lazy” attribute for images or libraries like  react-lazyload to delay loading offscreen images. 

8. Minimize Reconciliation Work 

PureComponent and shouldComponentUpdate: Use PureComponent or  implement shouldComponentUpdate to control re-renders in class components. 

Immutable Data Structures: Use immutable data structures to make it easier to  detect changes and avoid unnecessary re-renders. 

9. Performance Monitoring and Profiling 

React Developer Tools Profiler: Use the React Profiler to identify performance  bottlenecks in your components.

Browser DevTools: Use browser performance tools to analyze and improve your  application’s performance. 

10. Server-Side Rendering (SSR) and Static Site Generation (SSG) 

Next.js: Utilize frameworks like Next.js for server-side rendering and static site  generation to improve performance and SEO. 

Gatsby: Use Gatsby for building static sites with React, leveraging build-time  optimization. 

Example of Combining Techniques 

Here’s a small example combining some of the above techniques: 

import React, { useState, useMemo, useCallback, lazy, Suspense } from ‘react’; // Lazy loaded component 

const LazyComponent = lazy(() => import(‘./LazyComponent’)); 

function App() { 

 const [count, setCount] = useState(0); 

 // Memoized expensive computation 

 const expensiveValue = useMemo(() => computeExpensiveValue(count),  [count]); 

 // Memoized callback 

 const increment = useCallback(() => setCount(count + 1), [count]); 

 return ( 

 <div> 

 <p>Expensive Value: {expensiveValue}</p>

 <button onClick={increment}>Increment</button> 

 <Suspense fallback={<div>Loading…</div>}> 

 <LazyComponent /> 

 </Suspense> 

 </div> 

 ); 

} 

function computeExpensiveValue(num) { 

 // Simulate expensive computation 

 return num * 2; 

} 

export default App; 

Conclusion 

Improving performance in a React application involves a combination of  techniques that optimize rendering, reduce unnecessary computations, and  manage state effectively. By using tools like React.memo, useMemo,  useCallback, and techniques like code splitting, virtualization, and efficient state  management, you can significantly enhance the performance and  responsiveness of your React applications. 

17. How do you add responsiveness in react web page? 

Adding responsiveness to a React web page ensures that your application looks  good and functions well on various devices and screen sizes. Here are several  techniques and best practices to achieve responsiveness: 

1. CSS Media Queries

CSS media queries are a fundamental way to make your application responsive.  They allow you to apply different styles based on the device’s characteristics,  such as width, height, and orientation. 

css 

Copy code 

/* Example media queries in CSS */ 

.container { 

 width: 100%; 

} 

@media (min-width: 768px) { 

 .container { 

 width: 750px; 

 } 

} 

@media (min-width: 992px) { 

 .container { 

 width: 970px; 

 } 

} 

@media (min-width: 1200px) { 

 .container { 

 width: 1170px;

 } 

} 

2. Responsive Design Frameworks 

Using responsive design frameworks like Bootstrap or Material-UI can simplify  the process of building responsive layouts. These frameworks come with pre defined responsive grid systems and components. 

Example with Bootstrap: 

import ‘bootstrap/dist/css/bootstrap.min.css’; 

function App() { 

 return ( 

 <div className=”container”> 

 <div className=”row”> 

 <div className=”col-md-6″>Column 1</div> 

 <div className=”col-md-6″>Column 2</div> 

 </div> 

 </div> 

 ); 

} 

3. Flexbox and Grid Layouts 

CSS Flexbox and Grid Layouts are powerful tools for creating responsive layouts. Example with Flexbox: 

function App() { 

 return ( 

 <div style={{ display: ‘flex’, flexDirection: ‘row’, flexWrap: ‘wrap’ }}>  <div style={{ flex: ‘1 1 300px’ }}>Item 1</div> 

 <div style={{ flex: ‘1 1 300px’ }}>Item 2</div>

 <div style={{ flex: ‘1 1 300px’ }}>Item 3</div> 

 </div> 

 ); 

} 

Example with Grid: 

function App() { 

 return ( 

 <div style={{ display: ‘grid’, gridTemplateColumns: ‘repeat(auto-fill,  minmax(300px, 1fr))’, gap: ’10px’ }}> 

 <div>Item 1</div> 

 <div>Item 2</div> 

 <div>Item 3</div> 

 </div> 

 ); 

} 

4. React Responsive Libraries 

There are libraries like react-responsive that provide utility functions and  components to handle responsive design in React applications. 

Example with react-responsive: 

import React from ‘react’; 

import { useMediaQuery } from ‘react-responsive’; 

function App() { 

 const isDesktopOrLaptop = useMediaQuery({ minDeviceWidth: 1224 });  const isTabletOrMobile = useMediaQuery({ maxWidth: 1224 });

 return ( 

 <div> 

 {isDesktopOrLaptop && <p>You are on a desktop or laptop</p>}  {isTabletOrMobile && <p>You are on a tablet or mobile</p>}  </div> 

 ); 

} 

5. Responsive Images 

Using responsive images ensures that the appropriate image size is loaded for  different devices. The srcset attribute in the img tag can be used to define  different image sources based on screen resolution. 

function ResponsiveImage() { 

 return ( 

 <img  

 src=”small.jpg”  

 srcSet=”medium.jpg 768w, large.jpg 1200w”  

 sizes=”(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw”   alt=”Responsive”  

 /> 

 ); 

} 

6. Viewport Meta Tag 

Ensure you include the viewport meta tag in your HTML to control the layout on  mobile browsers.

<meta name=”viewport” content=”width=device-width, initial-scale=1″> 

7. Custom Hooks for Responsive Behavior 

You can create custom hooks to handle responsive behavior in your React  components. 

Example Custom Hook: 

import { useState, useEffect } from ‘react’; 

function useWindowSize() { 

 const [windowSize, setWindowSize] = useState({ 

 width: undefined, 

 height: undefined, 

 }); 

 useEffect(() => { 

 function handleResize() { 

 setWindowSize({ 

 width: window.innerWidth, 

 height: window.innerHeight, 

 }); 

 } 

  

 window.addEventListener(‘resize’, handleResize); 

 handleResize(); 

  

 return () => window.removeEventListener(‘resize’, handleResize);  }, []);

 return windowSize; 

} 

function App() { 

 const size = useWindowSize(); 

 return ( 

 <div> 

 {size.width >= 768 ? ( 

 <p>Viewing on a large screen</p> 

 ) : ( 

 <p>Viewing on a small screen</p> 

 )} 

 </div> 

 ); 

} 

Conclusion 

Adding responsiveness to a React web page involves using a mix of CSS  techniques, design frameworks, and responsive libraries. By leveraging media  queries, responsive frameworks, CSS Flexbox/Grid, responsive images, and  viewport settings, you can create a seamless and adaptable user experience  across all devices. 

18. How do you add security in react application? 

Adding security to a React application involves implementing various measures  to protect the application from common security threats such as cross-site scripting (XSS), cross-site request forgery (CSRF), injection attacks, and 

unauthorized access. Here are several key practices to enhance the security of  your React application: 

1. Sanitize User Input 

Always validate and sanitize user input to prevent XSS attacks. Use libraries like  DOMPurify to sanitize user-generated content before rendering it in the browser. 

import DOMPurify from ‘dompurify’; 

function MyComponent({ userContent }) { 

 return <div dangerouslySetInnerHTML={{ __html:  

DOMPurify.sanitize(userContent) }} />; 

} 

2. Avoid Inline Styles and Scripts 

Avoid using inline styles and scripts, as they can be susceptible to XSS attacks.  Instead, use CSS classes and external JavaScript files to style and script your  application. 

// Bad: Inline style 

<div style={{ color: ‘red’ }}>Content</div> 

// Good: External CSS class 

<div className=”red-text”>Content</div> 

3. Use HTTPS 

Always serve your application over HTTPS to encrypt data transmitted between  the client and the server, preventing eavesdropping and tampering. 

4. Implement Content Security Policy (CSP) 

Use Content Security Policy (CSP) headers to restrict the sources from which  certain types of content (scripts, styles, images, etc.) can be loaded. This helps 

mitigate XSS attacks by preventing the execution of malicious scripts injected  into your application. 

5. Protect Against CSRF Attacks 

Implement CSRF tokens and include them in requests to protect against cross site request forgery attacks. Validate these tokens on the server-side to ensure  that requests originate from your application. 

6. Authentication and Authorization 

Implement proper authentication and authorization mechanisms to ensure that  only authenticated users can access sensitive resources and perform privileged  actions. Use libraries like JSON Web Tokens (JWT) for token-based  authentication. 

7. Secure API Requests 

Ensure that your API requests are secure by validating input parameters,  escaping special characters, and using parameterized queries to prevent SQL  injection attacks. 

8. Protect Sensitive Data 

Avoid storing sensitive information such as passwords and API keys in client-side  code. Use environment variables or server-side storage mechanisms to store and  access sensitive data securely. 

9. Regularly Update Dependencies 

Regularly update your dependencies, including React, libraries, and frameworks,  to patch security vulnerabilities and ensure that your application is protected  against known security threats.

10. Implement Role-Based Access Control (RBAC) 

Implement role-based access control to restrict access to certain features and  data based on the user’s role and permissions. This helps prevent unauthorized  access to sensitive functionalities. 

11. Security Headers 

Use security headers such as X-Content-Type-Options, X-Frame-Options, and X XSS-Protection to enhance the security of your application and protect against  various types of attacks. 

12. Securely Handle Authentication Tokens 

When storing authentication tokens (e.g., JWT) in local storage or cookies,  ensure they are properly encrypted and transmitted over HTTPS to prevent  unauthorized access and token theft. 

13. Security Testing 

Regularly perform security testing, including code reviews, static code analysis,  and penetration testing, to identify and address security vulnerabilities in your  React application. 

Conclusion 

By following these best practices and implementing security measures  throughout the development lifecycle, you can enhance the security posture of  your React application and protect it from common security threats. Remember  that security is an ongoing process, and it’s essential to stay vigilant and  proactive in addressing security concerns as your application evolves. 

19. How do you use version control in Git? 

Using version control with Git involves several key steps and commands to  manage your project’s source code effectively. Here’s a basic overview of how to  use Git for version control:

1. Initialize a Git Repository 

To start using Git, you first need to initialize a Git repository in your project  directory. Navigate to your project directory in the terminal and run: 

git init 

This command initializes an empty Git repository in the current directory. 

2. Add Files to the Staging Area 

After initializing the repository, you can start tracking files by adding them to the  staging area. Use the following command to add files to the staging area: 

git add <file1> <file2> … 

This command stages the specified files for the next commit. 

3. Commit Changes 

Once you’ve staged your changes, you can commit them to the repository with a  descriptive commit message. Use the following command to commit changes: 

git commit -m “Your commit message” 

This command creates a new commit with the changes staged in the staging  area and associates the provided commit message with it. 

4. Check Status and History 

You can check the status of your repository and view the commit history using the  following commands: 

git status: Shows the current status of the repository, including modified files and  files staged for commit. 

git log: Displays a list of commits in reverse chronological order, along with their  commit hashes, authors, dates, and commit messages.

5. Branching and Merging 

Git allows you to create branches to work on features or fixes independently of  the main codebase. To create a new branch, use the following command: 

git checkout -b <branch-name> 

Once you’ve made changes in a branch and want to incorporate those changes  into the main codebase (usually the master branch), you can merge the branch  using: 

git checkout master 

git merge <branch-name> 

6. Remote Repositories 

To collaborate with others and back up your code, you can use remote  repositories hosted on platforms like GitHub, GitLab, or Bitbucket. First, add a  remote repository URL using: 

git remote add origin <remote-repository-url> 

Then, push your commits to the remote repository using: 

git push -u origin master 

7. Pull Changes from Remote 

To fetch changes from the remote repository and integrate them into your local  repository, use: 

git pull origin master 

This command fetches changes from the remote master branch and merges  them into your local master branch. 

8. Resolve Conflicts 

If Git encounters conflicts during a merge or rebase operation, it will mark the  conflicted files. You can resolve conflicts manually by editing the conflicted files,  marking the conflicts as resolved, and then committing the changes.

Summary 

Using Git for version control involves initializing a repository, staging changes,  committing them with informative messages, branching and merging, working  with remote repositories, and resolving conflicts. By mastering these basic Git  commands and workflows, you can effectively manage your project’s source  

code and collaborate with others efficiently. 

20. What is babel ? 

Babel 

Babel is a JavaScript compiler that allows you to use next-generation JavaScript  today. It converts ECMAScript 2015+ (ES6 and beyond) code into a backwards compatible version of JavaScript that can run in older browsers or environments. 

Key Features of Babel: 

Transpiling: Babel transpiles modern JavaScript syntax (ES6+) to ES5 to ensure  compatibility with older browsers. 

Plugins and Presets: Babel uses plugins to transform specific JavaScript  features. Presets are pre-configured sets of plugins. For example,  @babel/preset-env is a preset that allows you to use the latest JavaScript  features. 

Polyfills: Babel can automatically include polyfills for features that are not natively  supported in the target environment. 

21. What is React? 

React is Javascript Library. Tha main aim of using React is to build UI as fast as  possible. It is used to create a single page application. 

22. Where we can use React Routing? 

We can use React Routing on web (React applications), On server side with  Node JS and with React native. 

23. What is the difference between Link and NavLink? 

• By using NavLink we can add custom styles and classes.
• In NavLink we can add all the features of active link 
• We cannot style Link. 

24. What is nested Routes? 

Nesting of Routes means to make Route inside a route. We can make tabs or  pages inside a page. We can also create multiple nested Routes. 

25. Why we use Link instead of Anchor tag in React? 

With anchor tag everytime page get refreshed whenever we click on hyperlink but  by using Link the page does not get refreshed. 

26. What is alternative of NPM ? 

Alternative of NPM is yarn. 

27. Can we write one component in another component? 

Yes we can write one component in another component but we can use it in that  component only 

28. Can we use React and Angular both in a single project? 

Yes we can use both React and Angular in a single project because React is a  Javascript Library and Angular is a framework 

29. How React is different from Angular? 

Difference between React and Angular is: 

• React is owned by Facebook and Angular is owned by Google. • React uses Virtual DOM and Angular uses Real DOM. 
• React uses Compile Time Debugging and Angular uses Run Time Debugging.
• React uses server side rendering and Angular uses client-side rendering. • React uses One way data binding and Angular uses two way data binding. 

30. What are keys in React? 

Key is a special value which is used while creating a list of elements in React. 

31. What are the different ways to style a component in React? There are following 3 methods used to style React components- 

• Using Inline CSS 
• Using CSS stylesheets 
• Using CSS Modules 

32. Why High Order Components are used in React? 

High Order Components are used to manipulate props and state, to reuse the  code and Bootstrap abstraction 

33. useEffect() hook in a functional component replaces which life cycle  methods of a class component? 

componentDidMount(), componentDidUpdate(), and componentWillMount()  methods are replaced by useEffect() hook. 

34. When to use useContext() hook? 

useContext() hook is used to pass the data across your project without using  props. 

35. How we can apply class attributes conditionally? 

By using ternary operator we can apply class attributes conditionally.

36. Can we write multiple components in a same file? 

Yes we can create multiple components in the same file. 

37. Can we use let,var and const instead of state and props? Yes we can we use let,var and const instead of state and props. 
38. What are the phases of Life cycle method? 

Mounting, Updating and Unmounting are the pahses of life cycle method. 

39. Can we use more than one useEffect() in single component? Yes we can use more than one useEffect() in single component. 
40. When Hooks are introduced in React? 

Hooks are introduced in 16.3 version of React. 

41. When we can use React Routing? 

React routing is used to link components on web, on server side with Node JS  and also used with React Native 

42. Why to use Link instead of anchor <a> tag? 

When we use anchor tag page gets refreshed everytime when we click on link  page does not get refreshed. 

43. What is Nested Routes? 

Creating a Route inside a Route is called as nested routes. We can create multiple  nested routes.

44. how do you add SEO in react? 

Adding SEO (Search Engine Optimization) to a React application can be  challenging because React is a single-page application (SPA) framework, and  search engines traditionally have difficulty crawling and indexing JavaScript-heavy  websites. However, several techniques and tools can help improve SEO in React  applications: 

1. Server-Side Rendering (SSR) 

Server-Side Rendering involves rendering your React components on the server  and sending the fully rendered HTML to the client. This approach helps search  engines crawl your content more effectively since they can easily read the HTML  content. 

Using Next.js for SSR 

Next.js is a popular React framework that supports SSR out of the box. 

Install Next.js: 

npx create-next-app@latest 

Example of a Next.js Page: 

// pages/index.js 

import Head from ‘next/head’; 

export default function Home() { 

 return ( 

 <div> 

 <Head> 

 <title>Home Page</title> 

 <meta name=”description” content=”This is the home page of our awesome  application.” /> 

 </Head> 

 <h1>Welcome to our SEO optimized site!</h1> 

 </div> 

 ); 

} 

Run the Next.js App: 

npm run dev

2. Static Site Generation (SSG) 

Static Site Generation pre-renders pages at build time and can be a powerful SEO  strategy for content-heavy sites. Next.js also supports SSG. 

Example of SSG in Next.js 

// pages/index.js 

import Head from ‘next/head’; 

export default function Home({ data }) { 

 return ( 

 <div> 

 <Head> 

 <title>Home Page</title> 

 <meta name=”description” content=”This is the home page of our awesome  application.” /> 

 </Head> 

 <h1>{data.title}</h1> 

 <p>{data.description}</p> 

 </div> 

 ); 

} 

export async function getStaticProps() { 

 // Fetch data from an API or CMS 

 const data = { 

 title: “Welcome to our SEO optimized site!”, 

 description: “This is the home page of our awesome application.”  }; 

 return { 

 props: { 

 data, 

 }, 

 }; 

}

3. Meta Tags and Titles 

Adding meta tags and dynamically setting page titles can significantly impact SEO.  React Helmet is a library that helps manage changes to the document head. 

Using React Helmet 

Install React Helmet: 

npm install react-helmet-async 

Example Usage: 

import { Helmet } from ‘react-helmet-async’; 

function App() { 

 return ( 

 <div> 

 <Helmet> 

 <title>Home Page</title> 

 <meta name=”description” content=”This is the home page of our awesome  application.” /> 

 <link rel=”canonical” href=”https://www.example.com/” /> 

 </Helmet> 

 <h1>Welcome to our SEO optimized site!</h1> 

 </div> 

 ); 

} 

export default App; 

4. Structured Data 

Structured data helps search engines understand the content of your pages better.  You can add structured data using JSON-LD. 

Example of Adding JSON-LD 

import { Helmet } from ‘react-helmet-async’; 

function App() { 

 const structuredData = { 

 “@context”: “https://schema.org”, 

 “@type”: “WebSite”, 

 “url”: “https://www.example.com/”,

 “name”: “Example Site”, 

 “description”: “This is an example website with SEO optimization.”  }; 

 return ( 

 <div> 

 <Helmet> 

 <script type=”application/ld+json”> 

 {JSON.stringify(structuredData)} 

 </script> 

 </Helmet> 

 <h1>Welcome to our SEO optimized site!</h1> 

 </div> 

 ); 

} 

export default App; 

5. Optimizing for Performance 

Performance impacts SEO. Faster loading times can improve user experience and  SEO rankings. 

Techniques to Improve Performance: 

Code Splitting: Split your code into smaller chunks to load only what is necessary. Lazy Loading: Load images and other resources only when they are needed. Caching: Use browser caching and server-side caching. 

Compression: Compress files using Gzip or Brotli. 

6. Canonical Tags 

Canonical tags help prevent duplicate content issues by specifying the “preferred”  version of a page. 

Example of Adding a Canonical Tag: 

import { Helmet } from ‘react-helmet-async’; 

function App() { 

 return (

 <div> 

 <Helmet> 

 <link rel=”canonical” href=”https://www.example.com/page” />  </Helmet> 

 <h1>SEO Optimized Page</h1> 

 </div> 

 ); 

} 

export default App; 

7. Sitemap 

A sitemap helps search engines understand the structure of your site and find all  your pages. Tools like sitemap-generator can be used to create sitemaps. 

Example of Generating a Sitemap with sitemap-generator: 

Install sitemap-generator: 

npm install sitemap-generator 

Generate Sitemap: 

const SitemapGenerator = require(‘sitemap-generator’); 

// create generator 

const generator = SitemapGenerator(‘https://www.example.com’, {  stripQuerystring: false 

}); 

// register event listeners 

generator.on(‘done’, () => { 

 console.log(‘Sitemap created!’); 

}); 

// start the crawler 

generator.start();

Conclusion 

Improving SEO in a React application involves several strategies, including server side rendering, meta tags management, structured data, performance optimization, and creating sitemaps. By implementing these techniques, you can  make your React application more discoverable and user-friendly for search  engines. 

45. What is JSX? 

JSX is a syntax extension of JavaScript. It is used with React to describe  what the user interface should look like. By using JSX, we can write HTML  structures in the same file that contains JavaScript code. 

46. 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

47. What is the difference between the ES6 and ES5 standards? This is one of the most frequently asked react interview questions. 

These are the few instances where ES6 syntax has changed from ES5  syntax: 

• Components and Function 
• exports vs export 
• require vs import

Do visit our channel to get more information: Click Here

Author:-

Anil Giri

Call the Trainer and Book your free demo Class For React JS Call now!!!
| SevenMentor Pvt Ltd.

© Copyright 2021 | SevenMentor Pvt Ltd.