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

chapter-wise 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

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 PP 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

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

questions on react files and folders

then jsx then both functional and class

components then rooting 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

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 it comment

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

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

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

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

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 LL why we need Frameworks

because Frameworks simplify the complex

server s side program in operations for

big

applications similarly for front end we

need only CSS stml 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 right 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

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

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

these features this can help you in

quick revisions from the book later yes

but for sure I 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 question

questions interview questions here we

will cover 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 Dome what is the difference

between HTML and Dome before

understanding virtual Dome we must

understand do 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

but inside the memory the computer or

you can say the browser it will not seen

as the stml 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 HTM

ml document on the right only okay right

so this is nothing but the tree like

representation of the same

stml 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

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 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 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 do what is the

difference between Dome and virtual dome

in the previous questions I explained

Dome so whenever a user will do any

changes in application then basically we

are updating the real do right now what

is virtual Dome and why do we even need

it first of all Dome 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 do is only

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 do 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

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

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

this exact copy of real Dome is we call

virtual doome 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 of the real Dome only and the

speciality 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

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 we were

directly updating the real dome which

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 doome

makes your web page very fast to load in

the UI

the conclusion is react uses a virtual

Dome to efficiently update the UI

without rendering the entire page will

which helps in improving the performance

and make the application more

responsive 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 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

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 return returns this jsx

okay which is only then rendered in the

UI do not worry I will

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

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

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

disappearing and appearing for a while

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

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 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 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 advantage of reacts are coming

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

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 once remember 3 to

four advantage and that is 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

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 for small applications then the

learning 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 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

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 U

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 their 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

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

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 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 codee itself you know

how 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 byst step

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 script

first we are declaring and then creating

the 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

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 as AR function expression

main files in react projects how react

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

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 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 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 the function keyword

that is the first 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

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

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 will not take

much time these are the five steps to

install uh react I will display 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 vs code uh and

then go to 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 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

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

automatically are loaded uh like this

and this means 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

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

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 your

react application right without it

JavaScript will not work then this

index.js we 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 rep will will

replace the root element in

index.html by by the help of this

index.js file so all that replacement of

the root 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

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

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 down here here you will find find

the bundle.js file okay which is loaded

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 knowe this and index.js file

will render the app component inside

this 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

do 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

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

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 clear winner

because it is faster in that sense okay

third difference is react is smaller in

size and light weight and therefore

again uh it is faster sometimes whereas

angular is bigger because it is a

complete framework therefore also it is

not lightweight 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 react can load a page in

1 second then angular can load the 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 integration in

react but since angular is a complete

framework therefore it provide built

support or features like rooting forms

validation and HTTP request therefore

developer has to write less nine 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 differen is 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

learn as because because it has types

script o oops Concepts and many more

things okay so basically if you are

already know classes objects inheritance

dependency injections these 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

differences between them and you also

know which one should you choose in

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

view JS Angular JS backbone Js amember

Js and there may be many more but these

are the more most popular one J so react

I 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

inbuilt functions of these libraries in

our component so that is 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

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

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

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 reuse that component again and

again in different parts of your

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 one component five and many

more that is reusability

simple second is what is

composition composition is the concept

of creating a new and big components by

you combining existing 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

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 booklet

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 State then you

do not understand the requirement of HX

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 inside it we are setting the

variable count equal to Z 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 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

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

State full 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 in the upcoming

questions but now you know what is a

state what is a stat less stateful 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 rerender the data or

state on on the UI then and there then

and there okay that's the

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

parameters like this now in order to

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 compon component to

child component simple and very easy

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

rejections remember that okay all right

now we will see 10 questions 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 is npm what is the role

of node modules folder if you remember

we 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 NP M and why do we install npm

npm is used to manage the dependencies

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 imp back

your development time and your project

as well right therefore npm will install

all the libraries at once and you do not

need to download libraries

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

modules folder we have this public

folder created by default by react

project 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 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 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 be placed

here inside this the answer is in react

SRC folder is used to store all the

source code of the application which is

then responsible for the dynamic changes

in your web

application 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

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 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 to 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 doome in react

we already know that we have the

index.html 5 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 Dome library or

you can say react doome package which is

imported at the top from the react do/

SL client Library also you can also

expand the node modules folder and you

will find this Library 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

component in place of this root element

okay so finally in place of div root

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

file that replaces replaces the root

element of the index. file with the

