Top 100 React JS Interview Questions and Answers

Estimated read time: 1:20

Summary

The video provides a comprehensive guide on React JS, focusing on the top 100 interview questions and answers about the framework. It includes chapter-wise sequences that cater both to beginners and experienced developers. The video emphasizes the importance of understanding React’s basic and advanced concepts, such as JSX, components, the virtual DOM, and hooks among others. Key practical aspects such as state management, lifecycle methods, and how to optimally structure React projects were discussed.

Highlights

React JS is the leading choice for front-end development jobs today. 📈
The video meticulously breaks down React into chapters, helping both beginners and experts. 📚
Explains crucial React features like JSX, virtual DOM, and components. 💡
Details practical components and modules necessary for cracking tech interviews. 🛠️
Includes insight on state management techniques like hooks and Redux. 🌀

Key Takeaways

Mastering React ensures you can handle the largest number of front-end jobs in the market! 💼
React simplifies creating complex UI applications, making it a preferred choice for developers. 🎨
Understanding the virtual DOM is crucial in boosting the performance of React apps. 🚀
Code splitting is an effective way to enhance app loading times. ⚡
UseState and UseEffect hooks are essential tools for managing component states efficiently. 🔄

Overview

React JS is increasingly popular among developers due to its efficiency and flexibility in building complex and modern web applications. This video, produced by Interview Happy, caters to both novice and seasoned developers, systematically guiding them through a wide array of React concepts crucial for acing interviews. Starting from the basics, it ensures a solid foundation before delving into advanced topics.

The content structure is designed to facilitate learning and revision, with chapter-wise segregation of topics. It effectively covers key React concepts such as JSX, virtual DOM, and components, offering a detailed explanation on each. Additionally, it examines the practical tools and methodologies employed in real-world applications, aiding learners in establishing a strong practical grasp.

Finally, the video emphasizes the significant aspects of React like state management with hooks, efficient DOM handling with virtual DOM, and optimization with code splitting. Learners are encouraged to implement these concepts through various project scenarios provided, preparing them comprehensively for technical interviews and real-world applications.

Chapters

00:00 - 00:30: Introduction and Goals The chapter 'Introduction and Goals' begins by addressing the primary motivation for learning React or any new technology, which is to succeed in job interviews. To facilitate this, a collection of React interview questions has been compiled and organized into a chapter-wise sequence. This structure allows beginners to follow along, code, and learn progressively. Experienced individuals can use the material to quickly revise topics by watching the video.
00:30 - 01:00: Interview Preparation Resources The chapter provides resources for interview preparation, including a downloadable Excel file and a PPT with answers. These resources appear to be paid. It is mentioned by someone named Happy who has extensive experience in interviewing. React is highlighted as having the largest number of unspecified context within the text.
01:00 - 01:30: React Developer Job Market Overview The chapter titled 'React Developer Job Market Overview' provides an introduction to the current trends and demands in the front-end job market, specifically focusing on opportunities for React developers. It emphasizes the importance of preparing for a career as a React developer and suggests it as a positive career choice. The chapter outlines a structured approach to preparing for React interviews, indicating that it will cover 11 key topics through 100 interview questions. The initial two chapters focus on fundamental and basic React interview questions, emphasizing the necessity to answer them as most interviews commence with such queries.
01:30 - 02:30: Basic and Fundamental React Questions This chapter titled 'Basic and Fundamental React Questions' focuses on various key topics in React. It covers questions related to React files and folders, JSX, both functional and class components, routing, hooks, component life cycle methods, controlled components, and code splitting. Additionally, it also touches upon various important React interview questions that may not be directly related but are crucial nonetheless. The chapter emphasizes explaining the answers with the help of diagrams for better understanding.
02:30 - 03:30: Structure of React Applications The chapter titled 'Structure of React Applications' serves as a preparatory introduction before diving into the core content. The instructor wishes the learners success in their interviews and mentions recording their success stories. There's also a promise of practical insights through code screenshots and providing the simplest of definitions to aid memory, especially useful for interviews. The chapter sets a positive tone, encouraging learners to believe in their success potential.
03:30 - 05:30: Understanding JSX and DOM This chapter introduces the fundamentals of React, focusing on basic questions about the framework. Key topics include what React is, its features, the concept of the virtual DOM, components, and the structure of single page applications. The chapter begins with an encouragement to engage with the content, hinting at interactive elements like subscribing or liking the channel, before diving into these foundational aspects.
05:30 - 07:00: Introduction to React Components In the 'Introduction to React Components' chapter, the fundamental questions regarding React were discussed. The chapter commenced with tackling the inquiry, 'What is React?' and explored the role of React in software development. An example was provided using an e-commerce website to illustrate how a user interacting with a website first communicates with the UI server, which is also referred to as the client or frontend server. This chapter serves as an entry point to understand the basic concepts of React components.
07:00 - 08:00: React Component Types The chapter 'React Component Types' explains the roles of different server components in a frontend application. It focuses on how a UI server manages static content while handling dynamic content through API requests. The API server, also known as middleware, is tasked with business logic operations such as data retrieval, insertion, or updating from the database.
08:00 - 10:00: Routing in React The chapter explains the concept of routing within React applications, emphasizing the communication flow between client-side and server-side components. It outlines the process whereby the API and database servers interact to fetch and deliver data to the client's user interface, specifically focusing on 'get' requests using SQL.
10:00 - 11:30: React Hooks Overview React Hooks Overview Chapter focuses on providing an understanding of React Hooks. It delves into setting up your environment with popular Database Management Systems (DBMS) like SQL Server or Oracle. The chapter also touches upon the common programming languages and frameworks used in backend development including C, Java, or PHP and frameworks like .NET, Spring, or Laravel. These frameworks are emphasized due to their role in simplifying complex server-side programming operations.
11:30 - 12:00: Understanding React State The chapter titled 'Understanding React State' focuses on simplifying complex UI development using React, a popular JavaScript library. React offers solutions for building intricate user interfaces more efficiently compared to just basic CSS, HTML, and JavaScript. The chapter also mentions Angular as an alternative, which serves as a comprehensive UI framework. Readers are guided to understand the role of React in streamlining the development of complex UI applications.
12:00 - 14:30: Functional Components in React The chapter discusses the importance of React, an open-source JavaScript library, for building user interfaces. Despite having HTML, CSS, and JavaScript, React is essential because it simplifies the creation of single-page applications.
14:30 - 16:00: Class Components in React In this chapter, the focus is on the concept of class components in React, highlighting their role and significance in building reusable components. A brief mention is made about exploring further questions related to the topic. Key features of React are listed, including the virtual DOM, component-based architecture, reusability, composition, and JSX, which stands for JavaScript XML.
16:00 - 17:30: React Lifecycle and State Management The chapter discusses the advantages of React, focusing on its declarative syntax, robust community and ecosystem, and the use of React Hooks. It highlights how these features make React an excellent choice for building front-end applications. The chapter promises to explore multiple questions from each of these features, though it currently provides a brief one-line description and uses of them.
17:30 - 18:30: Controlled vs Uncontrolled Components The chapter discusses the distinction between controlled and uncontrolled components in web development, particularly in the context of using React. It will explain how to implement both types and the benefits each offers. Additionally, there is a mention of a comprehensive resource on full stack React, which includes 200 interview questions. This might be useful for those looking to deepen their understanding or prepare for interviews. The chapter promises a deeper dive into the functionalities and advantages of both controlled and uncontrolled components in future sections.
18:30 - 20:30: Code Splitting in React Applications This chapter discusses 'Code Splitting in React Applications'. The speaker briefly touches upon various topics like React, Redux, JavaScript, and TypeScript questions that might appear in interviews. It is mentioned that resources such as a PowerPoint and PDF book, including all the code, are available in the video description for revision purposes. The speaker expresses success stories of students cracking interviews via these courses before moving on to the next question related to code splitting. The precise nature of code splitting and its principles, including dynamic imports and the benefits of lazy loading, although not detailed in the transcript, are relevant to the chapter title.
20:30 - 23:50: Advanced React Topics The chapter titled 'Advanced React Topics' focuses on the difference between HTML and DOM (Document Object Model). It emphasizes the need to understand DOM before delving into virtual DOM, which is crucial for grasping advanced aspects of React. The transcript suggests a brief revision for those unclear with DOM concepts and explains with an example involving a static HTML website.
23:50 - 28:00: React Testing and Optimization The chapter titled 'React Testing and Optimization' explains how browsers render HTML as a DOM (Document Object Model) representation in memory. It describes how the HTML document's structure, consisting of the root HTML element with its head and body as child elements, is mirrored in this memory representation for processing and manipulation.
28:00 - 29:00: React Authentication and Security The chapter discusses the representation of HTML as a DOM (Document Object Model) tree. It explains how JavaScript can be used to manipulate HTML elements by adding, deleting, or updating them. For instance, when a user interacts with a webpage, such as by clicking a button to add a paragraph into the body element, JavaScript facilitates these modifications.
29:00 - 30:00: React Profiler and Performance The chapter on 'React Profiler and Performance' delves into the inner workings of the DOM tree in web applications. It explains how new elements, such as a paragraph, are created and added to the DOM tree. This tree is then transformed back into HTML, which is visible to the user. The process highlights how the DOM tree is integral for updating and rendering the user interface, ultimately affecting the performance and efficiency of web applications.
30:00 - 30:30: React and GraphQL This chapter introduces the concept of the Document Object Model (DOM), explaining that it's akin to an interface that enables dynamic website creation with JavaScript. The DOM is described as a tree-like structure representing a web page, which allows for dynamic access and manipulation.
30:30 - 31:00: Reactive Programming in React This chapter titled 'Reactive Programming in React' likely delves into the concepts and mechanics of reactive programming within the context of React, a popular JavaScript library for building user interfaces. The transcript snippet suggests an explanation of how HTML, as a markup language, is utilized to manipulate the content and structure of web pages. The mention of the 'Dome' seems to relate to the Document Object Model (DOM), a key concept in web development that represents the structure of a web page in memory and allows for its dynamic manipulation. The transcript also hints at the concept of a 'virtual DOM', which in React, is a lightweight copy of the real DOM. This virtual representation enables more efficient updates and rendering in web applications by minimizing direct manipulations of the actual DOM, thus improving performance. Though the transcript is brief and slightly garbled, the focus on 'Dome' and 'virtual Doom' points towards a foundational introduction to these essential topics within React’s approach to reactive programming.
31:00 - 32:00: React Knowledge Recap and Final Tips The chapter discusses the concepts of the Document Object Model (DOM) versus the virtual DOM, emphasizing the necessity and functionality of each within web development. It explains that while the DOM is a real and integral part of all web browsers, enabling interaction and the handling of JavaScript, the virtual DOM is a specific concept not universally applied across browsers but crucial in optimizing web applications.

Top 100 React JS Interview Questions and Answers Transcription

