1 of 275

2 of 275

PREFACE

ABOUT THE BOOK

 

This book contains 200 very important React interview questions.

​

​

​

​

​

ABOUT THE AUTHOR

 

Happy Rawat has around 15 years of experience in software development. He helps candidates in clearing technical interview in tech companies.

3 of 275

Chapters

Fundamentals

1. React-Basics - I

2. React-Basics - II

3. Project Files & Folders

4. JSX

5. Components (Functional/Class)

6. Routing

Redux

16. Action/ Store/ Reducer

17. Core Principles/ Pros-Cons

18. Short Answer

19. Thunk/ Middleware/ Flux

Bonus

20. JS Essentials for React

21. Typescript

Hooks

7. useState/ useEffect

8. useContext/ useReducer

9. useCallback/ useMemo/…

10. Short Answer

Advance

11. LifeCycle Methods - I

12. LifeCycle Methods - II

13. Controlled Components

14. Code Splitting

15. React - Others

4 of 275

1: React-Basics - I

Q1. What is React? What is the Role of React in software development?

Q2. What are the Key Features of React?

Q3. What is DOM? What is the difference between HTML and DOM?

Q4. What is Virtual DOM? Difference between DOM and Virtual DOM?

Q5. What are React Components? What are the main elements of it?

Q6. What is SPA(Single Page Application)?

Q7. What are the 5 Advantages of React?

Q8. What are the Disadvantages of React?

Q9. What is the role of JSX in React? (3 points)

Q10. What is the difference between Declarative & Imperative syntax?

5 of 275

Q. What is React? What is the Role of React in software development?

​

​

​

React (library)/ Angular

(framework)

​

​

​

​

CSS, HTML & Javascript

(languages)

​

​

​

​

​