newly 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 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 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 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

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

JavaScript 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

component last point is function takes

in props as it arguments and 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 comp component using Arrow

function expression which I will explain

in another questions now what is a

return

statement return return is used to

return 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 return

some div 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 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 way of writing the function

without the function keyword okay and

using this 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 return return keyword from

here then this div will not be returned

to 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

written statement to show some result in

the browser but sometimes we do not want

to 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 in the

console also you can see the output

without the return statement okay so the

answer is yes a function without a

return statement is possible and this

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

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

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

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

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 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 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 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 look like basic

HTML right so that is the 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 what are the advantages of jsx

this is a very important question why we

do not directly use the JavaScript uh

why we need one extra language jsx so

let's see the main advantages one by one

First Advantage you already know jsx

improve code Rel 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 vs code what does it

actually mean see the simple jsx code is

here which will simply print hello happy

okay now if I 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 advanc 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 command from this

direct JavaScript react code and if you

see the browser if I will go to the

browser and 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

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 thems inside uh its own

syntax okay so basically jsx has taken

all the good things from the JavaScript

also uh other advantages of jsx are

improved performance and then another

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

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

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 the answer to this

question what is the role of fragments

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 be enclosed okay enclosed

inside a common root or parent 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

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

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 Dev to

the Dome that is the answer to this

question what is a spread operator in

jsx now we know we can pass properties

from pared 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 some

external API at that time to pass these

parameters in child components we 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

this Properties or any object here only

here only okay so this is like a

shortcut way of writing only but

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

rendering in jsx we already know that in

every programming language we have

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 F

Els condition here is the code example

it says if 2 is greater than one which

it is always right then return ABC or

else XYZ the output you know ABC another

way 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 colum together

will be called tary operators okay so in

this case if the condition is true only

the first state statement just after the

question mark and before the colon will

run okay and if condition is false then

second statement after the colon will be

executed okay now you might think great

now I will never use f Els in the future

but where there are multiple statements

or Expressions their tary operator is

very difficult to use it will not work

so then if Els will be the better way it

depends basically on on case to case

basis which one is good for you next way

of is conditional rendering is this and

operator here in the code and it is

almost it is almost similar to Turner

only but here the end operator it

written 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 okay so it is

always going to 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

1 return this if something else you can

add more cases case statements here as

per the project requirement okay and if

none of the case statements are true

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

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 return 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 at the item in the new array so

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 jss X here we will call the

map

method of of the number list okay then

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 arrow

function because first we are accepting

this number as the parameter uh of the

function which is accepting then one by

one all the array elements in the

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

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

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

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 uh we

call it we are transpiling the code and

the tool that is used to transpile this

Cod code will be called transpiler for

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 bble all right

then what is compiler then so here is

the definition a compiler is a tool that

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

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

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 components maybe

you already familiar with some of them

but I recommend to revise at 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 you 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 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 jsx 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 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 block for creating

user interfaces in web application

reusable because you can 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 they

functional components and and class

components what are functional

components we already know them the

normal components like these are the

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 know second point is they are

stateless components okay but with 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

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

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 prop drilling is

the process of passing down props

through multiple layers of components

that is written here so that you can

easily 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

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 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 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 do

avoid prop drilling three reason here

first because of difficult maintenance

prop drilling can make code harder to

maintain as uh changes in the data flow

require updates across multiple

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 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-up question that you cannot

answer so in interviews we have to avoid

saying the 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 she GP 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

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 return the jsx from

the class component also here the render

method in a class component is

responsible for rning the

jsx finally exporting the class

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 classes then class

components are stateful components by

using the life cycle methods okay that

is their advantage third the render

method in a class component is

responsible for rning the jsx okay all

is written here for later revision from

the

book how to pass data between Class

components in react like functional comp

components we can also pass data between

Class components in react using the

props only but there is a slight twist

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 variable this data to

send then in the child component

like this we can receive the data by

using this doprs do attribute name which

is

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

keyword in class components this is a

very important keyword in every

programming language like Java CP or

JavaScript wherever there is a class

there is this keyword so whenever

someone ask 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 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 keyword because this

is the instance of the class only and in

this case it is the instance of the

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

therefore it will show an error got it

the short answer is this keyword is used

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 see

at least three differences for any

differences question

then only that will your that that will

be great okay so the first difference is

based on the syntax a functional

component is defined as a JavaScript