00:00 - 00:30 Hello friends when we start learning react or anything then our first goal is to crack the interview right therefore I collected all the react interview questions and then I arranged them in a chapterwise sequence so that even if you are new to react you can still watch it code it and learn step by step if you are experienced then you can just revise the question by just watching this video
00:30 - 01:00 and if you are really confident then you can get this Excel file here click on view answer for any question to open the answer in this PPT where all answers are present both Excel file and PP download links are present Below in description but that is paid hey my name is happy and I have given and taken many interviews in my 15 years of experience right now react has the largest number
01:00 - 01:30 of front-end jobs in the market so if you are planning and preparing for react Developer jobs in the future that's a great choice now let me show you the 11 topics from which we will cover the 100 react interview questions step by step the first two chapters are basic and fundamental interview questions on react because every interview starts with the first two three basic questions and we must must answer them then we will cover
01:30 - 02:00 questions on react files and folders then jsx then both functional and class components then roting hooks component life cycle methods controlled components code splitting and finally many react interview questions that are not related but yes they are important now mostly I will explain the answers to the questions with the help of diagrams for better understandings
02:00 - 02:30 then code screenshot for practicality and finally the simplest definition which is very easy to remember for the interviews now before starting the first chapter I want to say all the best to you may you also get the offer like many of my other students who cracked the interview I am also recording your success stories in my diary so whenever you get the offer just post a comment
02:30 - 03:00 for now you can like And subscribe the channel great now let's start with the first chapter now here is the first chapter of react and here we will cover very basic questions about react for example what is react its features virtual Dome components single page application Etc remember don't let any space for the
03:00 - 03:30 doubt in Basics and fundamental questions so without wasting time let's start with the first question what is react what is the role of react in software development for example you are a user and you open an e-commerce website on your laptop when you open the website first the request you will hit the UI server this UI server is also called the client or frontend server
03:30 - 04:00 this front-end server will have all the static HTML content itself but for dynamic content like the list of orders this UI server will send the request to some API server this API server is also called sometimes middleware and it is responsible for processing the business logic and getting and posting the data from the database and this API server will then get insert or update the data
04:00 - 04:30 inside the database server both these API servers and database servers together are also sometimes called backend in the event of a get the database will respond with some data to the API and then the API send the data back to the client which will then display the data to the user or to you this is the basic flow now for database we use SQL as a language for
04:30 - 05:00 running the script and SQL server or Oracle as the dbms there are other dbms as well but these are the popular ones similarly for the back end or for API we use C Java or PHP languages and the Frameworks are net spring or larl why we need Frameworks because Frameworks simplify the complex server s side programming operations for
05:00 - 05:30 big applications similarly for front end we need only CSS HTML and JavaScript as languages but to simplify the complex UI we use react which is a JavaScript library or we can use angular also which is a complete UI framework great now you know react is used to simplify the creation of complex UI applications right
05:30 - 06:00 finally three points to remember about react react is what react is an open-source JavaScript library react is used for what react is used for building user interfaces and why do we need react although we already have HTML CSS and JavaScript this is the most important Point react simplifies the creation creation of single page application by
06:00 - 06:30 using the reusable components all right now in upcoming questions we will explore more and more about especially this third Point okay what are the key features of react here are the seven key features of react virtual Dome component based architecture reusability and composition GSX which stands for JavaScript XML then
06:30 - 07:00 declarative syntax and then community and ecosystem and react hooks because of all these features only react is an excellent choice for building front-end applications okay all the advantages of react are coming from these features only in the upcoming questions we will explore multiple questions from each of these features only but here I am providing just a on line description and the use of all
07:00 - 07:30 these features this can help you in quick revisions from the book later yes but for sure I'm going to explain all of them how to implement them and what how we can get the benefit from them that in detail in upcoming question hi here is a quick notification if you are the kind of a person who wants to go the extra mile or who does not want to miss anything then here is the full stack react with 200 questions interview questions here we will cover
07:30 - 08:00 additional questions on react HS and all questions on Redux and then there are JavaScript and typescript questions also also the link of this PowerPoint and PDF book with all the code is present in the description of this video for revision many students were able to crack the interviews VI my courses all right let's continue again with our next question what is do what is the difference
08:00 - 08:30 between HTML and Dome before understanding virtual Dome we must understand Doom if you are 100% clear on this you can skip this otherwise let's quickly revise it let's try to understand with the help of an example suppose you are a user and you open the browser open one website and here is the static code of that website this is HTML right you can read it
08:30 - 09:00 but inside the memory the computer or you can say the browser it will not seen as the HTML the memory will see it it as a dome representation like this here you can see the HTML tag is the root element then HTML has head and body has the child elements and other exact same HTML elements are present here as per the HTML document on the right only okay
09:00 - 09:30 right so this is nothing but the tree like representation of the same HTML and this representation we call Dome or sometimes Dome tree also now as a user if you add delete or update any HTML element in website via JavaScript for example if user click one button add some paragraph inside the body element then with the help of JavaScript this
09:30 - 10:00 one or more node will be created here a new paragraph element will be added in the dome tree okay so then this Dome tree will be converted back to the HTML Fest and that updated HTML will be displayed to the user and you can also see it right got it so in short internally this doome tree only enables the user to update or
10:00 - 10:30 add new elements in HTML you can also say that Dome is like an interface to make your website Dynamic with the help of JavaScript of course great finally the proper definition of Dome is here dome which stands for document object model represents the web page as a tree like structures that allows JavaScript to dynamically to dynamically access and
10:30 - 11:00 manipulate the content and structure of a web page remember HTML is just a markup language okay for reading and writing purposes for developers and users only in reality memory plays with Dome all right now you will never forget Dome concept for the rest of your life right what is virtual Doom what is the
11:00 - 11:30 difference between Dome and virtual dome in the previous questions I explained Dome so whenever user will do any changes in application then basically we are updating the real dome right now what is virtual Dome and why do we even need it first of all doome is a general and real Concept in all the browsers without it your website or application can't interact even interact or handle JavaScript but virtual Doom is only
11:30 - 12:00 specific to react only and it's not mandatory it is developed developed by Facebook for react just to improve the speed of the applications okay basically there is a performance problem there in the real Doom the problem is even if a user makes a very small change to the web application in the browser even then the whole layout will be still be
12:00 - 12:30 rendered in the dome whole layout okay whole rendering will happen for example as a user you are just changing one element title text here in the title tag in HTML even then the browser will recalculate and reender the whole layout of the entire page which will basically then re refresh or in other words you can say refresh the entire to which is very time consuming that time consumption will increase the load time of the web page
12:30 - 13:00 and that is the speed or performance problem to solve this problem we have virtual Dome now listen carefully in react application if some website user open a react web based website in their browser then in the background react libraries will make an exact copy of the Dome and show that copy to the user in front of user not the real Dome okay so
13:00 - 13:30 this exact copy of real Dome is we call virtual Dome now when the user will do some interactions some manipulations to the elements in the HTML then from outside it looks like the user is interacting to the real dome but in actually actually the user is interacting and making the changes with this virtual dome which is the exact copy copy of the real Dome only and the
13:30 - 14:00 specialty of virtual Dome is if user is changing any element in HTML now then virtual Dome will not render the whole virtual dome for small small changes only the small specific part of virtual Dome will be updated and then in the background the react algorithms only of the react Library will keep comparing the changes between virtual Dome and
14:00 - 14:30 real Dome and whatever changes the user has made here in the virtual Dome only those changes will be updated in the react uh real dome by those algorithms by the react Library great this is the whole process and this update process from virtual Dome to real Dome is also called reconcilation okay which is done by react libraries great so earlier we were directly updating the real dome which
14:30 - 15:00 was a single step process but now in react first virtual Dome and then real Dome will be updated it's a two-step process but yes now rather than rendering the whole Dome directly now we are updating only the changed elements in the virtual Dome and same in the real Dome this minimum rendering of Doom makes your web page very fast to load in the UI the conclusion is react uses a virtual
15:00 - 15:30 Dome to efficiently update the UI without rendering the entire page will which helps in improving the performance and make the application more respon save great now whatever I have explained based on that here are the four differences between Dome and virtual Dome either you can pause the screen and I already explained it you can pause the screen and read them or you can refer
15:30 - 16:00 this book later for quick revision also what are react components what are the main elements of it all right we already know react follows a component based architecture it's a feature and this one of and so basically if you see this web page then you can see here we have many sections or you can also say building blocks okay of this web page so maybe this is the header component this
16:00 - 16:30 is the menu footer depending on application so these are what building blocks of your web page and we call them what components then here is the code structure of a very simple react component first react library is imported and then a functional component is defined that returns this jsx okay which is only then rendered in the UI do not worry I will cover GSX questions
16:30 - 17:00 separately but here you can understand that finally this uh also this bottom bottom this export keyword is used so that this component will be available inside other files or components okay definitely later we will cover more questions on components but this is a very high level basic idea of a component structure and these import function and Export are the elements of the component
17:00 - 17:30 parts of the component finally the simplest definition and easy to remember definition is in react a component is a reusable building block for creating user interfaces in web application reusable because you can reuse the components at many places that's it what is single page application example first here you can see a web page structure here we have many components now if any
17:30 - 18:00 component is updated or a new component is added the page will never reload or refreshed okay and only the same page is updated every time that is what is called single page application now if I will go to the browser browser to show you the example for example if here you can see the YouTube in the browser okay and here you can see whatever I'm doing on this page the whole page is never loaded okay because YouTube is a single
18:00 - 18:30 page application okay and above you can see it never refresh only the content the component inside the YouTube are uh loading but not the whole page so that is the single page application now if I open some other application which is not a single page and have multiple pages so here you when I'm pressing see this website here when I'm pressing menu items then you can see this reload icon at the top left corner is disappear disappearing and appearing for a while
18:30 - 19:00 like it's loading and unloading so that is because it is loading M another page okay with every call it is loading different page so that is the reason it is a multi-page application okay so now let's concl conclude some points about single page application back in the slides so a single page application is a web application that have only one single web page okay when user do some action on the website then in response content will dynamically updated without
19:00 - 19:30 refreshing or loading the new page so that is the single page application and that is the answer of this question what are the five advantages of react why five I'm asking because sometimes in an interview we tell only one advantage and when we and then we think we answered the question correctly right but for any advantage differences or features question we should say at least three to four points okay great coming back to the question the first
19:30 - 20:00 one you already know in react it's very simple to build a single page application and that is by using the components so in other words react follows component based architecture which allows developers to create reusable components which can be used throughout the application and that makes the development process really faster and more efficient okay and see how the advant AG of reacts are coming
20:00 - 20:30 from its features only right second Advantage is react is crossplatform and open source which means it's free to use right and also react can be used to build applications for various platforms okay including web mobile and desktop great then it also works with other Frameworks also and libraries okay making it easier to integrate into existing project now next Advantage is react is
20:30 - 21:00 lightweight and very fast again coming from the feature of virtual Dome because because of virtual Dome concept feature only the the react is very fast fourth benefit is react is supported by very large community and ecosystem so therefore for any help there are many forums where you can discuss your coding problems okay also since react is very most the react is
21:00 - 21:30 the most popular UI development PL technology right now so it has the maximum number of jobs in the market and of course you do not have to say this in the interview but this is the most important point for us right then last Advantage is testing the UI is easy with react libraries so great there are more advantages of course but these are some of the most important ones remember 3 to four advantage and that is
21:30 - 22:00 enough for interviews what are the disadvantages of react everything has some pros and cons and the same is the case with react let's quickly see an example why react is not a good choice in some cases suppose you have an application like this here you have many small replaceable complex components right so in this this case react is a very good
22:00 - 22:30 choice for you to manage all these components but but but if you have a very simple static website like this here is some fixed content some fixed menu items and very little Dynamic content right and for this kind of simple and 90% static website like go with simple and plain HTML CSS JavaScript because if you choose react for small applications then the learning
22:30 - 23:00 curve of the react the flow the settings of react downloading the libraries and creating an an application in react also needs planning right which takes time so the short answer is react is not a good choice for a small very very small application okay that's the idea what is the role of of jsx in react
23:00 - 23:30 three points at least you have to say because we should avoid giving answer in one point in interviews all right so if you see the code of a very simple app component here then it looks like HTML right but actually it is jsx jsx stands for JavaScript XML because it looks like XML or HTML and it is converted to JavaScript only that's why Javas script uh
23:30 - 24:00 XML so what will happen is when you will run this code then internally this jsx code will be converted like this in JavaScript here JavaScript code is creating that react elements and this conversion of jsx to JavaScript is necessary mandatory because browsers like Chrome Ed only understand JavaScript not jsx okay and this conversion is done by the react Babel
24:00 - 24:30 library after this conversion browser can read this JavaScript code now the reason why we do not use uh direct JavaScript code why like why we use jsx because you can see here how difficult it is to write this react. create element is multiple statements in your application in JavaScript right so see jsx code is so simple it's look like basic HTML right so that is the
24:30 - 25:00 difference that's why we prefer GSX it is simple to read simple to write and that the development that will make the development easier for the developers so that's why we have GSX great now here are the simple three simplest points which I already explained same is written here if someone wants to refer from the book later for quick revision
25:00 - 25:30 what is the difference between declarative and imperative syntax if you remember the seven key features of react then declarative syntax is a very important feature of react because of which react code is very simple to write let me show you how for example here you can see the jsx code where we are directly returning the HTML like code okay and by the code itself you know how
25:30 - 26:00 the code output will be in the browser right that is declarative sentence where when your code is focusing more on the output result it is not focusing on step bystep programming okay so what is a step-by-step programming see this uh imperative syntax which is opposite of declarative syntax here to display the same output in pure JavaScript first we are declaring and then creating the
26:00 - 26:30 elements then we are assigning the text to the element and finally we are adding the element to the Dome and this is a step by step process to achieve the same output the output is same but in declarative syntax syntax is more focused on the output but in imperative syntax We are following all the steps great I think now you understand how declarative syntax of jsx is a great
26:30 - 27:00 feature of react and here are same points and differences in the written format which I already explained if someone wants to revise them from the PDF book quickly later congratulations on completing the first chapter of the basics here is the second and the last part of the basics and again it is very important here we will cover Arrow function expression main files in react projects how react
27:00 - 27:30 app loads and also some other important fundamental questions more stronger your fundamentals will be then later understanding the implementation of bigger Concepts will be very easy and remember the most important thing about the interviews the Journey of Thousand Miles begins with a single step to get the offer you must have to start giving interviews all right now start let's start with the first
27:30 - 28:00 question what is the arrow function expression in jsx now normally we use this way to write the code for a component using the function keyword and receiving the parameters in this round back brackets if required that is what we call regular function declaration okay now the same function can be also written like this using the arrow function expression and nowadays this technique
28:00 - 28:30 is getting more popular because Arrow functions are very popular now this technique is like a combination of Arrow function and function expression which I already covered in detail in JavaScript but let's quickly revise because it is very important what is Arrow function Arrow function is a way of declaring a function using the arrow operator where first you pass the parameters in the
28:30 - 29:00 bracket here same as regular function the pass the parameters then you use the arrow operator and after that put the whole body of the function inside this curly braces after the arrow operator okay so working is exactly same as regular function but the difference is here you do not have any need to use the function keyword that is the first
29:00 - 29:30 difference and even the function name is not necessary okay so because you are assigning this function to this variable so function name what you will do you will call the function this variable only every time right okay so when we assign this whole function to a variable that is called function expression okay so remember we are not assigning function result we are assigning the function itself to the
29:30 - 30:00 variable that's the important point now instead of using function name you will you be using the variable name to call this function or to export this function or to do anything with this function going forward in some places or I will say in most of the places because this is the recommended approach now I will be using this Arrow function function uh Express sorry expression approach only to declare the
30:00 - 30:30 components okay I hope you understand now it now finally the definition the arrow function syntax is a concise way of defining the function that's it how to set up react first project this is not an interview question but if you are new to react then you can follow this steps to set up your react development environment okay if you are experienced in react then you can skip this question or you can watch to to just revise the installation process it
30:30 - 31:00 will not take much time these are the five steps to install uh react I will displ show you how this steps work okay first step is install nodejs from this link okay this is the first step second step is install code editor for writing the code here is the VSS code link but you can also use any other code editor for this so it's depends on you but this is the most popular one next step is open the VSS code uh and then go to
31:00 - 31:30 terminal then new terminal and then run this command npx create react app and then name of the project like whatever you want to keep the name the project name okay so my app is the name of your project here uh you can put it anything and then when you will press enter it will take around 5 to 6 minutes to create the first project for you then as a Next Step uh your project folder is created so now again uh in the
31:30 - 32:00 vs code go to the file and open the folder go to just created you uh the you have to open the folder which you just created okay uh and then open it finally here will be your first react project my app okay now to run this project how we will run this project open the terminal with control+ tilt key and run this command npm start if all is well then your browser will uh automatically unloaded uh like this and this means
32:00 - 32:30 your first application is ready to work on and uh now you can change the web page as per your requirement hey guys just a reminder my videos help many candidates in getting jobs but sometimes they forget to share their success with me just like subscribe and post a comment whenever you get the job that is for my motivation
32:30 - 33:00 how does the react app load and displays the components in the browser this is a very important question from interview point of view you must understand how this whole thing work suppose you are a website user and you open any react website in your browser then first the
33:00 - 33:30 request will go to the react server and find the index.html page and we know this is the only single HTML page in the react application okay single page application then index.html file with the help of the react libraries will load the index.js file so index.js is like the JavaScript entry point for for your react application right without it
33:30 - 34:00 JavaScript will not work then this index.js will call the appjs file which is the root component of the application Root component is like a placeholder for all the child components you already know it's like a parent to them now this root component code will repl will will replace the root element in index.html by the help of this index.js file so all that replacement of the root
34:00 - 34:30 element with this in app component code will be written in this index.js file and that will be then displayed to the user browser all these settings are already preset when you are creating your project first time in react okay so as a developer our job is to create all the child components of this app Root component as per our application requirement all right that is the flow
34:30 - 35:00 that how react app loads and displays the component in the browser that's very short and simple flow right and here is the simple rule of each file of the flow which I already explained but written here for later reference if from the book if required how how react app load and display the components in browser so this is like the summary of all the
35:00 - 35:30 things which uh which we have already discussed so first user hit the browser and request is sent to the index.html page then with the help of the react libraries index.js Javascript file is loaded in the browser so uh if I will go to the VSS code okay and now as the application is already running go to the browser okay now if you right click and inspect here and expand this head and scroll town here here you will find find the bundle.js file okay which is loaded
35:30 - 36:00 by the react library now if you will right click and open this link in the new tab like this and here you will search the index.js file then see index.js file is automatically loaded with the help of the node modules folder okay now if we go back to the slide and we already know that uh index.html has loaded the index.js file right we already know this and index.js file will render the app component inside this
36:00 - 36:30 index.html file right and then the result result will be set in the root element which will then be replaced by the root element of the index.html file so this is like the whole summary of the whole process which I already discussed which I already explained you in the previous question so index.html then app. index sorry index.js which will internally call the app.js and will uh send the response back to the index index.html that is the
36:30 - 37:00 summary what is the difference between react and angular there is a lot of competition between these two technologies so let's see the differences between them before differences let's first see the similarity between them react and angular both are used to create single page UI web applications okay using components okay in angular also we have components now the first fundamental difference between them is react is a JavaScript library whereas angular is a
37:00 - 37:30 complete UI development framework when we say framework it means it provide many plugins and inbuilt support for many many things okay second difference is react uses a virtual dome which makes it faster I will explain the virtual dome in upcoming question but angular uses only the real dome which is slightly difficult to render and therefore not as faster as virtual Dome so here react is the the clear winner because it is faster in that sense okay
37:30 - 38:00 third difference is react is a smaller in size and lightweight and therefore again uh it is faster sometimes whereas angular is bigger because it is a complete framework therefore also it is not light weight so again here react is again the winner okay now when I say faster do not think if angular if angular page can load in 5 seconds then react can load the same page in 1 second faster in sense uh react can load a page in 1 second then angular can load the
38:00 - 38:30 same page in 1.1 1.2 Mill 2 second okay there is not a big difference between the speed uh then the next difference is react depends on external libraries for complex features so developer has to write many lines of code for complex functionalities and Integrations in react but since angular is a complete framework therefore it provide built-in support or features like rooting forms validation and HTTP request therefore
38:30 - 39:00 developer has to write less line line of codes and therefore angular is the clear winner here so uh in short for a very very complex UI application which is interacting with multiple apis angular is slightly a better choice Fifth and last differences react is simple to learn and more popular than angular and therefore it has more jobs and more support from online community okay whereas angular is slightly difficult to
39:00 - 39:30 learn as uh because because it has types script oop oops Concepts and many more things okay so basically if you are already know classes objects inheritance dependency injections the server side programming Concepts then only angular will be easy for you otherwise it is slightly difficult to learn as comparison to react okay so for simple learning react is the winner here all right I think now you know the difference between them and you also know which one should you choose in
39:30 - 40:00 which situations right what are the other Five Js Frameworks other than react so this is a general knowledge question only so apart from react there are many other Frameworks or libraries that are used for front end development like angular vuejs Angular JS backbone Js amember Js and there may be many more but these are the more most popular one J so react I
40:00 - 40:30 is like the I think the most popular is react only but yes this is as I said a general knowledge question whether react is a library or a framework what is the difference between them when we say library then basically we are importing the libraries like this code at the top and then we can use all the inbuilt fun functions of these libraries in our component so that is
40:30 - 41:00 the idea of library right now the structure of code is simple here like a function is there and later will that will function will be exported for use right nothing special whereas in case of Frameworks developers needs to follow a specific structure or pattern in their programming defined by the framework okay like this this is the angular component code and angular is a
41:00 - 41:30 framework whereas react is a library so that is the difference framework is a complete package and it defines its own rules okay whereas react is a uh library is a thing which contain all the functions which functions you can use in your project that is the big difference okay but nowadays react is also doing many things which a framework can do so slight slowly slowly I think it is also
41:30 - 42:00 going to be in a framework mode okay so great now you know react is commonly referred to as a JavaScript library and the same information is written here how does react provide reusability and composition now this is an example question how sometimes interviewer ask indirect scenario based question and you already the know the answer I think for re reusability but sometimes we got
42:00 - 42:30 stuck and I will also explain the composition what it is let's explore uh we know this thing we have a single page one root component and then many child components inside the root component right the answer is react provide reusability and composition through this component based architecture only because once you create a component then you can re use that component again and again in different parts of your
42:30 - 43:00 application or even in other multiple projects also right for like this component 10 can example this component 10 can be used as a child component of component 1 component five and many more that is reusability simple second is what is composition composition is the concept of creating a new and big comp components by you combining existing
43:00 - 43:30 small small small components okay like the app component is built by creating small components advantage of composition is all these components can be created independently by different developers right and they can be combined to create a big component so that is the benefit if any error any enhancement on one component is required then you do not have to bother about the other whole
43:30 - 44:00 application the big component and other components you are not bothered about only fixing the error in the component is enough and deploy so this is composition so components are independent and change impacts are very minimum then okay great the summary what I have explained is written here if someone wants to quickly revise it from the book later what are estate stateless stateful and
44:00 - 44:30 Estate Management terms those who are new to react hooks or State Management these terms are very important for them if you do not understand State then you do not understand the requirement of HS then you do not understand Redux so State we must know so it's like a revision okay so for example here is a component component State and in inside it we are setting the variable count equal to zero
44:30 - 45:00 which is data so state is nothing State refers to the current data of the component okay this is the initial state or initial data count in the component then later when the data count is updated the state will be also updated right so here is the return element code which will be rendered in the UI so this is the output UI you can see here we are
45:00 - 45:30 expecting when we click this button the increment function should be fired and the value of the count variable will be incremented by one right that is the expectation but as per the current code in the browser the count value is zero now if I will play this when clicking the button then updated state is getting logged properly in the log because of the console log statement in the code but this updated State value which is
45:30 - 46:00 count that listen carefully this updated State value count is not rendering back to the UI here that is the problem and that means right now our component is stateless our component is not able to render the state changes continuously in the UI again that means state is not managed in our component now to make this component
46:00 - 46:30 stateful the expected browser should be something like this now see this is stateful on clicking this button multiple times the update State data or state value kept on rendering to the UI this will be a stateful component and for this behavior and output we will use what we will use react Hox or component life cycle method in the upcoming questions but now you know what is a
46:30 - 47:00 state what is a stat less State full right finally two points States refer to the current data of the component and stateful or State Management means when a user performs some actions on the UI then the react application should be able to update and render the data or state on the UI that then and there then and there okay that's the
47:00 - 47:30 idea what are props in jsx let's quickly see the example first suppose you have the parent component app in your application inside root app component you are placing one child component but in the child component you also want to pass some data or parameters from the parent component so you can pass the parameter like this now in order to
47:30 - 48:00 receive this parameter in child component we will use what props here like this and then inside the child component we can extract the properties of this props so Props do name props do purpose and finally this is the output so what are props props uh for stands for properties are a way to pass data from the parent component to child component simple and very easy
48:00 - 48:30 answer congratulations on completing the basics see out of my 100 interviews given in 15 years experience I was rejected and failed in 90 interviews and selected only in 10 interviews so don't afraid of the number of rejections because I can bet after just one selection you will forgive and forget your 100 rejection remember that okay all right now we will see 10 questions
48:30 - 49:00 from the main files and the folders in the react project maybe you already know the answers of some of them but still revise at least once to ensure that you are not missing anything important if the question is too easy for you then increase the playback speed of the video okay so let's start with the first question what is npm what is the role of node modules folder if you remember we
49:00 - 49:30 installed npm for developing react applications right why do we install npm for working on react project the answer is npm will create this node modules folder for our project which will contain all the react libraries and dependencies needed for UI development and we should never touch this folder so what is npm and why do we install npm npm is used to manage the dependencies
49:30 - 50:00 for react project including the react Library itself okay in other words npm is the package manager that loads the node modules folder if you will not install npm then you have to download all these react libraries one by one by yourself in that case you might miss some libraries which will then impact your development time and your project as well right therefore npm will install
50:00 - 50:30 all the libraries at once and you do not need to download librar separately now what is node modules folder as I said node modules folder contains all the dependencies of the project including the react libraries itself that's it what is the role of the public folder in react after node mod folder we have this public folder created by default by react project
50:30 - 51:00 creation command okay if you see the content of this public folder here all the static files are there static means which are just just used to display and decorate the static content no user interaction no JavaScript no data from apis okay static things like favicon index.html and all images are static files the proper definition is public
51:00 - 51:30 folder contains static assets that are served directly to the user browser such as images fonts and the index.html file okay directly to the user browser means uh here no API data fetching no components basically no Dynamic things okay only things that are static will be placed here that is the simple answer what is the role of the SRC folder in
51:30 - 52:00 react after node modules and the public folder we have SRC folder and yes SRC means source and all the source code developed by the developer will be placed here this is the most important folder from developer points of point of view because uh developer will write most of the code inside this folder only all the components will be placed here inside this the answer is in react SRC
52:00 - 52:30 folder is used to store all the source code of the application which is then responsible for the dynamic changes in your web application what is the role of the index.html page in react here is index.html 5 which is inside the public folder because index.html is a static page here I have removed some unnecessary default code okay you can also remove and keep only these lines it
52:30 - 53:00 is simple HTML right when we say react is used to create a single page application then this index.html is that single page meaning all the components are going to be placed dynamically inside this page only whenever any user opens the browser and opens the react website then this is the first page that is loaded and here this
53:00 - 53:30 div with the ID root will be replaced by the components present in the index.js file okay so the rest of the things like title or metat will remains as it is great the same thing which I have explained is written here if someone wants to quickly revise from the book leader what is the role of the index.js file and react do in react we already know that we have the index.html
53:30 - 54:00 file with a div element ID equal to root inside it right so when you run your react application react libraries will load the index.js file with the index. HTML only okay in the index.js file we have this react doome library or you can say react do package which is imported at the top from the react do/ client Library also you can also expand the node modules folder and you will find this Library
54:00 - 54:30 there now listen carefully this react doome Library first use the create root method to get the reference of the root element from the index.html 5 uh in a variable then we will use the render method of the variable root to render your react app components and the child components in place of this root element okay so finally in place of div root
54:30 - 55:00 element of index.html now we have our app component okay in the dome or the browser I will say great the definition of react doome is react doome is a JavaScript library that renders the component to the Dome okay and the definition of index.js file is the index.js file is the Javascript file that replaces replaces the root element of the index do file with the newly
55:00 - 55:30 rendered component with the help of of course the react do library okay now here this react do strict mode element is a spal wrapper that helps with the debugging and identifying like uh issues in issues in your code but that is optional and you can also delete it for time being okay so that is the answer to this question what is the role of the appjs file in
55:30 - 56:00 react we might be already know this but let's just quickly revise it suppose this is your web page and inside it you have multiple components like this you may have 1 2 300 components but but you will always have a one root component inside which it will act like a container for all these child components okay and this app component is the default Ro root app component in react okay so here is the file this is our
56:00 - 56:30 first component file for the re first component file for the react application which we get by default when we create the project first time inside the source folder and inside it like this app child component that we can add many Childs depending upon our application okay finally three main points to remember appjs file contain the root component app of react application second app
56:30 - 57:00 component is like a container for all the child components last appjs Define the structure layout and root rooting rooting in the application which I will cover in upcoming questions okay that's it what is the role of function and written statements inside appjs if you see the appjs code then here you will
57:00 - 57:30 find this function starting with this function keyword you have to remember three points about function first the function keyword is used to define a Java escript function and this JavaScript function represents your react component okay second Point function is like a placeholder which contains all the code or logic of the compon component last point is function takes in props as it arguments and
57:30 - 58:00 return jsx all points written here for later reference now whenever this component is invoked from anywhere in the application this function will be automatically called and run the code inside it okay one more thing you can also use the component using Arrow function expression which I will explain in another questions now what is a
58:00 - 58:30 return statement return is used to return the elements from the function okay basically whatever elements you see in browser or UI are returned from this return blog only for example from here we can return some Dev element or we can return some child component also then index.js react Dom P package will render those elements in the dome and the
58:30 - 59:00 content will be displayed in the browser as a result now remember this syntax is jsx not HTML which I will cover in another question can we have a function without a written inside appjs this is like a scenario based question for example this is the code with a function now this is another of writing the function without the function keyword okay and using this
59:00 - 59:30 Arrow function this is called what Arrow function expression which I already explained in JavaScript and this is uh from JavaScript only if you are new to Arrow function then Arrow function are also a way of writing the functions only but with less code okay I have covered that in JavaScript now coming back to this question here if I comment this this return return keyword from here then this div will not be returned to
59:30 - 60:00 the browser meaning there will be nothing to be displayed in the browser right no activity on browser will happen but uh 90% of case we need function with return statement to show some result in the browser but sometimes we do not want to return return any react element from the function for example we want to write some error log some console log some information so like this only now
60:00 - 60:30 in the console also you can see the output without the return statement okay so the answer is yes a function without a written statement is possible in that case your component will not render anything in the UI the common use case is for logging purpose in real application we can have error logging components which do not return anything that's it what is the role of the export default inside appjs here you can see the export
60:30 - 61:00 default app statement at the end of the component file why do we use it so that this app child component will be available for importing in another files like this now if I remove this export statement from here from App component then this app import will not work import statement okay and it will show the error in the browser because the component is not
61:00 - 61:30 available for importing so basically after removing the export the app child is no longer available for other files the answer is simple the export statement is used to make a component available for import using the import statement in other files that is the answer again a very short question does the file name and the component name must be same in react the answer is no
61:30 - 62:00 see in this case the file name and the component name can be different but but but it is not recommended better to keep file name and component name same that is for easier to organize and understand your code okay that is the standard great the same thing is written here if someone wants to revise quickly from the book later congratulations on completing the
62:00 - 62:30 last chapter here is one suggestion for interviews in interviews do not just give a on line answer for a question elaborate the answer explain how you have used that Concept in your own last project okay even if you have not used in that it that much okay so that will basically give the confidence to the interviewer about your practical knowledge so all right in this chapter we are going to cover 10 questions in
62:30 - 63:00 jsx what is jsx its advantages Babel fragments spread operator conditional rendering and some more more questions so let's start by revising the first basic question what is the role of jsx in react three points at least you have to say because we should avoid giving answer in one point in interviews all
63:00 - 63:30 right so if you see the code of a very simple app component here then it looks like HTML right but actually it is jsx jsx stands for JavaScript XML because it looks like XML or HTML and it is converted to JavaScript only that's why JavaScript uh XML so what will happen is when you will run this code then internally this jsx code
63:30 - 64:00 will be converted like this in JavaScript here JavaScript code is creating that react elements and this conversion of jsx to JavaScript is necessary mandatory because browsers like Chrome Edge only understand JavaScript not jsx okay and this conversion is done by the react Babel Library after this conversion browser can read this JavaScript code now the reason why
64:00 - 64:30 we do not use uh direct JavaScript code why like why we use jsx because you can see here how difficult it is to write this uh react. create element is multiple statements in your application in JavaScript right so see jsx code is so simple it's look like basic HTML right so that is the difference that's why we prefer GSX it is simple to read
64:30 - 65:00 simple to write and that the development that will make the development easier for the developers so that's why we have GSX great now here are the simple three simplest points which I already explained same is written here if someone wants to refer from the book later for quick revision what are the advantages of jsx this is a very important question why we do not directly use the JavaScript why
65:00 - 65:30 we need one extra language jsx so let's see the main advantages one by one First Advantage you already know jsx improve code readability and writability which I already explained in the previous question right second Advantage is jsx is better for error error checking in advance or you can say it provide type safety let me show you the same in the VSS code what does it actually mean see the simple jsx code is here which will simply print hello happy okay now if I
65:30 - 66:00 change this H1 tag then if if you see it is showing me the error this underline Red Line in advance right so this is type safety or Advan error checking provided by GSX which is really a good feature because while coding we can fix this error on the spot right but if I will comment this jsx code and then I will remove the comment from this Direct JavaScript react code and if you see the browser if I will go to the browser and
66:00 - 66:30 it is showing me the same output hello happy okay now if I will come back in the code and if I will replace this H1 with something else which is basically incorrect then here now no red line okay no error is showing obviously it is it will give some problem in future and then it will be very difficult for developer to track these small small changes right that's why jsx is better because it checks the error in advance and it provides type safety now let's go
66:30 - 67:00 back to the slide then the next Advantage about GSX is it supports JavaScript Expressions okay so if you see the code here then the things we have put inside the curly braces are the JavaScript expressions and jsx supports them and allows them inside uh its own syntax okay so basically jsx has taken all the good things from the JavaScript so uh other advantages of GSX are improved performance and then another
67:00 - 67:30 one is code reusability okay so basically everything has been done to keep this jsx simple and easy to understand now you know the main advantages of GSX right what is Babel the question is if we have a GSX code in your application like this then will browser will be able to understand this directly the answer is no the browser will not understand the jsx code directly browsers only understand
67:30 - 68:00 JavaScript HTML and CSS now the question is how this code will be converted to JavaScript first the jsx code will be converted to a valid JavaScript code like this with the help of B library then this JavaScript will be understood by the browser that is the indirect way how browser understand jsx okay now who converts jsx to JavaScript if you
68:00 - 68:30 remember we have this node modules folder installed by the npm for our project inside that we have this Babel Library which is used for converting jsx to JavaScript okay so finally what is Babel Babel in react is used to transpile jsx syntax into regular JavaScript which a browser can understand that is is the answer to this question what is the role of fragments
68:30 - 69:00 in react very important question suppose you have this app component here you have two separate elements and they are not under any common root element therefore as you can see it is giving the error in this red underline compilation error it is not accepted in react or GSX because in jsx all separate elements must must be enclosed okay enclosed inside a common root or parent
69:00 - 69:30 element okay so now one solution to this is to put one extra div element as the root element like this now you will not get any error and it will work fine because you have provided the root element but but but this is not a recommended solution because might be the layout of your page will be heavily impacted by this extra by this extra Dev element okay so what is the proper solution that is to put the fragment
69:30 - 70:00 tags like this over the child elements this fragment tag speciality is it will not create any extra div or any tags in the browser HTML what will happen while rendering in the browser this fragment tag will be disabled or you can say disappear automatically okay so it will also not show any error also so your problem is resolved right but there is one more s shortcut way of putting this
70:00 - 70:30 fragment tag and that is like this empty tags whenever you see empty tags in your application now you know what they are most developer use this TX only because it is shorter right but yes both of them are forms of fragment only finally the proper definition is in react a fragment is a way to group a list of children without adding extra nodes like div to
70:30 - 71:00 the Dome that is the answer to this question what is a spread operator in GSX now we know we can pass properties from parent component to child component right but in real applications we do not have just two parameters like this we may have 5 10 or 15 parameters or maybe we are getting a key value pair from some external data source like from from some external API at that time to pass these parameters in child components we
71:00 - 71:30 will create a props object with all the properties like this and here you see we are using the spread operator to pass this object down to the child component these three dots are nothing but the spread operator only okay so they are doing nothing but internally they are just spreading or you can say expanding these properties or any object here only here only okay so this is like a shortcut way of writing only but
71:30 - 72:00 internally it is the same the the way of accessing this spread operator in child component remains same as the normal properties like this okay so the definition is the spread operator is used to expand or spread an array or object that's it what are the types of conditional render ing in jsx we already know that in every programming language we have
72:00 - 72:30 conditions like if else right similarly in react or jsx also we have conditions we have four types of conditional rendering techniques in jsx which are 90% similar to JavaScript only okay so let's quickly revise them the first one is the simplest one and that is the fs condition here is the code example it says if 2 is greater than when which it is always right then return ABC or else XYZ the output you know ABC another way
72:30 - 73:00 of doing the same thing is with a tary operator here the same can be done but with a single line of code like this this question mark and colon together will be called tary operators okay so in this case if the condition is true only the first statement just after the a question mark and before the colon will run okay and if condition is false then
73:00 - 73:30 second statement after the colum will be executed okay now you might think great now I will never use Fs in the future but where there are multiple statements or Expressions their Turner operator is very difficult to use it will not work so then if Els will be the better way it depends basically on case to case basis which one is good for you next way of is conditional rendering is this and
73:30 - 74:00 operator here in the code and it is almost it is almost similar to Turner only but here the end operator it return only truthy values and will never evaluate a false condition meaning if the first condition is true true it will return the statement after the colon operator exactly like uh this tary operator but if this condition is false then there is no no no second option
74:00 - 74:30 okay so it is always going to return return null in that case so got it the last conditional rendering technique is the switch statement this is a traditional way where we can have multiple statements like this if value equal to two return this value equal to one return this if something else you can add more cases case statements there as per the project requirement okay and if none of the case statements are true
74:30 - 75:00 then default will be the Run great these are all the types of conditional rendering available in jsx remember when to use which type of conditional rendering is depend on the complexity of conditions how to iterate over a list in jsx what is map method this is something related to JavaScript but since it is very very important and frequently used
75:00 - 75:30 that's why I am also covering it here let's see the use case suppose you have this array inside the app component okay now your task is to Loop through this array and then written a new array where every number is modified and multiplied by two like this is the output you need okay one traditional solution is to declare a new array and then use the for Loop to iterate each element multiplied by two add the item in the new array so
75:30 - 76:00 that is a long long way and you have to write multiple lines of code for that therefore JavaScript has this map method which does the same thing but in a single line of code like this remember it's a JavaScript function that can also be used in jsx here we will call the map method of of the number list okay then
76:00 - 76:30 map method accepting a complete function as a parameter yes we call it call back function when we pass a function as a parameter right it is also the JavaScript uh concept and because this function has no name therefore it is also an anonymous function and it is also an aror function because first we are accepting this number as the parameter of the function which is accepting then one by one all the array elements in the
76:30 - 77:00 arguments so what is happening the first number parameter will be one then two and three and so on so after the arrow operator we are putting the function body where we are manipulating each item of in the number list by multiplying it by two and then these multiplied numbers will be added to a new array will be which will be returned by the function okay great all this is
77:00 - 77:30 happening just just inside a single line of code and that is the beauty of this map method now if you have any doubt about like the Java uh sorry the call back function Arrow function or uh Anonymous functions then you can refer my JavaScript essential session for react because there I have covered these Concepts in detail all right the final answer is the map method allows you to iterate over an array and modify its
77:30 - 78:00 elements using a call back function that's it can a browser read a GSX file very short question the answer is no browser cannot read directly interpret or understand GSX file you already know that bble takes the jsx and converts it into the equivalent JavaScript code that browsers can understand right what is a transpiler what is the
78:00 - 78:30 difference between compiler and transpiler many have some confusion about this word transpiler so it's simple whenever we change code from one language for example jsx to another language for example JavaScript then this transformation is called what uh transpiler so sorry it is called we call it we are trans spiling the code and the tool that is used to transpile this Cod code will be called transpiler for
78:30 - 79:00 example Babel is a transpiler to convert this jsx to JavaScript okay so the definition of transpiler is a transpiler is a tool that converts source code from one high level language like jsx to another high level programming language like JavaScript example Babel all right then what is compiler then so here is the definition a compiler is a tool that
79:00 - 79:30 convert high level programming language Java into a lower level language machine code so this high to low is the difference okay compiler will convert high to low level language but transpiler from high to high only that's the difference and the answer of this question is it possible to use jsx without react short question the answer is yes it is possible to use jsx without
79:30 - 80:00 react by creating your own transpiler like Babel okay however this is not recommended since jsx is very tightly integrated with react okay and relies it relies on many react specific features only so that's why it is very difficult to use it differently great and congratulations on finishing the last chapter keep going keep going
80:00 - 80:30 and never give up on your goals until now you already knew the basics file structure and jsx okay now here is the most important chapter of this react it is component functional and class components here we will cover the nine questions the first five questions on functional components and the last four questions on the class compon components maybe you already familiar with the some of them but I recommend to revise at
80:30 - 81:00 least once to gain more confidence maybe you will get some more few pointers which you can say in interviews okay so if it is too easy for you then increase the playback speed of the video so let's start with the first question what are react components what are the main elements of it all right we already know know react follows a component based architecture it's a feature and this one of and so basically
81:00 - 81:30 if you see this web page then you can see here we have many sections or you can also say building blocks okay of this web page so maybe this is the header component this is the menu footer depending on application so these are what building blocks of your web page and we call them what components then here is the code structure of a very simple react component first react library is imported and then a
81:30 - 82:00 functional component is defined that returns this jsx okay which is only then rendered in the UI do not worry I will cover GSX questions separately but here you can understand that finally this uh also this bottom bottom this export keyword is used so that this component will be available inside other files or components okay definitely later we will cover more questions on components but this is a
82:00 - 82:30 very high level basic idea of a component structure and these import function and Export are the elements of the component parts of the component finally the simplest definition and easy to remember definition is in react a component is a reusable building building block for creating user interfaces in web application reusable because you can
82:30 - 83:00 reuse the components at many places that's it what are the types of react components what are functional components we already know react follows a component based architecture right now you can create two types of components in your react project here are the functional components and class components what are functional components we already know them the normal components like these are the
83:00 - 83:30 functional components only this functional component I already explained you can declare the functional component using the JavaScript function or you can also use the arrow function expression to declare the functional component as well there are two main points about functional components you have to remember first functional components are defined as a JavaScript function you already you know second point is they are stat less components okay but with
83:30 - 84:00 the help of hooks they can now manage a state as well okay so that is the answer how do you pass data between functional components in react I already answered this previously and it is very important from interview point of view props props properties are a way to pass the data from a parent component to the child component okay what is prop Drilling in react very important let's quickly see the example
84:00 - 84:30 first suppose we have a parent component and inside it we have a child component where we are passing any data by using props okay here is the child component receiving the data from the parent then further inside the child again we have a child or you can also say grandchild component which is also receiving the same data via the props now this way of passing same data
84:30 - 85:00 from the top parent component to the multiple layers of the child component is called what is called prop drilling okay drilling inside and inside right that's why drilling is the right word for it here is the diagram of the same code for better understanding and here is the definition prop drilling is the process of passing down props through multiple layers of components that is written here so that you can easily
85:00 - 85:30 revise it later if you want it from the book why should you avoid prop Drilling in how many ways you can avoid prop drilling okay we already know what prop drilling is from previous question like this we have to pass data from the root app components to its child and then grandchild component right that is prop drilling but there is a problem suppose only child two needs the data from the root app component still you have to
85:30 - 86:00 pass the data to parent to from the root app which does not even need it and then only you you will be able to pass the same data to the child too right so that is the problem of unnecessary passing the data to the parent two component okay now to avoid this now to avoid this prop drilling problem we can use this kind of mechanism First Data is set into a central store and then from whatever
86:00 - 86:30 component you need the data just pass it directly okay here you do not have to follow the hierarchy okay which we were following earlier let's conclude the answer why to avoid prop drilling three reason here first because of difficult maintenance prop drilling can make code harder to maintain as changes in the data flow require updates across multiple
86:30 - 87:00 components right multiple layers second complexity it increases code complexity and reduces what code readability third reason is debugging debugging becomes challenging when you are passing the properties from multiple layers of components right so that is also uh the problem all right now these are the five ways to avoid prop drilling using the context
87:00 - 87:30 API using redex using component composition call back function and using custom hooks I will cover cover all these points in separate questions in upcoming questions and uh remember explain only those ways in interviews tell only those ways which you can explain actually otherwise the interviewer can ask a difficult follow question that you cannot answer so in interviews we have to avoid saying the
87:30 - 88:00 words which we can't explain right what are class components in react from two ways the second way of declaring a component is class component and here is the code for a very simple class component now if you have an idea of classes and objects in JavaScript Java C then it is going to be very simple for you here in the code we declared the app class which is inherited from the component class which
88:00 - 88:30 is provided by react Library okay now classes and objects follow objectoriented programming and inheritance is one principle of oops only okay then like the functional components only we written the jsx from the class component also here the render method in a class component component is responsible for returning the jsx finally exporting the class
88:30 - 89:00 component app class like functional components so that it will be available for import in the other classes okay at last there are three points you have to remember about class components first class component are defined using JavaScript classes okay functional component JavaScript function class component JavaScript class then class components are stateful components by using the life cycle
89:00 - 89:30 methods okay that is their advantage third the render method in a class component is responsible for returning the jsx okay all is written here for later revision from the book how to pass data between Class components in react like functional components we can also pass that between Class components in react using the props only but there is a slight twist
89:30 - 90:00 here you have the parent component inside which you have the child component and now to pass data to the child component first you will use the attribute here with its value this message attribute to data value is coming from above above variable this data to send then in the child component like this we can receive save the data by using this doprs do attribute name which is
90:00 - 90:30 message finally if you call the parent component from index.js file then this will be the output with the data passed from the parent component to the child component the simplest answer is this do props can be used in child component to access Properties or data passed from the parent component the same is written here for later reference what is the role of this
90:30 - 91:00 keyword in class components this is a very important keyword in every programming language like Java C or Java Script wherever there is a class there is this keyword so whenever someone asks you about this keyword the first thing that should come to your mind is class instance because this is nothing but a reference to a class only for example take the example of passing data from
91:00 - 91:30 parent to child component suppose you have a parent class component which have a child component inside it then here with the child component you are placing the property of this child component message also and then inside the child component class in order to access any property of this child component we have to use this this keyword because this is the instance of the class only and in this case it is the instance of the
91:30 - 92:00 child component class then only you will be able to access the message property of the child CL child component class by using this only and the output will be like this now if you remove this keyword from here then this prop will not be able to relate to any class and there therefore it will show an error got it the short answer is this keyword is used
92:00 - 92:30 to refer to the instance of class what are the five differences between functional component and class component very very important question and why I am asking five differences because one or two differences are not enough in interviews okay you should say at least three differences for any differences question then only that will your uh that that will be great okay so the first difference is based on the syntax a functional component is defined
92:30 - 93:00 as a JavaScript function whereas the class components is defined as a JavaScript class the second difference is based on the state functional component were originally stateless but can now manage a state using hooks whereas the class component can manage is the local state with this dot state next difference is that functional
93:00 - 93:30 components do not have life cycle methods whereas class component have life cycle methods fourth difference is about uh readability functional components are more readable concise and simple whereas class component can be more verbos or you can say complex therefore functional component is a clear winner here okay the fifth difference is that functional components
93:30 - 94:00 do not have this keyword right whereas class component have this keyword for accessing the properties or for other things also finally one bonus difference is that functional components do not have render method remember whereas class components have a render method to return to the I right great I hope now you are more confident about the differences and just
94:00 - 94:30 remember three to four differences out of them and that should be enough congrats on finishing the last chapter remember interviews are the best way to grow in it and software industry they make you more confident more secure more Dynamic and more importantly wealthier okay more weier so now here we will cover six questions on rooting on react rooting is a very important
94:30 - 95:00 concept for enabling the navigations in react components only so let's see how it do does it by checking out the questions what is rooting and rotter in react rooting means navigation react provides a way by which you can navigate from one component to another without refreshing the page okay for example here is the browser video as you
95:00 - 95:30 can see when I click on the links the below component changes also more importantly the URL is also updating and changing without refreshing the page that is rooting this is required sometimes because sometimes we have to share the direct r URLs to the users right therefore what is rooting in react rooting allows you to create a single
95:30 - 96:00 page web application with navigation without the need for a full page refresh what is react Rooter react router is a library for handling routing in react applications it enables navigation and rendering of different components based on the URL that is very important both the these definitions are written here for later revision how to implement rooting in
96:00 - 96:30 react to implement rooting first you have to install the router using the command from the react Library this command then first in the app component import The Roots root and Link components from the Rooter Library okay then here I have used elements to root but yes you can also use components for the navigation in place of this elements okay then inside the component you have
96:30 - 97:00 to use the link component to display the navigation with the text and finally for these navigation you can fix the roots like this for every link using the root component okay what does it mean this means if this path is slash about then redirect or display the about element declared at the top uh in the elements finally in the index.js file
97:00 - 97:30 you have to wrap the root app or app component of your application inside this router component like this this router component again is imported imported from the react router Library implementing this code will make your rooting happen and these are the step summary summary which uh we just did in order to implement routing okay that's it what hey guys just a reminder my
97:30 - 98:00 videos help many candidates in getting jobs but sometimes they forget to share their success with me just like subscribe and post a comment whenever you get the job that is for my motivation what are the roles of the roots and root component in react router if you remember while implementing rooting we first imported roots and root component from the react Rooter library right and then like this we implemented
98:00 - 98:30 roots and root component here the roots component is just used as the root container for declaring your collection of roots okay nothing else it's just a container for multiple root components that's it then the main player is the root component listen carefully here the root compon component is used to define a root or you can say a path and specify the component or the element which
98:30 - 99:00 should render when the root matches with the path okay let me explain for example in this code if the user enters websitename.com slab in the URL then about component or element will be rendered in the UI or browser or Dome Okay so that is the job of the root component I hope now it's 100% clear to you and whatever I have explained the
99:00 - 99:30 same thing is written here if someone is interested in doing the quick revision from the book later here is a very short question what are root parameters in rooting here is the code for a root component and here user ID is the root parameter basically this parameter is some Dynamic data selected by the user that will be passed to this user profile component when the
99:30 - 100:00 user clicks on this navigation link okay so the answer is root parameters in react roots are a way to pass Dynamic data or values to the component as a part of the URL path that's it what is the role of the switch component in a react rotter like this in the code there is one more component that can be used as a container for
100:00 - 100:30 multiple root components okay uh so and that is switch component in this code you can see how the two paths are bit similar here right the second path is applicable if there is an ID present or or even if the ID is not present okay so if ID is not present then the above root is also applicable right then how will the application will decide which decide which route to execute if ID is not present first or
100:30 - 101:00 second now listen carefully here switch will execute only the first matched root and ignore the rest of all that is the use of the switch component great and the same definition has been written here for later reference also switch is commonly used for to handle 404 or not found Roots okay that's the answer again a very short question what
101:00 - 101:30 is the role of exact prop in rooting let's first see the normal way of defining root without exact prop here by default default in this slout will be matched with all its extension paths uh meaning like slab SL team or slab SL contact or also applicable for this route right meaning any path containing slout will be the Matched result by
101:30 - 102:00 default but but if you only want to match just and just slash about and not its extensions then what you will do then like this you can use the exact property with the root component now it will only match the slash about and nothing else okay great here is the definition exact prop is used with the root component to match exactly to the provided path that's the
102:00 - 102:30 answer congrats on finishing the last chapter now if you are attending react interviews and the interviewer will not ask you about react hooks then that is not a react interview therefore I have covered enough questions on hook and here is the first chapter on hook here we will see questions on the two most important hooks that is use State and use effect hooks remember your knowledge
102:30 - 103:00 on hook can be the hook for cracking the interviews so let's start with the first question what are react hooks which are the top react hooks first thing is hooks are just functions only nothing else but these functions are present inside the react libraries which you can use or call in your application components to manage the state or for other things proper definition is react hooks are
103:00 - 103:30 inbuilt functions provided by react that allow functional components to use State and life cycle features second point is before hooks class component life cycle methods were used to maintain State and react application but now hooks are getting more and more popular because they are for functional components rather than for class components okay and functional
103:30 - 104:00 components are more simpler the last point is simple react hooks for them them we have to import it from the react libraries like this second part of the question is which are the top react Hooks and here is the list of main hooks with their one word use use State use effect use context use reducer call back memo use ref and use layout effect these are the important
104:00 - 104:30 ones there are more hooks but these are more important I have also mentioned each hook used in just one word so that it can be very easy to remember okay for interviews in the upcoming questions I will explain these Hooks and their uses in uses in detail after that you can easily relate the hook where with their use which is written here okay that's the
104:30 - 105:00 answer what are estate stateless stateful and Estate Management terms those who are new to react hooks or State Management these terms are very important for them if you do not understand estate then you do not understand the requirement of HS then you do not understand Redux so State VI we must know so it's like a revision okay so for example here is a component component State and inside it we are
105:00 - 105:30 setting the variable count equal to zero which is data so state is nothing State refers to the current data of the component okay this is the initial state or initial data count in the component then later when the data count is updated the state will be also updated right so here is the return element code which will be rendered in the UI so this is the output UI you can see here we are
105:30 - 106:00 expecting when we click this button the increment function should be fired and the value of the count variable will be incremented by one right that is the expectation but as per the current code in the browser the count value is zero now if I will play this when clicking the button then updated state is getting logged properly in the log because of
106:00 - 106:30 the console log statement in the code but this updated State value which is count that listen carefully this updated Estate Value count is not rendering back to the UI here that is the problem and that means right now our component is stateless our component is not able to to render the state changes continuously in the UI again that means state is not managed in
106:30 - 107:00 our component now to make this component stateful the expected browser should be something like this now see this is stateful on clicking this button multiple times the update State data or state value kept on rendering to the UI this will be a stateful component and for this Behavior and output we will use what we will use react HX or component life cycle method
107:00 - 107:30 in the upcoming questions but now you know what is a state what is a stat less State full right finally two points States refer to the current data of the component and stateful or State Management means when a user performs some actions on the UI then the react application should be able to update and render the data or state on the UI then
107:30 - 108:00 and there then and there okay that's the idea what is the role of use estate hook and how it works use estate is a hook provided by react to manage the state good but in interviews this answer is not enough we should give some more details or pointers first I will quickly explain the code and will then share the pointers which are very easy to remember now I hope you remember the stateful
108:00 - 108:30 concept here is the same example here on the click off click button the count must be incremented and if that incremented value is successfully and simultaneously able to render in the dome here in UI like this that means your component is stateful now we will use the US state hook to implement this first we will import the US state Hook from the react library
108:30 - 109:00 then we have user State as our component name name can be anything then inside it we first called the use State hook function remember as per the hook best practice we will always try to call the hooks at the beginning of component only okay now listen carefully about the US state hook working this US state function accepts the parameter zero which is nothing but the initial count
109:00 - 109:30 or state value okay then this use State hook function will return an array with two elements first element is the current state value which we are assigning to the count variable first time count value is zero and the second element of the array written by this use State Hook is a function which we will use to increment and update this count or state value basically this function
109:30 - 110:00 we will use to maintain the state of the count that function then we are assigning to this set count variable and yes this is responsible to update and maintain the state also remember that this concept of assigning array elements to in individual elements like this is called array D structure in JavaScript array destructuring break the elements of the array and assign them to
110:00 - 110:30 individual elements okay now if we see the UI code here when the button is clicked at the bottom the increment function will be called and like this inside the increment function we will call our set count function which will increment the current count value by one and update the same in the application state so this will maintain the state and that's how the state is updated and the same will be rendered to the UI here in
110:30 - 111:00 the paragraph element okay so once again remember the most important thing here set count function is a react Library function that is returned by the used State hook which is used to maintain the state also remember the first statement used State hook function will be called only and only one once when the component is loaded first time after that when you update the component by
111:00 - 111:30 clicking the button again and again then only the increment and therefore set count function will be called but not the use State hook okay great this is the whole story of the working of use State hook now I will share the things which you should remember for the interviews first here is the simplest definition of of the user State hook then here is the functioning of user State hook with its returned elements
111:30 - 112:00 then the array of then the definition of array D destructuring in the simplest word and finally we have the basic structure of using use stti Hook is also present here all I already explained but putting here so that if you want to revise it later then you do not have to go through the whole video explanation again and again just a 5sec quick look or revision from the book is enough good
112:00 - 112:30 that's the answer to this question what is the role of use effect hook how does it work and what is its use let me first share the its real use because that is more important from interview point of view for example this is your react application and here is one big component here now here some data is rendered initially directly when the component is loaded for the first time the component will not be rendered
112:30 - 113:00 or displayed first time without this data okay but as you can see here after the UI displayed some data is still loading and taking time to load in the UI although the component has already rendered on the page right so as a developer you can render some data lately like this because that data might take more time to come from the external apis okay so this is what we call a side
113:00 - 113:30 effect because it is not the part of the initial rendering or loading of the component okay so the answer of this question when to use use effect Hook is the use effect hook in react is used to perform side effects on functional comp components okay for example data fetching from an API is an example subscriptions or any other operation
113:30 - 114:00 that needs to be performed after the component has been initially rendered now let's quickly see see how it works and the real code example first we will import the use effect Hook from react library then here is our component which name is use effect or name can be anything inside we will call the use effect function or hook like this see this function use effect will
114:00 - 114:30 perform the side effect use effect will accept two parameters first a complete call back function from here to this comma at the end we call this effect function okay second parameter is the dependency ER now listen carefully when use effect execute then effect function execute first which will call this below fetch
114:30 - 115:00 data method and hence the fetch data function will execute in short here we are fetching the data from the external API using a syn AIT approach from this URL then we are assigning the response received data data Json to this result and finally we are logging the data result in the console great that is how effect
115:00 - 115:30 function runs side effects and we are getting the data from the API external data now here is the UI code right now we are printing the data in the console like this in the output but if you want the same data to render in the UI also then you also have to add the use State hook at the top and maintain the state of this data which is received to render the same into the UI okay all right and
115:30 - 116:00 this second parameter of the use effect H is an dependency array which I will cover in the next question in very much detail now let's summarize our learning for later revision here are three points to remember our about use effect first you use effect is called after the component renders for example to run side effects second Point use effect
116:00 - 116:30 function will accept two parameters one effect function and second is the dependency array that's it what is the dependency array in the use effect hook if you remember we have this structure of the use effect Hook and the second parameter here is the array of dependencies dependency same thing right dependency means a value or piece of data when user will change this value the whole first
116:30 - 117:00 parameter side effect or effect function will rerun okay let me show you the example in the video here here the user ID an element in is an element of the dependency array and when we change its value then below the data will be refed from the API and rerender to the UI meaning the effect function is rerunning on changing the element value in the dependency array right great and here is
117:00 - 117:30 the simplest definition for the interview which I already explained if you want to see the code for this user ID example complete code then here is the complete code for that API with the user ID in the dependency array example in short here we are just using the use effect hook first fetching data from external API then in the dependency array we are putting user ID now
117:30 - 118:00 whenever we are changing the user ID that will invoke the fetch data the effect function again and the result will be rendered in the UI here one question is why this dependency is an array right it can be a single value also now the reason is because you you may have multiple dependencies user ID username possible multiple items here right so in UI we
118:00 - 118:30 have that user ID drop down and on change event other UI elements are here I will not go in the details of these UI elements because our goal here is to just understanding the dependency array which we already understood right and that's the answer to this question what is the meaning of the empty array in use effect here is the code for fetching the data from the API and the
118:30 - 119:00 second parameter array has no elements in it therefore it is blank the answer is an empty array indicates that the effect function will run only and only once because there are no dependencies therefore this API data is fixed it is not never going to be changed CH and therefore there is no need to run this effect function second time right so if there is any any element present in the
119:00 - 119:30 array then on the change of that element this function fetch data will be executed again so that is the answer of this question keep going keep going no matter speed no matter rejections or obstacles in your way in the interviews just keep going until you get there okay all right in this another chapter of Hox we will see first three questions on the Ed
119:30 - 120:00 context hook and then the five questions on the use reducer hook use reducer is a very easy if you already understand use state so remember if any question is too easy for you then you can increase the playback speed of the video so let's start with the first question what is the role of the use context hook if you remember this prop drilling problem then it is very simple for you use context is one of the ways
120:00 - 120:30 for avoiding prop trailing the answer is very simple use context in react provides a way to pass data from parent to child component without using props or properties so this is one way of avoiding prop trailing now the main question is how for that we will create a variable my context which is assigned an object return returned by the create context function again which is the inbuilt function of the react Library
120:30 - 121:00 okay above you can see the import it is imported from react library now listen carefully the object written by the create context context F function will have two properties provider and consumer first in the parent or root component we can use the P provider property of my context component like this and set its value property to the context value of this parent component in short this is
121:00 - 121:30 the this this is value is the data which is now set in the parent component now we have to pass the data to the child component without using props that is the purpose right for that we will enclose all the child component here inside the provider which whichever wants the data so that this value will be passed to these child components and now if we see the child component code to receive the
121:30 - 122:00 data then here we will call use context hook of the react Library which accept the object my context as a parameter and this hook will return return a context value which we can return and display here in the child component so this is how we passed the cont text value from the parent component to the child component but without using the props prop drilling is not required here
122:00 - 122:30 because whichever child need the data only there you can call the use context hook one more thing instead of using use context hook you can also use this commented code commented code to pass the data here we are using this uh my context consumer property for retrieving the context value property okay but as you can see and compare the use context Hook is much simpler right so that is
122:30 - 123:00 the preferred way always and that is the answer to this question what is the create context method what are provider and consumer properties this I already explained in the use context hook but sometimes interviewers do not ask questions like what is use context they may ask ask this kind of inner or lower L level questions directly so let me give you some Theory points here here is our my
123:00 - 123:30 context object followed by the parent component which passes data via my context and the child component receiving that data again VI the my context okay so what is create context doing here the create context functions returns an object with provide with provider and consumer properties second the provider property is responsible for providing the context value to all its
123:30 - 124:00 child components right the third and last point is use context method or consumer property can be used to consume or get the context value in child components that's the answer to this question and the same points which I already explained are written here in case if you want to refer this PP later for quick revision when to use the use context hook instead of props in real
124:00 - 124:30 application one line answer you already know use context hook you should use instead of props when you want to avoid prop Drilling and access context values directly within deeply nested components remember for one level of parent child props are simple to implement and good also but for passing data to at multiple levels like parent to child then
124:30 - 125:00 grandchild and further for that use context is a better way finally here are the five real application scenarios for which use context is better for theme switching localization centralized configuration settings any user preferences or for the notification system system these all are like centralized settings in setting page of your web application right for example as a user when you select the
125:00 - 125:30 Dark theme for an application then all the components of that website or application will be displayed in the dark mode right so that's centralized okay so same for other cases also and if you want to understand them in detail then pause and read or what or you can for the book later congrats you have completed almost half of this react course if you are here knowing all the previous questions
125:30 - 126:00 then for interviews upload your resume and start giving interviews I'm 100% confident on you right now all right now here in this chapter component life cycle methods part one I hope you are already about the class components for because that is like a prerequisite for this chapter and in this chapter we are going to cover the questions on the life cycle phases methods like Constructors renders
126:00 - 126:30 component did Mount method and some other methods we will see in the next chapter so let's start with the first question what are component life cycle phes before understanding component life cycle methods let's first understand component life cycle phases whenever a component loads in a react application it has a life it goes through three life cycle phases first is the mounting phase in this phase
126:30 - 127:00 component creation is started and an instance of the component is created and inserted into the Dome okay and therefore only the component is first time visible to you or any user on the page all the method inside this phase will execute before the component is rendered in the dome okay the second life cycle phase is the component updating phase in this phase if you
127:00 - 127:30 change any property or state then the component is being rendered because of Tad change okay and after the rendering component again displayed to you it's like you are just refreshing the component in this updating phase the last last phasee is unmounting Phase this phase occurs when a component is being removed from the Dom for example when you replace one component by
127:30 - 128:00 another on web page then first component will be unloading right then only this phase method will be executed great now the life cycle methods inside this fa in these phases we will see in the upcoming questions all these this minimum and to the point Theory about these faces which I already explained is posted here for later revision from the book what are component life cycle
128:00 - 128:30 methods this is a very important question we already know that there are three phases of the component life cycle now each phase has some life cycle methods that will execute in sequence the first mounting phase has four life cycle methods that will execute one by one in this sequence only then after mounting phase the updating phase will execute and here are the five
128:30 - 129:00 life cycle methods of updating phase again they will execute in the same sequence you notice here this render method is in both faces right why because if you do any change in the component then in the updating phase the same render method will again execute again execute okay so that I will explain in uh later but yes they will can execute multiple times render method
129:00 - 129:30 finally in the unmount phase we have only one method which will execute at last now we are not going to cover all the methods because all of them are not so important we will here cover the most important in the upcoming ones which here I marked in the bold letters here Constructor render component did Mount method then component did update and component will unmount method finally here is the simplest and
129:30 - 130:00 the easiest definition of component life cycle which is very easy to remember component life cycle methods are special methods that get called at various stages of a component's life and then you can name any four to five methods in your interviews and your selection is confirmed what are Constructors in class components when to use them as we
130:00 - 130:30 already know the Constructor is the first method of the mounting phase of the component life cycle right now let's see the Constructor code here see here we have used the Constructor keyword to write a Constructor first thing if you closely look at this Constructor then you can observe that this construct structure or body is very much similar to a function only because Constructor is a function only okay but it is a specialized function why specialized
130:30 - 131:00 because whenever you call this class component this Constructor example component from appjs or index JS file or from any comp parent component then this Constructor function will be invoked automatically remember automatically you need not to write any or call it explicitly that's why it is a specialized function okay now the question is when should we use this
131:00 - 131:30 Constructor in our components The Constructor is used majorly for initializing the component state or performing any setup that is mandatory before the component is rendered in the UI browser or to okay for example here we are setting the state the data count value equal to zero in the beginning before the rendering after setting this the render method will be called which can then return
131:30 - 132:00 return the count value that has been set set in the Constructor only and then only it will be displayed to you so Constructor will run definitely before rendering remember that remember again component will not load or render until the Constructor code run completely great that that's like a brief idea about the Constructor method of the life cycle methods and here is the definition and then the Constructor
132:00 - 132:30 use is also written here which I already explained it's for later quick revision from the book if needed what is the role of the super keyword in the Constructor this is the same previous example of the Constructor in the class component where we were using the Constructor to initialize the state remember and later rendering and displaying the state in the browser okay but what is the need of this super keyword here the reason is super keyword
132:30 - 133:00 will execute the Constructor of the parent class component okay con it will execute Constructor of parent class so actually the rule is whenever you execute the Constructor of child class before that Constructor of parent component class component class must be executed that is the rule and for that purpose we use this super keyword you can try removing this super keyword and
133:00 - 133:30 your application will be impacted okay try it all right finally two conclusions about super keyword first the super keyword is used in The Constructor of a class component to call the Constructor of the parent class this is necessary to Second this is necessary to ensure that the initialization logic of the parent class parent class is executed remember that's
133:30 - 134:00 it what is the role of the render method in the component life cycle in short this is the method in a glass component responsible for displaying elements in the UI if you see the component life cycle then it is present in both mounting phase and updating phase also like this in mounting phase because it renders the element in the UI very first time in updating phase to display the UI
134:00 - 134:30 for the side effects executed by the component did Mount method so it's like refreshing the UI side effects I will make more clear in a component dat Mount question okay also by the name itself you can understand render method rule it's used for rendering the elements in the UI let's quickly see the component code example here is the same previously explained Constructor code in a component which is responsible for
134:30 - 135:00 initializing the component and here is the render method which is just displaying this H2 element with the state count State count value set above in the Constructor right and the render method will render the same in the browser here is the browser output a screenshot where elements are displayed in your browser because of this render method only if the render method is not there then you cannot see anything in
135:00 - 135:30 browser the simplest definition of the render method is the render method Returns the react elements that will be rendered to the Dome now one suggestion here for the interviews uh better to use technical words like dome in interviews rather than using words like UI or browser because then you will be sound more technical to the interviewer and that will be great right how can the estate be maintained
135:30 - 136:00 in a class component I hope you remember the concept of State stateless and state full which I already explained in the basic questions right but in short like this browser video on increment pattern the state or count value must be updated and also must be rendered to the UI at the same time that is a stateful component if updated State count not rendering to the UI at same time then
136:00 - 136:30 your component is stateless now how to achieve this output in class component code first we will set the initial State count value to zero inside the Constructor then inside the render method first we will display the current state count value and then we have this button increment on click of which the count should be incremented right so when you click the button then the
136:30 - 137:00 handle increment function will be fired now listen carefully inside handle increment function we are using this set State function of real react Library this set State function will update the state and the count value by using the previous state value and incrementing it by one and the same updated state will be set in the above this.state do count to display it in the browser same thing
137:00 - 137:30 will be rendered like this in the dome so the conclusion is this is a two step process to maintain a state first this do set State method is used to update the state then this do state property is used to render that updated state in the dome or browser that's it what is the role of the component did Mount method in the component life cycle
137:30 - 138:00 as you can see this diagram of component life cycle this is the last method of the mounting phase after the render method so this method is mostly used for side effect functions okay remember after it is rendered to the UI to the Dome then only this method will execute and side effect functions like external data fetching or subscription something like that for example suppose this is your react web page and there is one big
138:00 - 138:30 component is inside it here this part of the component which values are displayed will be rendered or loaded with the initial State initial values set in the Constructor immediately okay immediately it will be rendered so it will be rendered after Constructor initialized ation without them the page will not render or load but the other two parts are performing side effects and showing
138:30 - 139:00 this loading signs from some di that I explained in the use effect hook also if but uh let come back again to this question so they will be running the side effect code inside this component did Mount and then will be rendered by the render method of the updating phase okay okay so then it will be displayed in your UI same has been written here okay for the relat reference and now you got the
139:00 - 139:30 complete idea let me quickly show you the code skeleton also for the better understanding see here first we have the Constructor where we State data is null then we use the component did Mount method to fetch data dat data from the API or it's like a side effect and then we update the state data with the fetch data okay at last the render method will render the state data which was fetched
139:30 - 140:00 by the component dat Mount method and render it to the Dome great so this is just a minimum code for understanding the actual fetching code can be very long which I do not want to get into right now otherwise it will be a very long coding video okay great I hope now you know the how the component did Mount method is used for handling the side effects right finally two
140:00 - 140:30 conclusions first the component did Mount life cycle method in react is part of the mounting phase and is called after a component has been already rendered to the Dome second Point component did Mount method is mostly used for side effects for example external data fetching or setting up subscription these two points you have to remember for your interviews and that's the answer to this question congrats for completing the
140:30 - 141:00 last chapter now in this chapter we will explore questions on controlled and uncontrolled components what are they what are the differences between them when to use which one in the forms and other react components and also some other questions we will check out so let's start start with the first question what are controlled components in react I will first give the definition first and then we'll explain
141:00 - 141:30 it a controlled component is a component whose form elements like input fields or checkboxes are controlled by the state of the application okay for example suppose you have an input field on your web page and now whatever letter you are typing here is continuously printing below right so here this input element is
141:30 - 142:00 controlled by the state because the state is updating and it is continuously rendering in the dome or the UI so that is because of State Management only right so that is the example now let me quickly show you the code for this here is is the controlled component where we are using the use State hook to set the value of the input value by using the set input value method then below we
142:00 - 142:30 have a handle input change method where we are calling the above set input value method right I hope we already know the user State hook which I previously explained all right now this handle input change function we will call from the input element when its on change event will be fired so every time we type a letter the input will be passed
142:30 - 143:00 to this e Target do value and that saved in the application state by this method and state and again state is assigned to this input value okay so finally printing this input value at the bottom great so that is the process normal process of us state for handling the state in short this form element input will be managed or controlled by is controlled by the state of the
143:00 - 143:30 application and that's why this component is a controlled component because the elements inside it are managed by the state of the application that's the answer what are the differences between controlled and uncontrolled components this is an important question first we will quickly see some code differences between them and then it will be very easy to understand the differences right
143:30 - 144:00 we already know the controlled component and here is the code first most important point is we are using the application state to save the changes then we are also updating the state and whenever the event is fired for the uh input event handling and finally at the bottom we are rendering the update state in the browser or Tom so in short in controlled components elements are handled by application
144:00 - 144:30 State now here is an example of the uncontrolled component the first and most important point is here we have no State Management we are directly accessing and manipulating the element value and not updating the state right right next point is about uncontrolled is we are using the used ref to access the value of uncontrolled components okay and the
144:30 - 145:00 last point is since the values are not controlled by state therefore there is less rendering as compared to controlled components so these are the differences and here I have written the same differences all of them for later revision the last point is the new one that is controlled components is a recommended and standard practices for forms handling in react okay whereas
145:00 - 145:30 uncontrolled components are useful in certain scenarios but very less commonly considered as a best practice great these are the differences between them what are the characteristics of controlled component let me quick quickly share some characteristics based on which you can identify a component is a controlled component or not here is the same example I already explained first
145:30 - 146:00 characteristic of a controlled component is State control the value of the form element is stored in the component State like the value of the input element is stored in the component State second characteristic is event handling changes to the form elements trigger an event that is the characteristic okay so change for input input Fields like this so you can think of like the event
146:00 - 146:30 should be triggered whenever any change will happen in the elements third characteristic is State update the event handler update the components the event handler will update the component states with the new value of the form element for example here the set input value function is updating the state fourth characteristic is rendering yes the component reenders with the updated state every time and
146:30 - 147:00 the form elements reflect the new value that's the answer of this question what are the advantages of using controlled components in react forms in other words what are the benefits of controlled components theoretical question it is let me share the top three benefits of using control components in react forms first is in control components form elements have
147:00 - 147:30 their own values managed by the react State ensuring a single source of Truth what is the meaning of single source of Truth see that is state only single source of Truth single Source because state is single Source because it will only provide the values to only all the elements in the component form right so state is providing all the values so it's a single Source okay and true because
147:30 - 148:00 State cannot be false it cannot be manipulated directly okay there is a process to manipulate it second benefit is this approach facilitates predictable and synchronized update making it easier to imp element features like form validation Dynamic rendering and integration with the react uh life cycle methods also that is also possible that
148:00 - 148:30 is another benefit third benefit is controlled components offer a better control and mental ability compared to uncontrolled components so that's why they are like the best practices for handling forms in react application I think uh out of these three point points the first point is the most important that single source of truth that says all the things and all the advantage are coming from that point
148:30 - 149:00 only okay so you should remember especially that one whenever someone is asking you the advantages of controlled components how to handle forms in react very short answer the preferred and recommended approach for handling forms in react is by using control components that's it how can you handle multiple input input fields in a controlled form the answer is maintain separate State variables for each input field and
149:00 - 149:30 update them individually using on the onchange event how do you handle form validation in a controlled component the answer is by using the conditional rendering based on the state and validate the input values before updating the state dat conditional rendering means if the value is present then validate them and save the the state otherwise don't so conditional rendering you can use for form
149:30 - 150:00 validations in what scenarios might using uncontrolled components be advantageous as comparison to controlled components so most of the time we use only controlled components okay but yes sometimes uncontrolled components are the right choice and the answer is uncontrolled components can be beneficial when integrating with the nonreact libraries or when dealing with the forms
150:00 - 150:30 where controlled components are not possible okay so in these two kinds of scenarios uncontrolled components are a good choice good job and congratulations on completing the last section the best motivation for anyone is action and you are on it in this section we will cover eight questions about code splitting in react this is a very important concept to improve the performance for
150:30 - 151:00 especially for big applications first we will see what code splitting is and then we will see how to implement it using the lazy and by using the lazy and suspense methods also some scenario based questions also we will explore so let's start with the first question what is code splitting in react this is a very important concept from a p Performance Point of View first let's see what will happen if you do not Implement code
151:00 - 151:30 splitting these are your project files in react project and here is the user who will open the react website okay when the user enters the URL in the browser and opens the website then by default all these files will be bundled together and then sent to the users browsers in one single request that is the default Behavior without code
151:30 - 152:00 splitting okay but if you use code splitting for the same project and same files now when user open the website then if the CSS is required then only CSS will be loaded to the user browser similarly if JS is required then only JS is loaded same for images and for other files in short by code splitting each
152:00 - 152:30 file chunk will be loaded on the demand basis uh yes we use the word chunk for each request data to be sent in code splitting because sometimes we combine two or three files also as per the request and that is a chunk great finally the simple and easy to remember definition is code splitting
152:30 - 153:00 is a technique to split the JavaScript bundle into smaller smaller chunks which are loaded on demand that is the answer to this question how to implement code splitting in react in short there are three steps for implementing code splitting in react first use react. La method to lazily import components second wrap components with the suspense method to handle loading
153:00 - 153:30 third configure your build tool for example web back build tool for dynamic Imports now let me quickly show you the code and explanation suppose you have a very simple child component like this now the requirement is inside the parent app component you have to load this code split component only when the demand comes for it okay means lazy import for that inside the app component first
153:30 - 154:00 import the lazy and suspense function then call the lazy function to import this code split component now listen carefully here the lazy functions allows you to load this component lazily meaning the component is loaded dynamically only when it is actually needed see normally Imports are static like above at the top import
154:00 - 154:30 react statement will immediately import the lazy and suspense function as soon as this with this app component loading right but in the second line lazy function will only import this code split component when it later find finds here that there is code split component required here not immediately if it will not find the code split component here it will not load this code split uh
154:30 - 155:00 import this code split at all in other words the app component is loaded and rendered initially but separately and code split component will start rendering separately only when it is called not along with app component Okay so until the code split component is called in place of that app component will display this fallback message in
155:00 - 155:30 front of the user with the help of the suspense component got it so this is the whole idea of implementing code splitting and remember for implementing code splitting like this you also have to install webpack using the npm command and write this code in the web web pack config file right now I'm not getting into the detail of of webpack because that will be a separate topic and for this code splitting in the browser you
155:30 - 156:00 will find this newly created Chunk in the network tab this code chunk is of separately downloaded code split component if you do not use lazy method and do not use code splitting then only the bundle JS will be there this chunk will will not be there okay all right now you know the implementation of code
156:00 - 156:30 splitting what is the role of lazy and suspense in react although I explained them previously already but here I will share their simplest definition which is very easy to understand and remember here is the app component code that is used to apply the code splitting for this code split child component the code split component chunk will only be loaded on demand not before that right
156:30 - 157:00 for that first we use used here the lazy method which accept a function as an argument and return a dynamic input of this Cod dis spit component now the simplest definition of a lazy function is react lazy is a function that allows you to load a component lazily very simple in other words it enables code splitting by allowing you to import a component asynchronously or you can say dynamically meaning the component is
157:00 - 157:30 imported or loaded only when needed okay yes but until then the until then before that code split component is loaded what will the app component will display in place of it for that the suspense component and its fallback property will be used suspense will keep the code split as a suspense that's why its name is suspense okay definition is
157:30 - 158:00 the suspense component is used to display a fallback UI while the lazily loaded component is being fetched once the component is fetched or loaded the component code split will be displayed and it will replace this fallback UI so this fall back UI will be for some time only until the code split component will be displayed or render to the UI by the chunk that's the answer to
158:00 - 158:30 this question what are the pros and cons of code splitting theoretical question it is and it is not necessary that code splitting is good for every project and every time you should apply it generally it's good for large Pro projects only but let's see both the prawns and cron first five PR pros of code splitting is First Advantage is code splitting
158:30 - 159:00 provide faster initial load time reason because it reduces the initial load time of your application because only loading the necessary code for the current view or feature okay this is good for performance second code splitting optimize bandwidth usage reason is by loading only the code needed for a specific specific page it reduces the amount of data to be transferred over the network so this is
159:00 - 159:30 good for slow Network like on mobile devices where there is slow Network bandwidth problem is there right third is improved caching because smaller and more focused code junks are the caching of the browser will be very easy because caching has to be done for the frequently visited content only okay so that will be easier improved caching fourth benefit is parallel loading
159:30 - 160:00 multiple smaller CHS can be loaded simultaneously that will be led to that will be led to overall faster loading times right Fifth and the last benefit is easier maintenance code splitting can make your code base more more more modular independent and easier to maintain because they are different right so they can be maintained by different developers right but again
160:00 - 160:30 it's good for large projects and small projects it can be in an overhead so let's quickly see the cons of cons disadvantage of of code splitting first it can increase the project complexity okay uh because the development process can be slow because you will apply code splitting for every chunk every piece of Chunk second con is tooling dependency because proper code splitting like build tools or the
160:30 - 161:00 configuration tools such as webpack Babel those dependencies will be there okay managing these tools is very challenging third one is potential runtime errors you can get like more runtime errors because of code splitting can occur in your code next is increase the number of request because code splitting may increase the number of request because different chunks need different request right without code splitting there is
161:00 - 161:30 only one request a combined chunk will be there but with code splitting multiple chunks increased number of request and last disadvantage is learning curve developers who are new to Cod splitting May new may need some time to understand this concept and the best practices that can be a challenge also great that is I think the very long answer and very theoretical and I think a bit boring also but if you will remember two two three pros and one two
161:30 - 162:00 two cons that will be enough I think for interviews now let's quickly see some short answer some short answer questions in code splitting what is the role of import function in code splitting here is the import function while code splitting and its purposes the import function returns a promise that allows to dynamically loading of the modules okay that's
162:00 - 162:30 it what is the purpose of the fallback property in suspense here is the code splitting code and here is the fallback property of suspense component the answer is the fallback property provides a loading indicator or on UI while the dynamically imported component is being loaded so it's just like a indicator that yes some component will be loaded on demand after some
162:30 - 163:00 time can you dynamically load CSS file using Code splitting in react the answer is yes using Dynamic import for CSS files allows you to load styles on demand along with the corresponding components so it's possible how do you inspect and analyze the generated chunks in react application by code splitting the answer is use tools like
163:00 - 163:30 weback bundle analyzer to analyze the size and the compositions of the chunks as I said code splitting has some comp brings some comp complexity so yes that is the part of it great work remember only these small small steps will be the key to success for you now this is the like the last chapter on react and after
163:30 - 164:00 this we will see Redux questions on react which is like a next level for the react here are some questions which are different from each other but they all are very important questions like higher order components styling in react components react native graph ql uh react profile Etc so let's start with the first question what is a higher order component in react it is very similar to
164:00 - 164:30 the higher order function in JavaScript let's first see the simplest definition and then we will justify our definition with the code here it is a higher order component is a component which takes another component as an argument and adds extra feature to that component let's see the code quickly here you can see that this H logger is a higher order component because it is taking one component hoc
164:30 - 165:00 use as an argument okay and then inside it it is returning the H hu's main component but after adding some extra features or functionalities to it okay so meaning when you will call this H H use component then first some logging code by the H logger will be executed which are like the extra features and then only the H use component will
165:00 - 165:30 execute okay now the question is how the hocc component will execute and here is our main H use component this is a very normal component which just returning this div element but if you notice is here we are exporting this component as a parameter inside the higher order component H this ex what this export statement will do it will first execute the higher
165:30 - 166:00 order component and from there hocc component it will execute after executing the extra features okay so if you will export H use directly then extra features of H logger will not be executed with h use okay that will be the difference then like this you can call the H from the index JS file and
166:00 - 166:30 here is the output see my component content is coming from the main component H user normal but this I am from logger this the extra feature this extra feature is coming from the higher order component as an extra feature so that's the whole idea okay that's the whole story and error logging is one real example of using higher order components in real applications same is
166:30 - 167:00 written here for later revision from the book also yes you can reuse this higher order components with many other components of your application right this error logging component for that In hoc logger you can use some generic or common name for the parameter instead of this H use parameter name can and the main main and the main component name can be different okay uh so great that's the answer to this
167:00 - 167:30 question what are the five ways to style react components explain in linely styles to style the react components you can use the same techniques that you use with your JavaScript applications here are the five ways to style react components first inline style then second CSS style sheets third CSS modules fourth Global style sheets and fifth is CSS Frameworks like
167:30 - 168:00 bootstrap now let's quickly see the inline style code here is a component and as you can see inside the element we have provided the style in line along with the element itself self that's why we call it in line and then below we can Define the style like something like this okay so like this output our
168:00 - 168:30 element is styled now this is inline style but mostly we use separate style sheets to style our components okay and that is the simple answer to this question what are the differences between react and react native both are developed by Facebook only but the purpose is different the first difference is react is a library whereas react native is a framework second
168:30 - 169:00 difference is react is used for building web interfaces web applications whereas react native is used for building mobile application third difference react runs on web browsers whereas react native runs on IOS and Android platforms four fourth difference HTML and CSS are used for UI in react right whereas native UI
169:00 - 169:30 components like view text are used for UI in react native Fifth and last difference react deployed as a web application whereas react native deployed through app stores like app store Google Play Etc Great these are the simple differences between them what is graphql now react is for rendering or
169:30 - 170:00 displaying the data in the UI right but who will fetch the data from the database or some API graphql is one option which is also developed by Facebook only here is the definition graphql is a query language for a apis and a runtime for executing those queries with your existing data so here is the one sample example of a graphql query by executing this query you can
170:00 - 170:30 fetch the user details from the database or some API now the question is how it is related with react answer is yes both are like for different purposes but graphql and react are often used together because they are quite developed by the Facebook only and therefore they can uh compatible to each other okay and the same thing is written
170:30 - 171:00 here react components can use graphql queries to fetch the data required for rendering that's the answer what are the top three ways to achieve State Management in react and most importantly when to use use what in your project okay so we already know these are the three ways to achieve State Management in react use State hook context API and redex I'm talking about
171:00 - 171:30 functional component for class components we have other also although I have covered them separately right all these but here we will just quickly see when to use what statement technique for our application that is more important from interview point of view okay and and basically this depends on your project complexity size and requirements so let's see one by one use the use State Hook when you have to manage States at
171:30 - 172:00 the simple single component level the reason is that the state Hook is lightweight and built built in react Library only so therefore it is ideal for small components with isolated States isolated State means one component state is not dependent on another component State states are not too much sharing between the components right Second Use the context API when
172:00 - 172:30 you want to avoid prop drilling for sharing global data because context API simplifies the data passing through the component tree therefore prop drilling is not required okay so yes this is good for sharing data between multiple components components but still the complexity level should be not very much High it should be like medium so it is good for small and medium applications only okay third is use Redux when you
172:30 - 173:00 have a very large scale application with complex States the reason is Redux has a centralized store and actions which provides a predictable Estate Management pattern which is very good for scalability scal scalability means uh for example tomorrow you are adding more and more components after 1 year 2 year in your application then your
173:00 - 173:30 application should is a scalable application it you it should not break and it's a big one right so remember in your project third party tool should be used for complex scenarios only like Redux is a third party tool other FES for normal midsize small application just use the inbuilt features or functions do not try to do complex your project
173:30 - 174:00 okay how can you implement authentication in a react applications in interviews only the implementation flow is necessary therefore I will only show you the JWT authentication process you have to tell only the JWT it's a very popular one authentication here are the main players in the authentication process first is the browser which will act as the front end and the client framework we are using react then we have the API which
174:00 - 174:30 you can also call the middleware server side or backend sometimes this API can be in many Technologies for example node asp.net core Jango Java Etc now there are now eight steps in this authentic ation process first user will open the browser on the client side enter the username and password and the those will be send to the API with a post
174:30 - 175:00 request then in the Second Step the API will receive the credentials and then authenticate or validate the username and password right if credentials are valid it will create a JWT token from here and send it back to the client as a response if the credentials are not valid it will return an authentication error okay as a Next Step the client will store the JWT token in the local
175:00 - 175:30 storage of the browser only in the client machine okay it will store it and now for any future or subsequent request for data from the server this token only will be sent in the header of every request okay got it until now now when the API receives the token it will again check and validate the token signature with the help of some algorithms and if
175:30 - 176:00 the token is valid and same JWT token which was earlier sent by the API then then only the API will send the data to the client and finally the client will display the data to the browser okay so that's why for any website we have to enter the username and password only once because after receiving the token
176:00 - 176:30 only the token will be sent for validation not the username or password or again and again okay so that's how JWT token authentication Works in react application there are other authentication technique also but this is the popular one and and that is the answer to this question what is the use of react profiler in every technology like java.net or react the profiler has same
176:30 - 177:00 meaning definition is react profiler is a set of tools in react that allows developer to profile or you can say to analyze the performance of a react application suppose you have a piece of code code in your applic react application that that is taking too much time to complete now to analyze that piece of code first wrap the code inside the react profiler component like this
177:00 - 177:30 and here also set the ID and on render property of the profiler on render is a function and here is the body of this function now whenever the code inside the profiler will execute and start and stop then this function will also execute at the same time and inside it you will put the code for measuring the start time execution time and the end time of the code execution which can
177:30 - 178:00 then help you in analyzing your code for from from the performance point of views right so that is the job of the PO filer to help in the analysis of the code what is the difference between Fetch and exus for API calls in react these are the two ways to fetch data from the external API here is a simple fetch example for fetching the data you
178:00 - 178:30 can also use it with a sync AIT and here is the example of using xos as you can see for exos first we have to install xos with this command and import it from the exos library then only we can can use it now let's see the differences between these two first difference is fetch is a inbuilt JavaScript function so is it does not require any additional libraries okay
178:30 - 179:00 whereas exos is a thirdparty library that also simplifies the process of like making HTTP HTTP request basically the same thing which fetch can do second difference is fetch returns promise making it easy to work with a synchronous code using a sync aate syntax like this whereas exos allows you to use interceptors which can be good for task
179:00 - 179:30 like request logging authentication and error handling Interceptor what is what are interceptors so for an example suppose you are sending 10 requests from your AP uh react application to an API for data fetching from 10 different components you are sending the request and you want you have a token handle file and you want that with every time a request go a
179:30 - 180:00 token handle file will be inserted or intercepted in the request okay so that is interception when you intercept your request with something with some token or anything so for see for simple interception fetch is also good but when you need more control over interceptors then exos is xos is a very good option great now the most important part when
180:00 - 180:30 to use what if you want to keep HTTP requests simple fetch is a good choice because there is no point in using complex solutions for simple problems right whereas if you want to intercept multi multiple TTP request or response at a bigger level to improve error handling then exus has many features to do it that is the answer to this
180:30 - 181:00 question what are the popular testing libraries for react these are four testing libraries you can use in react project first one is just then react testing Library enzyme and then Cyprus now I think there are some more but yes these are the more popular most popular one that's the short answer of this question how can you optimize performance in a react
181:00 - 181:30 application this is like a theoretical and senior level question and quickly I will share eight points which you can use in your react application to optimize the performance you can remember three to four points out of it okay not eight points actually Five Points I will share first is me use memorization with use memo and use call back to improve performance these hooks can memorize functions and the function results which
181:30 - 182:00 reduce unnecessary recalculations okay second way is optimizing the renders with the react. fragment and that will avoid the unnecessary wrapper elements that could cause additional Dome nodes right so that's also a good idea Third Way is use lazy loading with react. LA function yes use it to loads component lazily that
182:00 - 182:30 will basically reduce uh reduce the initial bundle size and improving initial loading performance fourth is code splitting employee code splitting basically react lazy and code splitting are the part of same story it will divide your application into smaller chunks that are loaded on demand that will improve initial load time okay Fifth and last is optimizing images and assets it is very common compress
182:30 - 183:00 and optimize the images you have in your storage use responsive images and leverage lazy loading for images to reduce the network and rendering bandwidth issues okay all these techniques I have explained in previous questions or other questions in detail and I think remembering three four ways out of these five will good for the interviews that will be enough
183:00 - 183:30 also whatever I have explained that I have put here in detail summary which can help you later in the revision from the PDF or book explain reactive programming with example let me first show you one quick leak the example of reactive programming for example on many websites like Google you have noticed that when you start typing Google immediately
183:30 - 184:00 starts giving you the hints like this right so that is happening so how is it possible basically Google is continuously capturing your keyboard events or changes and based on the those changes Google is fetching the data from the Google server and displaying it to you so that is a good example of reactive programming so because it is reactive you are typing and Google is
184:00 - 184:30 continuously fetching and also rendering the data in front of you more accurate definition is reactive programming is a programming approach that focuses on reacting to changes and events in a declarative and and a synchronous manner what is declarative declarative means a programming style where you write the code for what you want to achieve rather than specifying the step bystep approach
184:30 - 185:00 how to achieve it okay like jsx in react it's a declarative syntax and asynchronous means action that is not blocking you UI for example in this case fetching the results by the Google will not block or hang the U right like you still can type you can still do and fetching is also happening simultaneously so that is meaning the things are happen happening
185:00 - 185:30 asynchronously all right whatever I have explained is written here for later Revision in how many ways can we Implement reactive programming in react as I said reactive programming is focused on reacting to the changes and events that can be done in many ways and if you are using event handling with State management techniques like react Hox redex or component life cycle
185:30 - 186:00 methods then most likely you are already doing reactive programming in your project so these are some ways to handle reactive programming in your project State and props react hooks event handling context AP redex uh component life cycle methods a syn await rxjs and observables they are more good with the angular but yes in react also we use it sometimes and above
186:00 - 186:30 also already explained all of them I think but here I am giving the minimum detail next to them which you can pause the screen and just read it that like a short and quick answer for the long question how to pass data from a child component to a parent component in react normally we pass data from parent to child component and that is done by using props right but sometimes we have
186:30 - 187:00 to reverse the data flow that is from child to parent and that can be done with the help of call back functions therefore prior knowledge of call back is a must for this question let me quickly share the the steps to do it first inside the parent component we will Define one call back function like this they'll this call back function will have an argument data the value of
187:00 - 187:30 this data will be sent by the child now let's see how first we will call child component inside the parent component and pass the Callback function itself to the child component like this okay then in the child comp component we will receive the call back function as a parameter and inside child component we will Define one new function data to parent basically to send the data to parent this function will be called when
187:30 - 188:00 the user will clicks the send button from UI here present down here okay this data to parent will be called and the value present inside this input field will be passed in as argument to our call back function from child and when this call back function will run it will be executed here in the parent component receiving the data from the input field
188:00 - 188:30 value in the parameter okay and logged the information in the console so that is the complete process callback functions are like a traitor so they will go somewhere you will pass them as the parameter in some function and then but they will work for their original origin from basically from where they are coming from you're getting my point why we use the call back function that is like a very tricky
188:30 - 189:00 thing and very popular thing nowadays great the final answer is the parent provides a call back function to the child and child component can invoke this invoke this call back to pass the data back to the parent that's it all right if you reached here and completed all the questions and answers then many many congratulations because
189:00 - 189:30 where there is a will there is a way my best wishes are with you and if you have any question then feel free me to ask me in the comment section again all the best for your interviews and career and if you want to say all the best to me then do like and subscribe and just post one comment whenever you get the offer remember only one thing can stop you now and that is giving up so never give
189:30 - 190:00 up e