.NET(C#) / Spring(Java) / Laravel(PHP)

(framework)

​

​

​

​

​

C# / Java / PHP

(languages)

UI/ Client/ Frontendend

API Server/ Middleware

Database Server

​

​

​

​

​

SOL Server / Oracle

(RDBMS)

​

​

​

​

​

SQL

(languages)

Request

Response

6 of 275

Q. What is React? What is the Role of React in software development?

  • 3 Main Point about React:

​

  1. React is an open source Javascript Library.

​

  • React is used for building user interfaces(UI).

​

  • React simplifies the creation of SPA by using reusable components.

7 of 275

Q. What are the Key Features of React?

7 Key Features of React

1. Virtual DOM

2. Component Based Architecture

3. Reusability & Composition

4. JSX

(JavaScript XML)

5. Declarative Syntax

6. Community & Ecosystem

7. React Hooks

8 of 275

Q. What are the Key Features of React?

React utilizes a virtual representation of the DOM, allowing efficient updates by minimizing direct manipulation of the actual DOM, resulting in improved performance.

1. Virtual DOM:

React structures user interfaces as modular, reusable components, promoting a more maintainable and scalable approach to building applications.

2. Component-Based Architecture:

React enables the creation of reusable components that can be composed together, fostering a modular and efficient development process.

3. Reusability & Composition:

JSX is a syntax extension for JavaScript used in React, allowing developers to write HTML-like code within JavaScript, enhancing readability and maintainability.

4. JSX (JavaScript XML):

React have a declarative programming style(JSX), where developers focus on "what" the UI should look like and React handles the "how" behind the scenes. This simplify the code.

5. Declarative Syntax:

React benefits from a vibrant and extensive community, contributing to a rich ecosystem of libraries, tools, and resources, fostering collaborative development and innovation.

6. Community & Ecosystem:

Hooks are functions that enable functional components to manage state and lifecycle features, providing a more concise and expressive way to handle component logic.

7. React Hooks:

9 of 275

Q. What is DOM? What is the difference between HTML and DOM?

DOM Tree(Real)

  • DOM(Document Object Model) represents the web page as a tree-like structure which allows JavaScript to dynamically access and manipulate the content and structure of a web page.

Static HTML

10 of 275

Q. What is Virtual DOM? Difference between DOM and Virtual DOM?

DOM Tree(Real)

Virtual DOM

Reconciliation

(React Libraries)

  • React uses a virtual DOM to efficiently update the UI without re-render the entire page, which helps improve performance and make the application more responsive.

11 of 275

Q. What is Virtual DOM? Difference between DOM and Virtual DOM?

DOM

Virtual DOM

1. DOM is actual representation of the webpage.

Virtual DOM is lightweight copy of the DOM.

2. Re-renders the entire page when updates occur.

Re-renders only the changed parts efficiently.

3. Can be slower, especially with frequent updates.

Optimized for faster rendering.

4. Suitable for static websites and simple applications

Ideal for dynamic and complex single-page applications with frequent updates

12 of 275

Q. What are React Components? What are the main elements of it?

  • In React, a component is a reusable building block for creating user interfaces.

13 of 275

Q. What is SPA(Single Page Application)?

  • A Single Page Application (SPA) is a web application that have only one single web page.

​

  • Whenever user do some action on the website, then in response content is dynamically updated without refreshing or loading a new page.

14 of 275

Q. What are the 5 Advantages of React?

1. Simple to build Single Page Application (by using Components)

2. React is cross platform and open source(Free to use)

3. Lightweight and very fast (Virtual DOM)

4. Large Community and Ecosystem

5. Testing is easy

15 of 275

Q. What are the Disadvantages of React?

  • React is not a good choice for very small applications.

16 of 275

Q. What is the role of JSX in React? (3 points)

Babel

  1. JSX stands for JavaScript XML.
  2. JSX is used by React to write HTML-like code.
  3. JSX is converted to JavaScript via tools like Babel. Because Browsers understand JavaScript not JSX.

17 of 275

Q. What is the difference between Declarative & Imperative syntax?

7 Key Features of React

1. Virtual DOM

2. Component Based Architecture

3. Reusability & Composition

4. JSX

(JavaScript XML)

5. Declarative Syntax

6. Community & Ecosystem

7. React Hooks

18 of 275

Q. What is the difference between Declarative & Imperative syntax?

  1. Declarative syntax focuses on describing the desired result without specifying the step-by-step process.
  2. JSX in React is used to write declarative syntax.
  1. Imperative syntax involves step by step process to achieve a particular goal.
  2. JavaScript has an imperative syntax.

19 of 275

2: React-Basics - II

Q1. What is Arrow Function Expression in JSX?

Q2. How to Setup React first project?

Q3. What are the Main Files in a React project?

Q4. How React App Load and display the components in browser?

Q5. What is the difference between React and Angular?

Q6. What are other 5 JS frameworks other than React?

Q7. Whether React is a Framework or a Library? What is the difference?

Q8. How React provides Reusability and Composition?

Q9. What are State, Stateless, Stateful and State Management terms?

Q10. What are Props n JSX?

20 of 275

Q. What is Arrow Function Expression in JSX?

  • The arrow function expression syntax is a concise way of defining functions.

=

21 of 275

Q. How to Setup React first project?

1. Install Node.js from below link:

https://nodejs.org/en/download

2. Install code editor (VS Code):

https://code.visualstudio.com/download

3. Create first React Project (Open VS Code -> Terminal -> New Terminal)

run command: “npx create-react-app my-app”

4. Open Project

Click File -> Open Project Folder “my-app”

5. Run Project

Open terminal(ctrl + ‘) key -> run “npm start”

22 of 275

Q. What are the Main Files in a React project?

  • Main Files in a React project:

​

  1. index.html: Single page for React application.

​

  • Components/component1.js: Your application components.

​

  • App.js: Main component or container or Root component.

​

  • App.test.js(Optional): Used for writing tests for the App.js file.

​

  • Index.css(Optional): This is a global CSS file that serves as the main stylesheet for the entire application.

​

  • index.js: Entry point for JavaScript. Renders the main React component (App) into the root DOM element.

23 of 275

Q. How React App Load and display the components in browser?

Request

Display

index.html

index.js

App.js

Single Page

Entry Point(JS)

Root Component

Comp1.js

Comp1.js

Comp1.js

24 of 275

Q. How React App load and display the components in browser?

ChildComponent.js

Custom child components placed over app component.

App.js

Root component which is the container of all the child components.

index.js

Replace root element of index.html file by App component

index.html

Single page which loads index.js by React libraries

25 of 275

Q. What is the difference between React and Angular?

React

Angular

React and Angular both are used to create single page UI applications using components.

1. React is a JavaScript library

Angular is a complete framework.

2. React uses a virtual DOM which makes it faster.

Angular uses a real DOM

3. React is smaller in size and lightweight and therefore faster sometime.

Angular is bigger because it is a complete framework.

4. React depends on external libraries for many complex features, so developer has to write many lines of code for complex functionalities.

Since Angular is a complete framework, therefore it provide built-in support for features like routing, forms, validation, and HTTP requests.

5. React is simple to learn and more popular than Angular.

5. Angular is slightly difficult to learn as it has Typescript, OOPS concept and many more thing.

26 of 275

Q. What are other 5 JS frameworks other than React?

JS frameworks/ libraries

Angular

Vue.js

AngularJS

Backbone.js

Ember.js

27 of 275

Q. Whether React is a Framework or a Library? What is the difference?

  • Library: Developers import the libraries at the top and then used its functions in components.

​

  • React is commonly referred to as a JavaScript library.
  • Framework: Developers need to follow a specific structure or pattern defined by the framework.

​

  • Angular is a framework.

28 of 275

Q. How React provides Reusability and Composition?

  • React provides reusability and composition through its component-based architecture.

​

  • Reusability: Once you create a component, you can re-use it in different parts of your application or even in multiple projects.

​

  • Composition: Composition is creating new and big components by combining existing small components. Its advantage is, change to one small component will not impact other components.

10

10

29 of 275

Q. What are State, Stateless, Stateful and State Management terms?

  • "state" refers to the current data of the component.
  • Stateful or state management means, when a user performs some actions on the UI, then the React application should be able to update and re-render that data or state on the UI.

30 of 275

Q. What are Props n JSX?

​

  • props (properties) are a way to pass data from a parent component to a child component.

​

31 of 275

3: React Project - Files & Folders

Q1. What is NPM? What is the role of node_modules folder?

Q2. What is the role of public folder in React?

Q3. What is the role of src folder in React?

Q4. What is the role of index.html page in React?

Q5. What is the role of index.js file and ReactDOM in React?

Q6. What is the role of App.js file in React?

Q7. What is the role of function and return inside App.js?

Q8. Can we have a function without a return inside App.js?

Q9. What is the role of export default inside App.js?

Q10. Does the file name and the component name must be same in React?

32 of 275

Q. What is NPM? What is the role of node_modules folder?

  • NPM(Node Package Manager) is used to manage the dependencies for your React project, including the React library itself.
  • node_modules folder contains all the dependencies of the project, including the React libraries.

33 of 275

Q. What is the role of public folder in React?

  • Public folder contains static assets that are served directly to the user's browser, such as images, fonts, and the index.html file.

34 of 275

Q. What is the role of src folder in React?

  • src folder is used to store all the source code of the application which is then responsible for the dynamic changes in your web application.

35 of 275

Q. What is the role of index.html page in React?

  • index.html file is the main HTML file(SPA) in React applcication.

​

  • Here the div with “id=root” will be replaced by the component inside index.js file.

36 of 275

Q. What is the role of index.js file and ReactDOM in React?

  • ReactDOM is a JavaScript library that renders components to the DOM or browser.

​

  • The index.js file is the JavaScript file that replaces the root element of the index.html file with the newly rendered components.

37 of 275

Q. What is the role of App.js file in React?

​

Root Component (App.js)

Component 1

Component 2

Component 3

Component 4

38 of 275

Q. What is the role of App.js file in React?

  • App.js file contain the root component(App) of React application.

​

  • App component is like a container for other components.

​

  • App.js defines the structure, layout, and routing in the application.

39 of 275

Q. What is the role of function and return inside App.js?

  • The function keyword is used to define a JavaScript function that represents your React component.
  • function is like a placeholder which contains all the code or logic of component.
  • The function takes in props as its argument (if needed) and returns JSX
  • return is used to return the element from the function.

40 of 275

Q. Can we have a function without a return inside App.js?

  • Yes, a function without a return statement is possible.

​

  • In that case, your component will not render anything in UI.

​

  • The common use case is for logging purpose.

41 of 275

Q. What is the role of export default inside App.js?

  • Export statement is used to make a component available for import using “import” statement in other files.

42 of 275

Q. Does the file name and the component name must be same in React?

  • No, the file name and the component name don't have to be the same.

​

  • However, it is recommended to keep them same for easier to organize and understand your code.

43 of 275

4: JSX

Q1. What is the role of JSX in React? (3 points)

Q2. What are the 5 Advantages of JSX?

Q3. What is Babel?

Q4. What is the role of Fragment in JSX?

Q5. What is Spread Operator in JSX?

Q6. What are the types of Conditional Rendering in JSX?

Q7. How do you iterate over a list in JSX? What is map() method?

Q8. Can a browser read a JSX File?

Q9. What is Transpiler? What is the difference between Compiler & Transpiler?

Q10. Is it possible to use JSX without React?

44 of 275

Q. What is the role of JSX in React? (3 points)

Babel

  1. JSX stands for JavaScript XML.
  2. JSX is used by React to write HTML-like code.
  3. JSX is converted to JavaScript via tools like Babel. Because Browsers understand JavaScript not JSX.

45 of 275

Q. What are the 5 Advantages of JSX?

Advantage of JSX

1. Improve code readability and writability

2. Error checking in advance(Type safety)

3. Support JavaScript expressions

4. Improved performance

5. Code reusability

46 of 275

Q. What is Babel?

Babel

​

  • Babel in React is used to transpile JSX syntax into regular JavaScript which browser can understand.

​

47 of 275

Q. What is the role of Fragment in JSX?

  • In React, a fragment is a way to group multiple children's elements.

​

  • Using a Fragment prevents the addition of unnecessary nodes to the DOM.

​

​

Separate elements(Error)

Fragment (<>, <Fragment>)

48 of 275

Q. What is Spread Operator in JSX?

​

  • The spread operator (...) is used to expand or spread an array or object.

​

49 of 275

Q. What are the types of Conditional Rendering in JSX?

Conditional Rendering

1. If/else statements

2. Ternary operator

3. && operator

4. Switch statement

50 of 275

Q. How do you iterate over a list in JSX? What is map() method?

​

  • map() method allows you to iterate over an array and modify its elements using a callback function.

​

51 of 275

Q. Can a browser read a JSX File?

  • No, browsers cannot directly interpret or understand JSX files.
  • Babel takes JSX and converts it into equivalent JavaScript code that browsers can understand.

​

52 of 275

Q. What is Transpiler? What is the difference between Compiler & Transpiler?

  • A Transpiler is a tool that converts source code from one high-level programming language(JSX) to another high-level programming language(JavaScript). Example: Babel

​

  • A compiler is a tool that converts high-level programming language(Java) into a lower-level language(machine code or bytecode).

​

​

53 of 275

Q. Is it possible to use JSX without React?

  • Yes, it's possible to use JSX without React by creating your own transpiler like Babel.

​

  • However, this is not recommended since JSX is tightly integrated with React and relies on many React-specific features.

54 of 275

5: Components - Functional/ Class

Q1. What are React Components? What are the main elements of it?

Q2. What are the Types of React components? What are Functional Components?

Q3. How do you pass data between functional components in React?

Q4. What is Prop Drilling in React?

Q5. Why to Avoid Prop Drilling? In how many ways can avoid Prop Drilling?

Q6. What are Class Components In React?

Q7. How to pass data between class components in React?

Q8. What is the role of this keyword in class components?

Q9. What are the 5 differences btw Functional components & Class components?

55 of 275

Q. What are React Components? What are the main elements of it?

  • In React, a component is a reusable building block for creating user interfaces.

56 of 275

Q. What are the Types of React components? What are Functional Components?

  • Functional components are declared as a JavaScript function.

​

  • They are stateless component, but with the help of hooks, they can now manage state also.

​

Types of Components

1. Functional Components

2. Class Components

57 of 275

Q. How do you pass data between functional components in React?

​

  • props (properties) are a way to pass data from a parent component to a child component.

​

58 of 275

Q. What is Prop Drilling in React?

  • Prop drilling is the process of passing down props through multiple layers of components.

​

Parent Component

    • Data

Child Component

    • Data

Gran Child Component

    • Data

59 of 275

Q. Why to Avoid Prop Drilling? In how many ways can avoid Prop Drilling?

Root App

Parent 1

Parent 2

Child 1

Child 2

Data

Data

Data

Data

Root App

Parent 1

Parent 2

Child 1

Child 2

Data

Using Prop Drilling

Avoiding Prop Drilling

60 of 275

Q. Why to Avoid Prop Drilling? In how many ways can avoid Prop Drilling?

  • Why to avoid Prop Drilling:
  • Maintenance: Prop drilling can make code harder to maintain as changes in data flow require updates across multiple components.
  • Complexity: It increases code complexity and reduces code readability.
  • Debugging: Debugging becomes challenging when props need to be traced through numerous components.

5 Ways to avoid Prop Drilling

1. Using Context API

2. Using Redux

3. Using Component Composition

4. Using Callback Functions

5. Using Custom Hooks

61 of 275

Q. What are Class Components In React?

  • Class components are defined using JavaScript classes.

​

  • They are stateful components by using the lifecycle methods.

​

  • The render method in a class component is responsible for returning JSX.

Types of Components

1. Functional Components

2. Class Components

62 of 275

Q. How to pass data between class components in React?

  • this.props can be used in child component to access properties/ data passed from parent component.

63 of 275

Q. What is the role of this keyword in class components?

  • this keyword is used to refer to the instance of the class.

64 of 275

Q. What are the 5 differences btw Functional components & Class components?

Functional Component

Class Component

1. Syntax: Defined as a JS function.

Defined as a JS(ES6) class.

2. State: Originally stateless but can now maintain state using hooks.

Can manage local state with this.state.

3. Lifecycle methods: No

Yes

4. Readability: more readable & concise.

Verbose(complex).

5. this keyword: No

Yes (Access props using this.props)

6. Do not have render method.

Have render method.

65 of 275

6: Routing

Q1. What is Routing and Router in React?

Q2. How to Implement Routing in React?

Q3. What are the roles of <Routes> & <Route> component in React Routing?

Q4. What are Route Parameters in React Routing?

Q5. What is the role of Switch Component in React Routing?

Q6. What is the role of exact prop in React Routing?

66 of 275

Q. What is Routing and Router in React?

Routing allows you to create a single-page web application with navigation, without the need for a full-page refresh.

Routing

React Router is a library for handling routing and enables navigation and rendering of different components based on the URL.

React Router

67 of 275

Q. How to Implement Routing in React?

  • Command to install router:

68 of 275

Q. How to Implement Routing in React?

Step 1

    • Install React Router

Step 2

    • Create Navigation

Step 3

    • Create Routes

69 of 275

Q. What are the roles of <Routes> & <Route> component in React Routing?

  • The <Routes> component is used as the root container for declaring your collection of routes.

​

  • The <Route> component is used to define a route and specify the component that should render when the route matches.
    • For example, in this code if user enter “websitename.com/about” in url, then matching “About” component will be rendered.

70 of 275

Q. What are Route Parameters in React Routing?

  • Route parameters in React Router are a way to pass dynamic values(data) to the component as part of the URL path.

71 of 275

Q. What is the role of Switch Component in React Routing?

  • Switch component ensures that only the first matching <Route> is rendered and rest are ignored.
    • For example, Switch is commonly used to handle 404 or "not found" routes.

​

72 of 275

Q. What is the role of exact prop in React Routing?

  • exact prop is used with the <Route> component to match exactly to the provided path.

73 of 275

7: Hooks -useState/ useEffect

Q1. What are React Hooks? What are the Top React Hooks?

Q2. What are State, Stateless, Stateful and State Management terms?

Q3. What is the role of useState() hook and how it works?

Q4. What is the role of useEffect(). How it works and what is its use?

Q5. What is Dependency Array in useEffect() hook?

Q6. What is the meaning of the empty array [] in the useEffect()?

74 of 275

Q. What are React Hooks? What are the Top React Hooks?

  1. React Hooks are inbuilt functions provided by React that allow functional components to use state and lifecycle features.

​

  • Before Hooks, class components lifecycle methods were used to maintain state in React applications.

​

  • To use React Hook first we first have to import it from React library:

​

State

1. useState:

Side effects

2. useEffect:

Context

3. useContext:

Complex state

4. useReducer:

Memoization

5. useCallback:

Performance

6. useMemo:

Refs

7. useRef:

Synchronous Side effects.

8. useLayoutEffect:

75 of 275

Q. What are State, Stateless, Stateful and State Management terms?

  • "state" refers to the current data of the component.
  • Stateful or state management means, when a user performs some actions on the UI, then the React application should be able to update and re-render that data or state on the UI.

76 of 275

Q. What is the role of useState() hook and how it works?

77 of 275

Q. What is the role of useState() hook and how it works?

  • The useState hook enables functional components to manage state.

​

  • useState() working: usestate() function accept the initial state value as the parameter and returns an array with two elements:
  • The first element is the current state value (count in this code).
  • Second element is the function that is used to update the state (setCount in this code).

​

  • The concept of assign array elements to individual variables is called array destructuring.

78 of 275

Q. What is the role of useEffect(). How it works and what is its use?

  • The useEffect Hook in React is used to perform side effects in functional components.

​

  • For example, data fetching from API, subscriptions or any other operation that needs to be performed after the component has been rendered.

2. Rendered after side effects by useEffect(eg: Loading data from external API)

Rendered initially

79 of 275

Q. What is the role of useEffect(). How it works and what is its use?

  • 2 points to remember about useEffect():
  • useEffect() is called after the component renders. Example, side effects.
  • useEffect() function will accept two parameter: (Effect function, dependency array).

Browser Output

80 of 275

Q. What is Dependency Array in useEffect() hook?

  • Dependencies arrays(optional) act as triggers for useEffect to rerun; meaning if any of dependencies values change, the code inside useEffect() will be executed again.

81 of 275

Q. What is Dependency Array in useEffect() hook?

82 of 275

Q. What is the meaning of the empty array [] in the useEffect()?

  • An empty array [] indicates that the effect function should only run once.

83 of 275

8: Hooks - useContext/ useReducer

Q1. What is the role of useContext() hook?

Q2. What is createContext() method? What are Provider & Consumer properties?

Q3. When to use useContext() hook instead of props in real applications?

Q4. What are the similarities between useState() and useReducer() hook?

Q5. What is useReducer() hook? When to use useState() and when useReducer()?

Q6. What are the differences between useState() and useReducer() Hook?

Q7. What are dispatch & reducer function in useReducer Hook?

Q8. What is the purpose of passing initial state as an object in UseReducer?

​

84 of 275

Q. What is the role of useContext() hook?

Root App

Parent 1

Parent 2

Child 1

Child 2

Data

Data

Data

Data

Root App

Parent 1

Parent 2

Child 1

Child 2

Data

Using Prop Drilling

Avoiding Prop Drilling

  • Prop drilling is the process of passing down props through multiple layers of components.

​

85 of 275

Q. What is the role of useContext() hook?

  • useContext in React provides a way to pass data from parent to child component without using props.

​

86 of 275

Q. What is createContext() method? What are Provider & Consumer properties?

  • createContext() function returns an object with Provider and Consumer properties.
  • The Provider property is responsible for providing the context value to all its child components.
  • useContext() method or Consumer property can be used to consume the context value in child components.

​

​

87 of 275

Q. When to use useContext() hook instead of props in real applications?

    • You can centralize and pass the theme selection of the application from the parent to all the deep child components.

1. Theme Switching (Dark/ Light)

    • You can centralize and pass the language selection of the application from the parent to all the child components.

2. Localization (language selection)

    • Common configuration settings like API endpoints can be centralized and change in the parent component will pass the setting to all its child components

3. Centralize Configuration Settings

    • Any other user preferences apart from theme and localization can also be centralized.

4. User Preferences

    • Components that trigger or display notifications can access the notification state from the context.

5. Notification System

  • Use useContext instead of props when you want to avoid prop drilling and access context values directly within deeply nested components.

Component 1

Component 2

Component 3

Component 4

Component 1

Component 2

  • Props are good
  • useContext is good

88 of 275

Q. What are the similarities between useState() and useReducer() hook?

89 of 275

Q. What are the similarities between useState() and useReducer() hook?

  • 3 Similarities between useState() and useReducer() hook:

​

    • Both hooks provide a way to update state and trigger a re-render of the component.

​

    • Both useState and useReducer return an array with two elements:
      1. First element is current state
      2. Second element is a function that can be used to update the state.

90 of 275

Q. What is useReducer() hook? When to use useState() and when useReducer()?

91 of 275

Q. What is useReducer() hook? When to use useState() and when useReducer()?

92 of 275

Q. What is useReducer() hook? When to use useState() and when useReducer()?

  • useReducer() is an alternative to the useState() hook when dealing with complex state in your components.

Component (Event Handler)

Dispatch

Reducer (Function)

Complex State Update

Component

Re-render

93 of 275

Q. What are the differences between useState() and useReducer() Hook?

useState

useReducer

1. useState is simpler to use and used for managing simple state values.

​

useReducer is more appropriate for complex state logic or when the next state depends on the previous one.

2. It is suitable for managing a single piece of state.

It is well-suited for managing multiple pieces of state that needs to be updated together.

3. The useState hook takes an initial state as an argument and returns an array with two elements: the current state and a function to update the state.

The useReducer hook takes a reducer function and an initial state as arguments and returns the current state and a dispatch function.

94 of 275

Q. What are dispatch & reducer function in useReducer Hook?

  • dispatch function is returned by the useReducer hook, and it is used to dispatch actions(type) to reducer function that trigger state updates.
  • The reducer function is a function responsible for updating the state based on the action received from dispatch function.

​

​

​

95 of 275

Q. What is the purpose of passing initial state as an object in UseReducer?

  • By setting initial state as an object, you can manage complex states with useReducer functions.

96 of 275

9: Hooks - useCallback/ useMemo/ useRef/ useLayoutEffect

Q1. What is the role of useCallback() hook in React?

Q2. What parameters does the useCallback hook accept & what does it returns?

Q3. What is the role of useMemo() Hook?

Q4. What is the role of useRef() Hook?

Q5. What is useLayoutEffect() Hook? Compare it with useEffect() hook.

Q6. When to use useLayoutEffect() Hook?

97 of 275

Q. What is the role of useCallback() hook in React?

  • The useCallback hook is used to memorize functions in functional components.
  • When passing function as a prop from parent component to child component, then passing memorized function avoid unnecessary re-creation of the function on each render.

98 of 275

Q. What parameters does the useCallback hook accept & what does it returns?

  • The first parameter is the callback function that you want to memorize.
  • The second parameter is an array of dependencies. It specifies the values that, when changed, will cause the memoized callback to be re-created.
  • The useCallback hook returns the memoized version of the callback function.

99 of 275

Q. What is the role of useMemo() Hook?

  • The useMemo hook is a performance optimization function that memorizes the result of a computation.
  • The advantage is it prevent unnecessary recalculations and rendering. It is particularly useful when dealing with expensive calculations.
  • userMemo accept two parameters:
    1. The first argument of useMemo() is a function that performs some expensive computation and return some result(processData).
    2. The second argument([data]) is an array of dependencies ([data]). The memorized value will only be recalculated if this dependency will change.
  • useMemo returns a memorized version of the calculated value.

100 of 275

Q. What is the role of useRef() Hook?

  • The useRef hook is primarily used for accessing and interacting with the DOM elements.
  • The advantage is, the useRef hook persists across renders and does not trigger re-renders when it changes.

101 of 275

Q. What is useLayoutEffect() Hook? Compare it with useEffect() hook.

Rendered after side effects by useEffect(eg: Loading data from external API)

Rendered initially

102 of 275

Q. What useLayoutEffect() Hook? Compare it with useEffect() hook.

Same Code

103 of 275

Q. What useLayoutEffect() Hook? Compare it with useEffect() hook.

useEffect

useEffect runs asynchronously and is scheduled after the UI has been rendered.

This means useEffect won't block the browser from updating the UI.

useLayoutEffect

useLayoutEffect run synchronously with the UI rendering.

This means useLayoutEffect can block the browser from updating the UI.

104 of 275

Q. When to use useLayoutEffect() Hook?

  • For example, below the paragraph element style(bold/ normal) is dependent on the side effect data, then we use useLayoutEffect.

105 of 275

Q. When to use useLayoutEffect() Hook?

  • The useLayoutEffect hook in React should be used when you need to perform actions that involve manipulating the layout of the DOM based on side effects, such as data fetching.
  • In other words, you want the layout changes to be reflected before the browser paints the updated UI.

106 of 275

10: Hooks - Best Practices/ Short Answer

Q1. What are the Rules or Best Practices for hooks implementation?

Q2. What are Custom Hooks?

Q3. Tell 3 scenarios in which you can use useEffect() hook?

Q4. What useState() hook return in React?

Q5. How can you conditionally run effects with useEffect?

Q6. What problem do React Hooks solve?

Q7. What is the advantage of React Hooks over Lifecycle methods?

Q8. What is Context API?

Q9. What are the uses of all the Hooks in React?

107 of 275

Q. What are the Rules or Best Practices for hooks implementation?

  • Rules or Best Practices for hooks implementation
  • Hooks can only be called at the top level of a component.
  • Hooks can only be called directly inside React components.
  • Keep hooks order consistent.

108 of 275

Q. What are Custom Hooks?

  • Custom Hooks in React are JavaScript functions developed by developers to encapsulate reusable logic for their applications.

109 of 275

Q. What useState() hook return in React?

1. StateVariable is the current state value.

1. stateUpdaterFunction is a function that used to update the state.

110 of 275

Q. Tell 3 scenarios in which you can use useEffect() hook?

useEffect() hook can be used for:

1. Fetching data from external API.

2. For managing subscriptions or event listeners.

3. For manual DOM manipulations.

4. For setting up timers or intervals.

111 of 275

Q. How can you conditionally run effects with useEffect?

  • In React, you can conditionally run effects with the useEffect hook by placing the if-else condition inside the hook itself.

112 of 275

Q. What problem do React Hooks solve?

  • React Hooks solve problems related to managing state, lifecycle, and side effects in functional components

113 of 275

Q. What is the advantage of React Hooks over Lifecycle methods?

  • Simplicity: Hooks eliminate the need for class components, making the code more readable and reducing boilerplate.

114 of 275

Q. What is Context API?

  • Context API is a broader concept for the creation of context and its management.

​

  • It can be achieved by using useContect Hook.

​

115 of 275

Q. What are the uses of all the Hooks in React?

State

1. useState:

Side effects

2. useEffect:

Context

3. useContext:

Complex state

4. useReducer:

Memorize function

5. useCallback:

Memorize function result

6. useMemo:

Refs

7. useRef:

Synchronous Side effects.

8. useLayoutEffect:

116 of 275

Q. What are the uses of all the Hooks in React?

Used for adding state to functional components.

1. useState:

Enables performing side effects in functional components, such as data fetching.

2. useEffect:

Allows functional components to consume values from a React context.

3. useContext:

Provides an alternative to useState when the state logic is more complex.

4. useReducer:

Memoizes a callback function to prevent unnecessary re-renders of child components.

5. useCallback:

Memoizes the result of a function to optimize performance by avoiding unnecessary recalculations.

6. useMemo:

Creates a mutable object that persists across renders (used for interacting with DOM elements).

7. useRef:

Similar to useEffect but fires synchronously after all DOM mutations.

8. useLayoutEffect:

117 of 275

11: Components LifeCycle Methods - I

Q1. What are Component life cycle phases?

Q2. What are Component life cycle methods?

Q3. What are Constructors in class components? When to use them?

Q4. What is the role of super keyword in constructor?

Q5. What is the role of render() method in component life cycle?

Q6. How the State can be maintained in a class component?

Q7. What is the role of componentDidMount() method in component life cycle?

118 of 275

Q. What are Component life cycle phases?

Component Life Cycle Phases

1. Mounting Phase

(Component creation started)

2. Updating Phase

(Component updates)

3. Unmounting Phase

(Removal from the DOM )

  • This phase occurs when an instance of a component is being created and inserted into the DOM.
  • This phase occurs when a component is being re-rendered as a result of changes to either its props or state.
  • This phase occurs when a component is being removed from the DOM.

119 of 275

Q. What are Component life cycle methods?

  • Component lifecycle methods are special methods that get called at various stages of a component's life.

Component Life Cycle

Mounting Phase

constructor()

getDerivedStateFromProps()

render()

componentDidMount()

Updating Phase

getDerivedStateFromProps()

shouldComponentUpdate()

render()

getSnapshotBeforeUpdate()

componentDidUpdate()

Unmounting Phase

componentWillUnmount()

120 of 275

Q. What are Constructors in class components? When to use them?

  • constructor is a special method that is called when an instance of the class is created.
  • Constructor is used for initializing the component's state or performing any setup that is needed before the component is rendered.

Component Life Cycle

Mounting Phase

constructor()

Updating Phase

Unmounting Phase

121 of 275

Q. What is the role of super keyword in constructor?

  • super keyword is used in the constructor of a class component to call the constructor of the parent class.
  • This is necessary to ensure that the initialization logic of the parent class is executed.

122 of 275

Q. What is the role of render() method in component life cycle?

Component Life Cycle

Mounting Phase

constructor()

getDerivedStateFromProps()

render()

componentDidMount()

Updating Phase

getDerivedStateFromProps()

shouldComponentUpdate()

render()

getSnapshotBeforeUpdate()

componentDidUpdate()

Unmounting Phase

componentWillUnmount()

123 of 275

Q. What is the role of render() method in component life cycle?

  • Render() method returns the React elements that will be rendered to the DOM.

124 of 275

Q. How the State can be maintained in a class component?

  • Two step process to maintain state:
  • this.setState() method is used to update the state.
  • this.state property is used to render the update state in DOM.

125 of 275

Q. What is the role of componentDidMount() method in component life cycle?

Component Life Cycle

Mounting Phase

constructor()

getDerivedStateFromProps()

render()

componentDidMount()

Updating Phase

getDerivedStateFromProps()

shouldComponentUpdate()

render()

getSnapshotBeforeUpdate()

componentDidUpdate()

Unmounting Phase

componentWillUnmount()

126 of 275

Q. What is the role of componentDidMount() method in component life cycle?

2. Rendered after componentDidMount() to run Side effects(ex: loading data from external API) and then call render() method of updating phase again.

1. Rendered after constructor initialization.

127 of 275

Q. What is the role of componentDidMount() method in component life cycle?

  • componentDidMount() lifecycle method in React is the part of mounting phase and is called after a component has been rendered to the DOM.
  • Mostly used for side effects. For example, external data fetching or setting up subscriptions.

128 of 275

12: Components LifeCycle Methods - II

Q1. What is the role of componentDidUpdate() method in component life cycle?

Q2. What is the role of componentWillUnmount() method in component life cycle?

Q3. How do you initialize state in a class component?

Q4. In which lifecycle phase component will be re-rendered?

Q5. What will happen if you don’t define a constructor in your React component?

Q6. Why we need class components when we already have functional components?

Q7. What are the 5 main methods of component lifecycle?

129 of 275

Q. What is the role of componentDidUpdate() method in component life cycle?

Component Life Cycle

Mounting Phase

constructor()

getDerivedStateFromProps()

render()

componentDidMount()

Updating Phase

getDerivedStateFromProps()

shouldComponentUpdate()

render()

getSnapshotBeforeUpdate()

componentDidUpdate()

Unmounting Phase

componentWillUnmount()

130 of 275

Q. What is the role of componentDidUpdate() method in component life cycle?

2. Rendered after componentDidMount() Side effects.

1. Rendered after constructor initialization.

3. For any property or state change, componentDidUpdate() method will refetch the data and re-rendered in the DOM.

131 of 275

Q. What is the role of componentDidUpdate() method in component life cycle?

  • componentDidUpdate() lifecycle method is the part of updating phase and is called after a component has been updated(property of state change).

​

  • For example, after data is initially fetched by the componentDidMount method, if the user changes some property in the component (e.g., triggering a re-render with updated props or state), then the componentDidUpdate method can be used to re-fetch data again.

132 of 275

Q. What is the role of componentWillUnmount() method in component life cycle?

Component Life Cycle

Mounting Phase

constructor()

getDerivedStateFromProps()

render()

componentDidMount()

Updating Phase

getDerivedStateFromProps()

shouldComponentUpdate()

render()

getSnapshotBeforeUpdate()

componentDidUpdate()

Unmounting Phase

componentWillUnmount()

133 of 275

Q. What is the role of componentWillUnmount() method in component life cycle?

2. Rendered after componentDidMount().

1. Rendered after constructor() initialization.

3. Re-rendered after, componentDidUpdate() on any state or property change.

3. Before unmounting of component, componentWillUnmount() will do the cleanup task.

134 of 275

Q. What is the role of componentWillUnmount() method in component life cycle?

  • componentWillUnmount() lifecycle method is called just before a component is unmounted and removed from the DOM.

​

  • It is used for cleanup tasks, freeing up resources or canceling any ongoing processes. For example, remove event listener or unsubscribe from any external service.

135 of 275

Q. How do you initialize state in a class component?

  • In a React class component, state is initialized in the constructor.

136 of 275

Q. In which lifecycle phase component will be re-rendered?

  • In the updating phase component will be re-rendered if any props or state is changed.

Component Life Cycle Phases

1. Mounting Phase

(Component creation started)

2. Updating Phase

(Component updates)

3. Unmounting Phase

(Removal from the DOM )

137 of 275

Q. What will happen if you don’t define a constructor in your React component?

  • If you don't define a constructor in your React component, React will automatically create a default constructor for you. This default constructor will call the constructor of the base class (Component) using super(props).

138 of 275

Q. Why we need class components when we already have functional components?

  • Previously, class components were used for managing state in React applications since functional components were stateless. However, with the introduction of hooks, functional components can also handle the state.
  • When we need class components now?

​

  1. To manage existing projects(legacy code), especially those built before the introduction of hooks.

​

  • To support some third-party libraries that might still be written as class components.

​

  • To support component lifecycle methods of the existing legacy code.

139 of 275

Q. What are the 5 main methods of component lifecycle?

Component Life Cycle Main Methods

1. constructor()

2. render()

3. componentDidMount()

4. componentDidUpdate()

5. componentWillUnmount()

140 of 275

Q. What are the 5 main methods of component lifecycle?

Initializes the component's state and automatically called when the component is being created.

1. constructor()

Returns UI elements based on the current state and props;

2. render()

Invoked after the component has been added to the DOM; used for data fetching and subscribing to external data sources.

3. componentDidMount()

Invoked after a component's state or props have been updated and it has been re-rendered; used for handling side effects after updates.

4. componentDidUpdate()

Called just before a component is unmounted and removed from the DOM; used for cleanup tasks and releasing resources.

5. componentWillUnmount()

141 of 275

13: Controlled & Uncontrolled Components

Q1. What are Controlled Components in React?

Q2. What are the Differences btw Controlled & Uncontrolled Components?

Q3. What are characteristics of controlled components?

Q4. What are the advantages of using controlled components in React forms?

Q5. How to handle forms in React?

Q6. How can you handle multiple input fields in a controlled form?

Q7. How do you handle form validation in a controlled component?

Q8. In what scenarios might using uncontrolled components be advantageous?

142 of 275

Q. What are Controlled Components in React?

  • A controlled component is a component whose form elements (like input fields or checkboxes) are controlled by the state of the application.

143 of 275

Q. What are the Differences btw Controlled & Uncontrolled Components?

144 of 275

Q. What are the Differences btw Controlled & Uncontrolled Components?

Controlled Components

Uncontrolled Components

1. Values are controlled by React state.

Values are not controlled by React state.

2. Event handlers update React state.

No explicit state update; values can be accessed directly from the DOM.

3. Don’t depend on useRef().

Commonly uses useRef() to access form element values.

4. Re-renders on state changes.

Less re-rendering since values are not directly tied to React state.

5. A recommended and standard practice for form handling in React.

Useful in certain scenarios but less commonly considered a best practice.

145 of 275

Q. What are characteristics of controlled components?

  • Characteristics of controlled components:
  • State Control: The value of the form element is stored in the component's state.
  • Event Handling: Changes to the form element trigger an event (e.g., onChange for input fields).
  • State Update: The event handler updates the component's state with the new value of the form element.
  • Re-rendering: The component re-renders with the updated state, and the form element reflects the new value.

146 of 275

Q. What are the advantages of using controlled components in React forms?

  • Top 3 benefits of using controlled components in React forms:

​

  1. In controlled components, form elements have their values managed by React state, ensuring a single source of truth.

​

  • This approach facilitates predictable and synchronized updates, making it easier to implement features such as form validation, and dynamic rendering, and seamless integration with React's lifecycle methods.

​

  • Controlled components offer better control and maintainability compared to uncontrolled components, making them the best practice for handling forms in React applications.

147 of 275

Q. How to handle forms in React?

  • The preferred and recommended approach for handling forms in React is by using controlled components.

148 of 275

Q. How can you handle multiple input fields in a controlled form?

  • Maintain separate state variables for each input field and update them individually using the onChange event.

149 of 275

Q. How do you handle form validation in a controlled component?

  • By using conditional rendering based on the state and validate input values before updating the state.

150 of 275

Q. In what scenarios might using uncontrolled components be advantageous?

  • Uncontrolled components can be beneficial when integrating with non-React libraries, or when dealing with forms where controlled components are not possible.

151 of 275

14: Code Splitting

Q1. What is Code Splitting in React?

Q2. How to Implement Code Splitting in React?

Q3. What is the role of Lazy and Suspense methods in React?

Q4. What are the Pros and Cons of Code Splitting?

Q5. What is the role of the import() function in code splitting?

Q6. What is the purpose of the fallback prop in Suspense?

Q7. Can you dynamically load CSS files using code splitting in React?

Q8. How do you inspect and analyze the generated chunks in a React application?

152 of 275

Q. What is Code Splitting in React?

Bundle project files

​

  • Code splitting is a technique to split the JavaScript bundle into smaller chunks, which are loaded on-demand.

.css

.png

.sass

.js

.css

.png

.sass

.js

With Code Splitting Implemented

All in one Request

Each chunk Loaded on demand

Without Code Splitting

153 of 275

Q. How to Implement Code Splitting in React?

  • 3 steps for Code splitting in React:
  • Use React.lazy() to lazily import components.
  • Wrap components with Suspense to handle loading.
  • Configure your build tool (e.g., Webpack) for dynamic imports.

154 of 275

Q. How to Implement Code Splitting in React?

155 of 275

Q. What is the role of Lazy and Suspense methods in React?

  • React.lazy is a function that allows you to load a component lazily.

​

  • It enables code splitting by allowing you to import a component asynchronously/ dynamically, meaning component is loaded only when needed only.
  • The Suspense component is used to display a fallback UI while the lazily loaded component is being fetched.

156 of 275

Q. What are the Pros and Cons of Code Splitting?

5 Pros of Code Splitting:

1. Faster Initial Load Time:

Code splitting reduces the initial load time of your application by only loading the necessary code for the current view or feature. Good for performance.

2. Optimized Bandwidth Usage:

By loading only, the code needed for a specific page, it reduces the amount of data transferred over the network. Good for slow network.

3. Improved Caching:

Smaller, more focused code chunks are more likely to be cached by the browser.

4. Parallel Loading:

Multiple smaller chunks can be loaded simultaneously, leading to faster overall loading times.

5. Easier Maintenance:

Code splitting can make your codebase more modular, independent and easier to maintain.

157 of 275

Q. What are the Pros and Cons of Code Splitting?

5 Cons of Code Splitting:

1. Complexity:

Implementing code splitting introduces additional complexity to your application. This complexity can make the development process slow.

2. Tooling Dependencies:

Proper code splitting often requires specific build tools and configurations, such as Webpack and Babel. Managing these tools is challenging.

3. Potential for Runtime Errors:

Dynamically loading code at runtime can introduce the possibility of runtime errors. Careful testing is necessary to catch such issues.

4. Increased Number of Requests:

Code splitting may increase the number of HTTP requests needed to fetch all the necessary chunks. This can impact performance.

5. Learning Curve:

Developers who are new to code splitting may need time to understand the concepts and best practices. This can be a challenging.

158 of 275

Q. What is the role of the import() function in code splitting?

  • The import() function returns a promise that allow dynamic loading of modules.

159 of 275

Q. What is the purpose of the fallback prop in Suspense?

  • The fallback prop provides a loading indicator or UI while the dynamically imported component is being loaded.

160 of 275

Q. Can you dynamically load CSS files using code splitting in React?

  • Yes, using dynamic import() for CSS files allows you to load styles on-demand along with the corresponding components.

161 of 275

Q. How do you inspect and analyze the generated chunks in a React application?

  • Use tools like Webpack Bundle Analyzer to analyze the size and composition of chunks.

162 of 275

15: React - Others

Q1. What is a Higher-Order Component in React?

Q2. What are the 5 ways to Style React components? Explain Inline Styles?

Q3. What are the differences between React & React Native?

Q4. What is GraphQL?

Q5. What are the Top 3 ways to achieve state management? When to use what in React?

Q6. How can you Implement Authentication in a React application?

Q7. What is the use of React Profiler?

Q8. What is the difference between fetch & axios for api calls in React?

Q9. What are the popular Testing Libraries for React?

Q10. How can you Optimize Performance in a React application?

Q11. Explain Reactive Programming with example?

Q12. In how many ways can we implement Reactive Programming in React?

Q13. How to pass data from child component to parent Component in React?

163 of 275

Q. What is a Higher-Order Component in React?

  • A Higher-Order Component is a component which takes another component as an argument and adds extra features to another component.

​

  • HOC can be used for providing logging functionality to all the components in a reusable way.

164 of 275

Q. What are the 5 ways to Style React components? Explain Inline Styles?

5 ways to Style React components

1. Inline Styles

2. CSS Stylesheets

3. CSS-Modules

4. Global Stylesheets

5. CSS Frameworks

165 of 275

Q. What are the differences between React & React Native?

React

React Native

1. React is a library

React Native is a framework.

2. React is used for building web interfaces.

React Native is used for building mobile applications.

3. Run on Web browsers.

Run on iOS and Android platforms.

4. HTML and CSS are used for UI.

Native UI components (e.g., View, Text) are used for UI.

5. Deployed as web applications.

Deployed through app stores(e.g., App Store, Google Play).

166 of 275

Q. What is GraphQL?

  • GraphQL is a query language for APIs (Application Programming Interfaces) and a runtime for executing those queries with your existing data.

​

  • GraphQL and React are often used together. React components can use GraphQL queries to fetch the data required for rendering.

167 of 275

Q. What are the Top 3 ways to achieve state management? When to use what in React?

    • When to use: Simple component-level state.
    • Reason: Ideal for applications having small components and isolated state because it is Lightweight and built into React only.

1. useState Hook:

    • When to use: Prop drilling avoidance for sharing global data.
    • Reason: Simplifies data passing through the component tree, reducing the need for manual prop drilling.

2. Context API:

    • When to use: Large-scale applications with complex state.
    • Reason: Centralized store and actions provide a predictable state management pattern, aiding in debugging and scalability.

3. Redux:

168 of 275

Q. How can you Implement Authentication in a React application?

Front-end/ Client-side

Middleware/ Server-side/ Backend

1. POST: {username, password}

2. Authenticate &

create JWT Token

3. Return Response {JWT token}

4. Store JWT token at local storage

5. Request Data {JWT token: Header}

7. Send Data

6. Validate token signature

8. Display data on browser

169 of 275

Q. What is the use of React Profiler?

  • React Profiler is a set of tools in React that allows developers to profile(analyze) the performance of a React application.

170 of 275

Q. What is the difference between fetch & axios for api calls in React?

  1. fetch is a built-in JavaScript function, so it doesn't require any additional libraries.
  2. fetch returns Promises, making it easy to work with asynchronous code using async/await syntax.
  3. If you want to keep http requests simple, fetch is a good choice.

​

  1. Axios is a third-party library, that simplifies the process of making HTTP requests.
  2. Axios allows you to use interceptors, which can be good for tasks like request/response logging, authentication, and error handling.
  3. If you want to intercept http request/response, or improve error handling then Azios has more features to do it.

​

171 of 275

Q. What are the popular Testing Libraries for React?

Testing Libraries in React

Jest

React Testing Library

Enzyme

Cypress

172 of 275

Q. How can you Optimize Performance in a React application?

1. Memoization with useMemo and useCallback:

2. Optimizing Renders with React.Fragment:

3. Lazy Loading with React.lazy:

4. Code Splitting:

5. Optimizing Images and Assets

173 of 275

Q. How can you Optimize Performance in a React application?

Use this hooks to memoize values and, reducing unnecessary recalculations.

1. Memoization with useMemo and useCallback:

Use it to avoid unnecessary wrapper elements that could cause additional DOM nodes.

2. Optimizing Renders with React.Fragment:

Use it to load components lazily, reducing the initial bundle size and improving initial loading performance.

3. Lazy Loading with React.lazy:

Employ code splitting to divide your application into smaller chunks that are loaded on demand, improving initial load times.

4. Code Splitting:

Compress and optimize images, use responsive images, and leverage lazy loading for images to reduce network and rendering overhead.

5. Optimizing Images and Assets:

174 of 275

Q. Explain Reactive Programming with example?

  • Reactive programming is a programming paradigm that focuses on reacting to changes and events in a declarative and asynchronous manner.

​

  • Declarative means a programming style where you write the code for what you want to achieve, rather than specifying step-by-step how to achieve it. For example, JSX in React has declarative syntax.

​

  • Asynchronously means an action that does not block other actions.

​

Live Search Suggestion

175 of 275

Q. In how many ways can we implement Reactive Programming in React?

Reacting to changes in local component state and passing data reactively through props.

1. State and Props

Leveraging useState and useEffect hooks for managing state and side effects in functional components.

2. React Hooks:

Reacting to user interactions through event handling and updating state accordingly.

3. Event Handling:

Sharing and managing global state reactively across components using the Context API.

4. Context API:

Using state management libraries like Redux for managing complex application state reactively.

5. Redux:

Using class components and lifecycle methods for handling side effects and updates.

6. Component Lifecycle Methods:

Utilizing async/await syntax for handling asynchronous operations reactively.

7. Async/Await:

Leveraging RxJS for handling asynchronous operations and data streams in a reactive manner.

8. RxJS and Observables:

176 of 275

Q. How to pass data from child component to parent Component in React?

  • Parent provides a callback function to child and then child component can then invoke this callback to pass data back to the parent.

177 of 275

16: Redux - Component/ Action/ Store/ Reducer

Q1. What is the role of Redux in React?

Q2. When to use Hooks and when to use Redux in React applications?

Q3. What is the Flow of data in React while using Redux?

Q4. How to install Redux for React application?

Q5. What are Action Creators in React Redux?

Q6. Difference between Action Creators, Action Object & Action Type?

Q7. Explain React Component Structure while using Redux?

Q8. What is the role of Store in React Redux?

Q9. What is the role of Reducer in Redux?

178 of 275

Q. What is the role of Redux in React?

  • Redux is an open-source JavaScript library used for state management.

​

  • Redux provides a centralized store that holds the entire state of an application and allows components to access and update the state in a predictable manner.

​

Store

(Centralize state)

Component1

Component2

Component3

Component4

Dispatcher

Dispatcher

Dispatcher

Dispatcher

Action

Reducer

Action

Action

Action

179 of 275

Q. When to use Hooks and when to use Redux in React applications?

  • Use React with Hooks when:
  • Your application is small or medium (5-50 Components)
  • Your application has simple state management.
  • State is specific to components.

​

  • Use React with Redux when:
  • Your application is big or complex (>50 Components)
  • Your application has complex global state management.
  • Share state among multiple components.

​

180 of 275

Q. What is the Flow of data in React while using Redux?

Component

(Component.js)

Action Creators

(action.js)

Store

(store.js)

Reducer

(reducer.js)

Interaction (click, mouse etc.)

Action Dispatch

(Component.js)

  • Flow of Data in React-Redux application

(Previous state, action)

(New/ Current state)

(Current state)

181 of 275

Q. How to install Redux for React application?

  • Install the necessary packages using npm

(run this command):

182 of 275

Q. What are Action Creators in React Redux?

  • Action creators are functions that create and return action objects.

183 of 275

Q. Difference between Action Creators, Action Object & Action Type?

  • Action creator functions are functions that create and return action objects.
  • Action object are plain JavaScript objects returned by action creator functions.
  • An action type is a string constant that defines the type of action.

184 of 275

Q. Explain React Component Structure while using Redux?

  • Example video of expected state management:

Component

(Component.js)

Action Creators

(action.js)

Store

(store.js)

Reducer

(reducer.js)

Interaction (click, mouse etc.)

Action Dispatch

(Component.js)

  • Flow of Data in React-Redux application

(Previous state, action)

(New state)

(Current state)

185 of 275

Q. Explain React Component Structure while using Redux?

186 of 275

Q. Explain React Component Structure while using Redux?

  • 5 Steps to implement Redux integration in component:
  • Import dependencies like connect function and action creators.
  • Define Functional Component to render & display elements.
  • Define function to dispatch action to reducer via store.
  • Define function to get state from Redux store back to component.
  • Connect both the above functions and the component to Redux store by connect() function.

187 of 275

Q. What is the role of Store in React Redux?

  • Redux store enables the application to update state using the defined reducer.

​

  • Redux Store is a centralized place for holding the state of all the components in the application.

Component

(Component.js)

Action Creators

(action.js)

Store

(store.js)

Reducer

(reducer.js)

Interaction (click, mouse etc.)

Action Dispatch

(Component.js)

  • Flow of Data in React-Redux application

(Previous state, action)

(New state)

(Current state)

188 of 275

Q. What is the role of Reducer in Redux?

  • A reducer is a function that takes the previous state and an action as arguments and returns the new state of the application.

​

Store

(store.js)

Reducer

(reducer.js)

(Previous state, action)

(New state)

189 of 275

17: Redux - Core Principles/ Pros-Cons/ Local & Redux State

Q1. Explain the Core Principles of Redux?

Q2. List 5 benefits of using Redux in React?

Q3. What are the differences between local component state & Redux state?

Q4. What are the challenges or disadvantages while using Redux?

190 of 275

Q. Explain the Core Principles of Redux?

1. Single Source of Truth (Store)

2. State is Read-Only (Unidirectional)

3. Changes using Pure Functions (Reducers)

4. Actions Trigger State Changes (Actions)

5. Predictable State Changes (Actions)

Component

(Component.js)

Action Creators

(action.js)

Store

(store.js)

Reducer

(reducer.js)

Interaction (click, mouse etc.)

  • Flow of Data in React-Redux application

(Previous state, action)

(Current state)

191 of 275

Q. Explain the Core Principles of Redux?

The entire application state is stored in one place, simplifying data management and ensuring a consistent view of the application.

1. Single Source of Truth:

State cannot be directly modified. To make changes to the state, you need to dispatch an action. This ensures that the state transitions are explicit and traceable.

2. State is Read-Only:

This ensures predictability and consistency because pure functions returns the same result if the same arguments are passed.

3. Changes using Pure Functions (Reducers):

Plain JavaScript objects (actions) describe state changes, guiding the store to invoke reducers and update the application state accordingly.

4. Actions Trigger State Changes:

State changes are determined by actions, fostering a predictable flow of data and simplifying debugging in response to specific actions.

5. Predictable State Changes with Actions:

192 of 275

Q. List 5 benefits of using Redux in React?

The application state is stored in a single, predictable and centralize source (the store).

1. Predictability & Centralization:

For larger application, Redux is a structured and scalable approach for managing state.

2. Maintainability:

Redux has powerful developer tools that make it easier to trace and debug state changes.

3. Debuggability:

Redux can be used with various JavaScript frameworks and libraries.

4. Interoperability:

Redux has a large and active community, resulting in a rich ecosystem of tools and extensions.

5. Community & Ecosystem:

193 of 275

Q. What are the differences between local component state & Redux state?

Local Component State

Redux State

1. Scope: Limited to the component where defined.

Global and accessible across components.

2. Management: Managed internally by the component.

Managed externally by the Redux store.

3. Performance: Generally, more performant for small-scale applications.

More performant for large applications.

4. Complexity: Simpler to set up and manage.

Comparatively complex to manage.

5. Testing: Simpler to test with component-specific state.

Requires more comprehensive testing due to global nature and interactions between components.

194 of 275

Q. What are the challenges or disadvantages while using Redux?

1. Boilerplate Code

2. Learning Curve

3. Verbosity and Complexity

4. Overhead for Small Projects

5. Global State for Local Components

6. Integration with Non-React Libraries

195 of 275

Q. What are the challenges or disadvantages while using Redux?

Implementing Redux requires writing extensive boilerplate code in action, reducer, store, increasing code volume and complexity.

1. Boilerplate Code:

Understanding Redux concepts can be challenging, posing a learning curve for developers, especially those new to React state management.

2. Learning Curve:

As projects grow, Redux code may become verbose and complex, demanding careful management of actions and reducers.

3. Verbosity and Complexity:

In small projects, Redux may introduce unnecessary complexity, potentially outweighing its benefits in development efficiency.

4. Overhead for Small Projects:

Overusing Redux for local state introduces unnecessary complexity, as not all state requires a global scope.

5. Global State for Local Components:

Integrating Redux with non-React libraries or frameworks may demand additional effort and customization, potentially adding complexity to the project.

6. Integration with Non-React Libraries:

196 of 275

18: Redux - Short Answer

Q1. What is Provider Component? How components getting the state from Redux store?

Q2. What is the role of Connect function in React-Redux?

Q3. What are the 4 Important Files in React-Redux project?

Q4. How to structure the project and maintain state in multiple components?

Q5. Explain the concept of immutability in the context of Redux?

Q6. Which are the typical properties of an Action object in React-Redux project?

Q7. Difference btw mapDispatchToProps & mapStateToProps in the connect?

Q8. What is the meaning of Unidirectional Data Flow in Redux?

Q9. How does Redux handle communication between components?

Q10. What is Payload property in Redux?

197 of 275

Q. What is Provider Component? How components getting the state from Redux store?

  • Provider component of react-redux will make the Redux store available to all connected components.

​

198 of 275

Q. What is the role of Connect function in React-Redux?

  • The connect function is used to make the connection between a React component and the Redux store.

199 of 275

Q. What are the 4 Important Files in React-Redux project?

src/

|-- actions.js

|-- reducer.js

|-- store.js

|-- CounterComponent.js

|-- App.js

|-- index.js

  • Important File for Redux Implementation:
  • actions.js: Defines action creators.
  • reducer.js: Update the state based on the action and previous state received from the store.
  • store.js: Stores the updated state received from reducer and export it to the components.
  • CounterComponent.js: React component connected to Redux, uses state and actions to render UI and handle user interactions.

200 of 275

Q. How to structure the project and maintain state in multiple components?

src/

|-- actions/

| |-- counterActions.js

| |-- userActions.js

|

|-- reducers/

| |-- counterReducer.js

| |-- userReducer.js

|

|-- store/

| |-- configureStore.js

|

|-- components/

| |-- CounterComponent.js

| |-- UserComponent.js

|

|-- App.js

|-- index.js

​

Root Component(App.js)

CounterComponent

src/

|-- actions.js

|-- reducer.js

|-- store.js

|-- CounterComponent.js

|-- App.js

|-- index.js

​

Root Component(App.js)

CounterComponent

UserComponent

  • Single component project structure
  • Multiple component project structure

201 of 275

Q. Explain the concept of immutability in the context of Redux?

  • In Redux, immutability is the principle that once an object (such as the state which is readonly) is created, it cannot be changed or modified directly.
  • To make changes to the state, you need to dispatch an action.

202 of 275

Q. Which are the typical properties of an Action object in React-Redux project?

  • 2 Typical properties in most of the React-Redux project:
  • Type: Type describes the type of action being performed.
  • Payload: Carries data from mostly from external API’s.

203 of 275

Q. Difference btw mapDispatchToProps & mapStateToProps in the connect?

  • mapDispatchToProps() function dispatches action to the store to update the state using a reducer.
  • mapStateToProps() function gets the state for the component from Redux store.

204 of 275

Q. What is the meaning of Unidirectional Data Flow in Redux?

  • In a unidirectional data flow architecture, data follows a single, clear path.
  • Redux enforces this pattern to provide a predictable state management mechanism.

Component

(Component.js)

Action Creators

(action.js)

Store

(store.js)

Reducer

(reducer.js)

Interaction (click, mouse etc.)

Action Dispatch

(Component.js)

  • Flow of Data in React-Redux application

(Previous state, action)

(New state)

(Current state)

205 of 275

Q. How does Redux handle communication between components?

  • Redux handles communication between components through a centralized state management system(store).

Store

(Centralize state)

Component1

Component2

Component3

Component4

Dispatcher

Dispatcher

Dispatcher

Dispatcher

Action

Reducer

Action

Action

Action

206 of 275

Q. What is Payload property in Redux?

  • Along with the action type, payload property in Redux actions holds the data being sent to the reducer.
  • Payload contains information necessary for the reducer to update the state based on the action.

207 of 275

19: Redux - Thunk/ Middleware/ Error Handling/ Flux

Q1. What is the difference between Regular Action creator & Thunk action creator?

Q2. Explain the concept of Middleware in React-Redux?

Q3. How can you handle Asynchronous Operations & side-effect in React-Redux?

Q4. How does Error Handling work in Redux?

Q5. What is the difference between Flux & Redux?

208 of 275

Q. What is the difference between Regular Action creator & Thunk action creator?

  • A regular action creator returns a plain JavaScript object with a type property, describing the type of action to be performed.
  • 3 main points about Thunks:
  • A Thunk action creator is a function that returns another function.
  • This returned function dispatched to the Redux store.
  • Thunks are used to handle complex asynchronous operations, such as data fetching or API calls, based on which the action will be decide.

209 of 275

Q. Explain the concept of Middleware in React-Redux?

Component

(Component.js)

Action Creators

(action.js)

Store

(store.js)

Reducer

(reducer.js)

Interaction (click, mouse etc.)

Action Dispatch

(Component.js)

  • Flow of Data in React-Redux application with Middleware

(Previous state, action)

(New state)

(Current state)

Middleware

API

  • Middleware provides a mechanism to add extra functionality to the Redux store.
  • Middleware can intercept actions, modify them, or execute additional logic in actions before they reach the reducers.

210 of 275

Q. How can you handle Asynchronous Operations & side-effect in React-Redux?

  • Use middleware and Redux Thunk action creators to handle asynchronous operations.

211 of 275

Q. How does Error Handling work in Redux?

  • Error handling in Redux can be done by using try-catch blocks in action creator, middleware and reducers.

212 of 275

Q. What is the difference between Flux & Redux?

  • Flux is an architecture pattern. It provides a set of design principles for organizing code to manage state in a unidirectional data flow.
  • Redux is a library that implements the Flux architecture.

213 of 275

20: JavaScript Essentials for React

Q1. What are Variables? What is the difference between var, let, and const ?

Q2. What are the Types of Conditions statements in JS?

Q3. What is Error Handling in JS?

Q4. What is the difference between Spread and Rest operator in JS?

Q5. What are Arrays in JS? How to get, add & remove elements from arrays?

Q6. What is Array Destructuring in JS?

Q7. What are Functions in JS? What are the types of function?

Q8. Difference between Named and Anonymous functions? When to use what?

Q9. What is Function Expression in JS?

Q10. What are Arrow Functions in JS? What is it use?

Q11. What are Callback Functions? What is it use?

Q12. What is Higher-order function In JS?

Q13. What are Pure and Impure functions in JS?

214 of 275

20: JavaScript Essentials for React

Q14. What are template literals and string interpolation in strings?

Q15. What are Objects in JS?

Q16. What is the difference between an array and an object?

Q17. How do you add or modify or delete properties of an object?

Q18. What is asynchronous programming in JS? What is its use?

Q19. What is the difference between synchronous and asynchronous programming?

Q20. What are Promises in JavaScript?

Q21. How to implement Promises in JavaScript?

Q22. What is the purpose of async/ await? Compare it with Promises?

Q23. What are Classes in JS?

Q24. What is a Constructor?

Q25. What is the use of this keyword?

215 of 275

Q. What are variables? What is the difference between var, let, and const ?

  • Variables are used to store data.

216 of 275

Q. What are variables? What is the difference between var, let, and const ?

  • const can be assigned only once, and its value cannot be changed afterwards.
  • var creates a function-scoped variable.
  • let creates a block-scoped variable

217 of 275

Q. What are the types of conditions statements in JS?

218 of 275

Q. What are the types of conditions statements in JS?

Types of condition statements

1. If/ else statements

2. Ternary operator

3. Switch statement

219 of 275

Q. What is Error Handling in JS?

  • Error handling is the process of managing errors.

220 of 275

Q. What is the difference between Spread and Rest operator in JS?

  • The spread operator(...) is used to expand or spread elements from an iterable (such as an array, string, or object) into individual elements.

Uses of Spread Operator

Copying an Array

Merging Arrays

Passing Multiple Arguments to a Function

221 of 275

Q. What is the difference between Spread and Rest operator in JS?

  • The rest operator is used in function parameters to collect all remaining arguments into an array.

222 of 275

Q. What are Arrays in JS? How to get, add & remove elements from arrays?

  • An array is a data type that allows you to store multiple values in a single variable.

Multiple

Variables

Array1

Array2

Array3

Array4

223 of 275

Q. What are Arrays in JS? How to get, add & remove elements from arrays?

Arrays methods

Get

indexOf()

find()

filter()

Slice()

Add

push()

concat()

Remove

pop()

shift()

splice()

Modify

map()

forEach()

Others

join()

length

sort()

reverse()

reduce()

some()

every()

224 of 275

Q. What are Arrays in JS? How to get, add & remove elements from arrays?

  • Pictorial representation of important method of arrays

225 of 275

Q. What is Array Destructuring in JS?

Multiple

Variables

Array1

Array2

Array3

Array4

Structuring

Destructuring

  • Array destructuring allows you to extract elements from an array and assign them to individual variables in a single statement.

​

  • Array destructuring is introduced in ECMAScript 6 (ES6).

226 of 275

Q. What is Array Destructuring in JS?

227 of 275

Q. What are Functions in JS? What are the types of function?

  • A function is a reusable block of code that performs a specific task.

Function keyword

Function name

Parameters list

Function body

Function call

Argument list

228 of 275

Q. What are Functions in JS? What are the types of function?

Types of Functions

Named Function

Anonymous Function

Function Expression

Arrow Function

IIFE

Callback Function

Higher-Order Function

229 of 275

Q. What is the difference between named and anonymous functions? � When to use what in applications?

  • Named functions have a name identifier
  • Anonymous functions do not have a name identifier and cannot be referenced directly by name.
  • Use named functions for big and complex logics.
  • Use when you want to reuse one function at multiple places.

​

  • Use anonymous functions for small logics.
  • Use when want to use a function in a single place.

​

230 of 275

Q. What is function expression in JS?

  • A function expression is a way to define a function by assigning it to a variable.

231 of 275

Q. What are Arrow Functions in JS? What is it use?

  • Arrow functions, also known as fat arrow functions, is a simpler and shorter way for defining functions in JavaScript.

Parameters list

Function body

232 of 275

Q. What are Callback Functions? What is it use?

  • A callback function is a function that is passed as an argument to another function.

​

​

Callback function

Higher-order function

233 of 275

Q. What is Higher-order function In JS?

  • A Higher order function:
  • Take one or more functions as arguments(callback function) OR
  • Return a function as a result

Callback function

High-order function

234 of 275

Q. What are Pure and Impure functions in JS?

  1. A pure function is a function that always produces the same output for the same input.
  2. Pure functions cannot modify the state.
  3. Pure functions cannot have side effects.
  1. An impure function, can produce different outputs for the same input.
  2. Impure functions can modify the state.
  3. Impure functions can have side effects.

235 of 275

Q. What are template literals and string interpolation in strings?

  • A template literal, also known as a template string, is a feature introduced in ECMAScript 2015 (ES6) for string interpolation and multiline strings in JavaScript.

236 of 275

Q. What are Objects in JS?

237 of 275

Q. What are Objects in JS?

  • An object is a data type that allows you to store key-value pairs.

Object

String/ number/ boolean/ null/ undefined

Array

Function

Object

238 of 275

Q. What is the difference between an array and an object?

239 of 275

Q. How do you add or modify or delete properties of an object?

240 of 275

Q. What is asynchronous programming in JS? What is its use?

241 of 275

Q. What is asynchronous programming in JS? What is its use?

  • Asynchronous programming allows multiple tasks or operations to be initiated and executed concurrently.

​

  • Asynchronous operations do not block the execution of the code.

Use of Asynchronous Operations

Fetching Data from API

Downloading Files

Uploading Files

Animations and Transitions

Time taking operations…

242 of 275

Q. What is the difference between synchronous and asynchronous programming?

243 of 275

Q. What are Promises in JavaScript?

  • Important points about promises:

​

  1. Promises in JavaScript are a way to handle asynchronous operations.

​

  • A Promise can be in one of three states: pending, resolved, or rejected.

​

  • A promise represents a value that may not be available yet but will be available at some point in the future.

244 of 275

Q. How to implement Promises in JavaScript?

resolve()

reject()

245 of 275

Q. How to implement Promises in JavaScript?

246 of 275

Q. Explain the use of async and await keywords in JS?

  • The async keyword is used to define a function as an asynchronous function, which means the code inside async function will not block the execution other code.

​

  • The await keyword is used within an async function to pause the execution of the function until a Promise is resolved or rejected.

247 of 275

Q. What are Classes in JS?

  • Classes serve as blueprints for creating objects and define their structure and behavior.
  • Advantages of classes:
    1. Object Creation
    2. Encapsulation
    3. Inheritance
    4. Code Reusability
    5. Polymorphism
    6. Abstraction

248 of 275

Q. What is a constructor?

  • Constructors are special methods within classes that are automatically called when an object is created of the class using the new keyword.

249 of 275

Q. What is the use of this keyword?

  • this keyword provides a way to access the current object or class.

250 of 275

21: Typescript

Q1. What is Typescript? Or What is the difference between Typescript and Javascript?

Q2. How to install Typescript and check version?

Q3. What is the difference between let and var keyword?

Q4. What is Type annotation?

Q5. What are Built in/ Primitive and User-Defined/ Non-primitive Types in Typescript?

Q6. What is “any” type in Typescript?

Q7. What is Enum type in Typescript?

Q8. What is the difference between void and never types in Typescript?

Q9. What is Type Assertion in Typescript?

Q10. What are Arrow Functions in Typescript?

251 of 275

21: Typescript

Q11. What is Object Oriented Programming in Typescript?

Q12. What are Classes and Objects in Typescript?

Q13. What is Constructor?

Q14. What are Access Modifiers in Typescript?

Q15. What is Encapsulation in Typescript?

Q16. What is Inheritance in Typescript?

Q17. What is Polymorphism in Typescript?

Q18. What is Interface in Typescript?

Q19. What's the difference between extends and implements in TypeScript ?

Q20. Is Multiple Inheritance possible in Typescript?

252 of 275

Q55. What is Typescript? Or What is the difference between Typescript and Javascript?

What is Typescript? What are the advantages of Typescript over Javascript?

Q55

  • Typescript is an open-source programming language. It’s advantage are:

​

  1. Typescript is a strongly typed language.

​

  • Typescript is a superset of JavaScript.  

​

  • It has Object oriented features.

​

  • Detect error at compile time.

​

  • In image, you can see TS(Typescript) contains JS(Javascript) and other additional features(type system, custom types, generics, enums, interfaces).

​

  • Browser can’t execute typescript, so finally TS Compiler will convert the TS to JS only, which browser can understand.

253 of 275

Q56. How to install Typescript and check version?

How to install Typescript and check version?

Q56

  • Here is the command which can be used to install typescript on your system(without Angular).

254 of 275

Q57. What is the difference between let and var keyword?

What is the difference between let and var keyword?

Q57

  • var and let are both used for variable declaration, but the difference between them is that var is global function scoped and let is block scoped. 

Compile time error, since let variable “i” scope is only limited inside for loop.

No error, since var variable “j” scope is not limited inside for loop, but inside the whole function fnLetVar().

255 of 275

Q58. What is Type annotation?

What is Type annotation in Typescript?

Q58

  • Type annotations helps the compiler in checking the types of variable and avoid errors.

​

For example, in below image when we set variable “i” as number. And now if you assign “i” a string or Boolean value, then Typescript will show the compile time error, which is good.

256 of 275

Q59. What are Built in/ Primitive and User-Defined/ Non-primitive Types in Typescript?

What are Built in/ Primitive and User-Defined/ Non-primitive Types in Typescript?

Q59

  • Built-in Data types are used to store simple data. Such as string, number, Boolean.

​

  • User-Defined types are used to store complex data. Such as array, enum, classes.

257 of 275

Q60. What is “any” type in Typescript?

What is “any” type in Typescript?

Q60

  • When a value is of type any, then no typechecking(no compile time errror) will be done by compiler and the flexibility is there to do anything with this variable.

​

For example, see in the image there is no compile time error for assigning different types to variable “x” because it is of any type.

258 of 275

Q61. What is Enum type in Typescript?

What is Enum type in Typescript?

Q61

  • Enums allows to define a set of named constants. 

Suppose you have a family of constants(Directions) like this in image.

Now if you want to insert some direction, for example SouthWest between 1 and 2, then it will be a problem, as you have to change this in all of your application.

So here enum is a better way as you don’t have to assign the numbers then.

259 of 275

Q62. What is the difference between void and never types in Typescript?

What is the difference between void and never types in Typescript?

Q62

  • void means no type. It is used when the function will return empty.

​

In image, fnVoid() function will return empty.

  • never means it will return never. It is used to throw error only.

​

For example, in image fnNever function which will not reach to its last line, and it always throws an exception.

260 of 275

Q63. What is Type Assertion in Typescript?

What is Type Assertion in Typescript?

Q63

  • Type assertion is a technique that informs the compiler about the type of a variable.

​

For example, in below image, if we do not put <String>, then typescript will try to assume the type of “secondname” by itself automatically.

But by putting <String>, we are asserting and informing the compiler about the type of secondName as String and now compiler will not do automatic typechecking.

261 of 275

Q64. What are Arrow Functions in Typescript?

What are Arrow Functions in Typescript?

Q64

  • An arrow function expression is a compact alternative to a traditional function expression.

​

In below image, you can see how the same function can be written using arrow function.

262 of 275

Q65. What is Object Oriented Programming in Typescript?

What is Object Oriented Programming(OOPS) in Typescript?

Q65

  • Object oriented programming is used to design structured and better applications.

​

In the image, you can see the concepts used in object oriented programming.

OOPS

Classes & Objects

Encapsulation

(Data Security)

Inheritance

(Code Reusability)

Polymorphism

(Multiple Forms)

Abstraction

(Hide Complexity)

263 of 275

Q66. What are Classes and Objects in Typescript?

What are Classes and Objects in Typescript?

Q66

  • Classes are blueprint for individual objects.
  • Objects are instances of a class.

Person is a class with two properties(name, age) and one method(familyCount)

objPerson is the object/instance of Person class. By this object only we can set Person class properties and call the method of the class.

264 of 275

Q67. What is Constructor?

What is a Constructor in Angular?

Q67

  • The constructor is a method in a TypeScript class that automatically gets called when the class is being instantiated. 
  • Constructor is widely used to inject dependencies(services) into the component class.
  • Constructor always run before any angular hook and it is not a part of Lifecycle Hooks.

265 of 275

Q68. What are Access Modifiers in Typescript?

What are Access Modifiers in Typescript?

Q68

Access Modifiers

public

private

protected

  • 3 types of Access modifiers in Typescript:

​

  1. The public modifier allows class varibale, properties and methods to be accessible from all locations.

​

  • The private modifier limits the visibility to the same-class only.

​

  • The protected modifier allows properties and methods of a class to be accessible within same class and within subclasses/derived/child.  

​

266 of 275

What are Access Modifiers in Typescript?

Q69

1. empId no error, as it is public.

​

​

2. empName error, as it is out of the class and it is private.

​

​

3. empAge error, as it is out of the class and it is protected.

​

3. But in PermanentEmployee empAge no error, because it is inside the derived class(PermanentEmployee) of Employee.

267 of 275

Q69. What is Encapsulation in Typescript?

What is Encapsulation in Typescript?

Q70

  • Encapsulation is the wrapping up of data and function together to access the data.

​

For example, here in code _empId is the data. We can make it public and then it can be accessible outside the Employee class.

​

But as per OOPS concept encapsulation this is wrong as it can lead to data security issues.

​

Therefore, we should mark this _empId data as private. And then create a function(getEmpId), which will help in accessing this _empId outside of this class.

​

Outside the class, in the last line we are calling getEmpId method to access/dispaly the data _empId.

​

​

  • What is the advantage of Encapsulation?

​

This is good for data security to prevent direct data access.

268 of 275

Q70. What is Inheritance in Typescript?

What is Inheritance in Typescript?

Q71

​

Animal

Eat()

Sleep()

Dog

Bark()

Cat

Meaow()

Base/ Parent/ Super Class

Derived/ Child/ Sub Class

  • Inheritance is a feature where derive class will acquire the properties and methods of base class.

​

For example, in the image Dog and Cat class are derived from Animal base class.

​

Therefore, Eat() and Sleep() methods of Animal base class will be automatically available inside Dog and Cat derived class without even writing it.

​

​

  • What is the advantage of Inheritance?

​

Inheritance is good for reusability of code. As you can write one method in base class, and then use it in multiple derived classes.

269 of 275

What is Inheritance in Typescript?

Q71

Both Eat() and Bark() method are accessible via Dog class object. Eat is from the base class but.

270 of 275

Q71. What is Polymorphism in Typescript?

What is Polymorphism in Typescript?

Q72

​

Father

GetName()

GetSurName()

Son

GetName()

Base/ Parent/ Super Class

Derived/ Child/ Sub Class

  • Polymorphism means same name method can take multiple Forms.

​

For example, in the image Son can inherit the GetSurName() method implementation of father. But the GetName() method implementation should be different for son. So son can have a different implementation but the method name can be same as GetName().

​

​

  • What is the advantage of Polymorphism?

​

Like in dictionary, a word “Running” can have multiple meanings: Running a race or Running a computer.

​

Similarly in programming, Polymorphism can be used to do multiple things with the same name.

271 of 275

What is Polymorphism in Typescript?

Q72

GetName() method of Father class object output is different, and Getname() method of Son class object output is different. Same name method taking multiple forms.

272 of 275

Q72. What is Interface in Typescript?

What is Interface and why to use them in Typescript?

Q72

  • An interface is a contract where methods are only declared.

​

  • What is the advantage of creating Interface?

​

For example, we have multiple classes PermanentEmployee, ContractEmployee etc.

They all must have the Role() method, but the body of Role() method can be different.

Now to maintain consistency we will create the Interface IEmployee, with just declaration of Role() method and implement this interface in all the classes.

This will make sure all the Employees classes are in sync with the Role method. It will also help in unit testing.

​

  • One advantage is, multiple inheritance can be achieved via interfaces only.

​

  • Also, if we create interfaces for the classes in application then unit testing is very easy, otherwise it is difficult.

273 of 275

Q73. What's the difference between extends and implements in TypeScript

What's the difference between extends and implements?

Q73

  • Extends used for base class inheritance.

​

  • Implements used for interface inheritance.

274 of 275

Q74. Is Multiple Inheritance possible in Typescript?

Is Multiple Inheritance possible in Typescript?

Q74

  • Multiple inheritance means when one derived class is inherited from multiple base classes.

​

  • Multiple inheritance in typescript only possible via Interfaces.

See in first image there is the compile time error in Employee2 as multiple base classes are not allowed, but in second image with multiple interfaces iit is working.

275 of 275