function whereas the class components is

defined as a uh JavaScript class the

second difference is based on the state

functional component were originally

stateless but can now manage a state

using hooks where whereas the class

component can manage the local state

with this dot

state next difference is that functional

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 components is a

clear winner here okay the fifth

difference is that functional components

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 UI

right great I hope now you are more

confident about the differences and just

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 important

wealthier okay more wealthier so now

here we will cover six questions on

rooting on react rooting is a very

important 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 Rooter in

react rooting means navigation react

provides a way by which you can navigate

from from one component to another

without refreshing the page okay for

example here is the browser video as you

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 Ur URLs to the users right

therefore what is rooting in react

rooting allows you to create a single

page web application with navigation

without the need for a full page refresh

what is react router react router is a

library for handling rooting in react

applications it enables navigation and

rendering of different components based

on the URL that is very important both

these definitions are written here for

later

revision how to implement rooting in

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

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

read redirect or display the about

element declared at the top uh in the

elements finally in the index.js file

you have to wrap the root app or app

component of your application inside

this rotter component like this this

router component again is imported

imported from the reactor router Library

implementing this code will make your

rooting happen and the these are the

step summary summary which we just did

in order to implement routing okay

that's it what 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 what are the roles of the

roots and root component in react router

if you remember remember while

implementing rooting we first imported

roots and root component from the react

Rooter library right and then like this

we implemented 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 component is

used to define a root or you can say a

path and specify the component or the

element which 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 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

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 user clicks on this navigation

link okay so the answer is root

parameters in react Rooter 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 router like this in

the code there is one more component

that can be used as a container for

multiple root components okay 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 to execute if ID is not

present first or second now listen

carefully here switch will execute only

the first matched route 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 so switch is

commonly used for to handle 404 or not

found Roots okay that's the

answer again a very short question what

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 SL SL about

/ Conta are also applicable for this

route right meaning any path containing

slab will be the Matched result by

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 and nothing else okay okay great

here is the definition exact prop is

used with the root component to match

exactly to the provided path that's the

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 hook

here we will see questions on the two

most important hooks that is use State

and use effect hooks remember your

knowledge 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 estate or for other things

proper definition is react hooks are

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 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 a state use effect use context use

reducer call back memo use ref and use

layout effect these are the important

ones there are more hooks but these are

more important I have also mentioned

each hook use 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

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 stand Redux so

State we must know so it's like a

revision okay so for example here is a

component component State and inside it

we are setting the variable count equal

to Z 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

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

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

State full 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 state full component

and for this behavior and output we will

use what we will use react HX or

component life cycle method in the

upcoming questions but now you know what

is a state what is the state less

stateful right finally two points States

refer to the current data of the

component and stateful or State

Management means when a user performs

some on the UI then the react

application should be able to update and

render the data or state on the UI then

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 estate

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 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 user State

hook to implement this first we will

import the US state Hook from the react

library then we have US 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

user State hook

working this user State function accepts

the parameter zero which is nothing but

the initial count 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 us Hook is a

function which we will use to increment

and update this count or state value

basically this function we will use to

maintain the state of the account 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 destructuring in

JavaScript array destructuring break the

elements of the array and assign them to

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

user State hook now I will share the

things which you should remember for the

interviews

first here is the simplest definition of

the user State hook then here is the

functioning of user State hook with its

returned

elements then the array of uh then the

definition of array D destructuring in

the simplest word and finally we have

the basic structure of using use stake

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

5-second quick look or revision from the

book is enough good 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

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

components okay for example data

fetching from an API is an example

subscriptions or any other operation

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

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 area

now listen carefully when use effect

execute then effect function execute

first which will call this below fetch

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 aate approach from this URL then we

are assigning the response received data

J data Json to this result and finally

we are logging the data result in the

console great that is how effect

function runs side effects and we are

getting the data from the apis 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 rendered 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

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

use effect is called after the component

renders for example to run side effects

second Point use effect 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 array same thing

right dependency means a value or piece

of data when user will change this value

the whole first parameter side effect or

effect function will rerun okay let me

show you the example in the video here

here the user ID and element in is an

element of the dependency array and when

we change its value then below the data

will be retched from the API and

rendered to the UI meaning the effect

function is rerunning on changing the

element value in the dependency array

right great and here is 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

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 may have

multiple

dependencies user ID username possible

multiple items here right so in UI we

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 a

array which we already understood right

and that's the answer to this 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 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 d data

is fixed it is not never going to be

changed and therefore there is no need

to run this effect function second time

right so if there is any any element

present in the 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 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 use

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 for

avoiding prop trading 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 by the create context

function again which is the inbuilt

function of the react Library 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 PRI provider

property of my com context component

like this and set its value property to

the context value of this parent

component in short this is 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

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

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 a context value

which we can return and display here in

the child component so this is how we

passed the context value from the parent

component to the child component but

without using the props prop drilling is

not required here 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 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 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

like what is use context they may ask

this kind of inner or lower L level

questions directly so let me give you

some Theory points here here is our my

context object followed by the parent

component which passes data via my

context and the child component

receiving that data again via 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

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

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

uh props are simple to implement and

good also but for passing data to at

multiple levels like parent to child

then 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 these all are like centralized

settings in setting page of your web

application right for example a as a

user when you select the 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

pause and rate or what or you can refer

the book

later congrats you have completed almost

half of this react course if you are

here knowing all the previous questions

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

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

phases 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

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

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 phase is unmounting Phase this

phase occurs when a component is being

removed from the Dom for example when

you replace one component by another on

web page then first component will be

unloading right then only this pH method

will be executed great now the life

cycle methods inside this fa in these

phases we will see in the upcoming

questions all 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

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

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 brand 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

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 up unmount

method finally here is the simplest and

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 method in

your interviews and your selection is

confirmed what are Constructors in class

components when to use them as we

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

Constructor 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 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

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 Tom

okay for example here we are setting the

state the data account value equal to

zero in the beginning before the

rendering after setting this the render

method will be called which can then

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 rendered until the Constructor

code run

completely great that's like a brief

idea about the Constructor method of the

life cycle methods and here is the

definition and then the Constructor 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

comp 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

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

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

it what is the role of the render method

in the component life cycle in short

this is the method in a class 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

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

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

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

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 do 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

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 date 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

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

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. estate. count

to display it in the browser same thing

will be rendered like this in the dome

so the conclusion is this is a twostep

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

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

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

initialization without them the page

will not render or load but the other

two parts are performing side effects

and showing 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 r render method of the

updating phase 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

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 dat 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

by the component de Mount method and

renter 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

conclusions first the component did

Mount me life cycle method in react is

part of the mounting phase and is called

after a component has been already

render to the Dome second Point

component did Mount method is most 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

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 so some

other questions we will check out so

let's start with the first

question what are controlled components

in react I will first give the

definition first and then we'll explain

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

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

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 use state for handling the

state in short this form element input

will be managed or controlled by is

controlled by the state of the

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

we already know the control 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 for the uh input event handling and

finally at the bottom we are rening the

update state in the browser or tomb so

in short in controlled components

elements are handled by application

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 next point is

about uncontrolled is we are using the

US ref to access the value of

uncontrolled components okay and the

last point is since the values are not

controlled by state therefore there is

less rendering as compared two

controlled components so these are the

differences and here I have written the

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

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 Char istics of

controlled component let me 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

characteristic of a contolled component

is State control the value of the form

element is stored in the component's

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

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

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 control 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

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 estate is

providing all the values so it's a

single Source okay and true because

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 say synchronized update making it

easier to implement features like form

validation Dynamic rendering and

integration with the react uh life cycle

methods also that is also possible that

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 points the

first point is the most important that

single source of Truth uh that says all

the things and all the advantage are

coming from that point 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 controlled

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 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 and validate the input values before

updating the state 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

validations in what scenarios might

using uncontrolled components be

advantageous as comparison to controlled

components so most of the time we use

only control 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

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

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

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

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 jss required then only jss

loaded same for images and for other

files in short by code splitting each

file chunk will be loaded on the demand

basis yes we use the word chunk for each

request data to be sent in code

splitting because sometimes s 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

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 Lazy

import

components second wrap components with

the suspense method to handle loading

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

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

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

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 the app

component Okay so until the code split

component is called in place of that app

component will display this fallback

message in 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 uh

implementing code splitting like this

you also have to install web pack using

the npm command and write this code in

the weback 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 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 not be there okay all right now you

know the implementation of code

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

for that first we use used here the lazy

method which accept a function as an

argument and return 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

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

it name is suspense okay definition is

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 fallback UI will be

for some time only until the code split

component will be displayed or rendered

to the UI by the chunk that's the answer

to 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 PRS and crons

first five pron pros of code splitting

is First Advantage is code splitting

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

multiple smaller checks 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 modular

independent and easier to maintain

because they are different right so they

can be maintained by different

developers right but again 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 configuration tools such as

web pack 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

only one request a combined chunk will

be there but with code splitting

multiple chunks increased number of

request and last disadvantages learning

curve developers who are new to code

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 to three pros and one to

two cons and 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

it what is the purpose of the fallback

property in

suspense here is the code splitting code

and here is the fall back 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

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

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 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 react profile Etc

so let's start with the first

question what is a higher order

component in react it is very similar to

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 comp 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

use as an argument okay and then inside

it it is returning the H hu's main

component but after adding some extra

feature or functionalities to it okay so

meaning when you will call this H H use

component then first some logging code

by the hoc logger will be executed which

are like the extra features and then

only the H use component will execute

okay now the question is how the H

component will execute and here is our

main H use component this is a very

normal component which just returning

this uh div element but if you notice

here we are exporting this component as

a parameter inside the higher order

component

H this what this export statement will

do it will first execute the higher

order component and from their 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 hoc use okay that will be

the difference then like this you can

call the H from the index JS file and

here is the output see my component

content is coming from the main

component hoc 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

written here for later revision from the

book also yes uh you can reuse this

higher order components with many other

components of your application right

this error logging component for that in

h logger you can use some generic or

common name for the parameter instead of

this H use parameter name can and main

main and the main component name can be

different okay uh so great that's the

answer to this

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 Java script

applications here are the five ways to

style react components first inline

style then second CSS stylesheets third

CSS modules fourth Global Styles sheets

and fifth is CSS Frameworks like

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

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

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 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 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 compatible to each

other okay and the same thing is written

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

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 uh technique

for our application

that is more important from interview

point of view okay 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 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

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

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 scenario only like

Redux is a third party tool other files

for normal midsize small application

just use the inbuilt features or

functions do not try to do complex your

project

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

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

authentication 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

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

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

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

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

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 it a react

application suppose you have a piece of

code in your applica 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 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

then help you in analyzing your code for

from from the performance point of views

right so that is the job of the profiler

to help in the analysis of the code

what is the difference between Fetch and

xus for API calls in react these are the

two ways to fetch data from the external

apis here is a simple fetch example for

fetching the data you can also use it

with a sync AIT and here is the example

of using

exos as you can see for xos first we

have to install xos with this command

and import it from the exio library then

only we 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

whereas exos is a thirdparty library

that also simplifies the process of like

making HTTP HTTP request basically the

same thing which fetch can and two

second difference is fetch returns

promises making it easy to work with a

synchronous code using a syn of syntax

like this whereas exos allows you to use

interceptors which can be good for task

like request logging authentication and

error

handling Interceptor what is what are

interceptors so for an example suppose

you are sending 10 request from your API

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

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 xos is xos is a very good option

great now the most important part when

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 HTTP request or response

at a bigger level to improve error

handling then exuse has many features to

do it that is the answer to this

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

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 number 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

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. lazy function

yes use it to loads component lazily

that will basically reduce uh reduce the

initial bundle size and improving

initial loading

performance fourth is code splitting

employee code splitting basically react

laaz 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

and optimize the images you have in your

storage use responsive images and

leverage lazy loading for images to

reduce the network work 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 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 program

with example let me first show you one

quickly the example of reactive

programming for example on many websites

like Google you have noticed that when

you start typing Google immediately

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 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 continuously fetching and

also rendering the data in front of you

more accurate definition is reactive

programming is a programming approach

that focuses on react to changes and

events in a declarative and asynchronous

manner what is declarative declarative

means a programming style where you

write the code for what you want to

achieve rather than specifying the

stepbystep approach how to achieve it

okay like jsx in react it's a

declarative syntax and a synchronous

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

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 uh

react HX redex or component life cycle

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 is

State and props react hooks event

handling context API 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 also I 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

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 steps to do it first

inside the parent component we will

Define one call back function like this

they this call back function will have

an argument data the value of 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

call back function itself to the child

component like this okay then in the

child 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 the user will click

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 value in the parameter

okay and logged the information in the

console so that is the complete

process call back functions are like

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

getting my point why we use the call

back function that is like a very tricky

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

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

up