[ Live ] React JS Interview 🤯 | Frontend UI Questions 🤒

what is the functional component uh so so see you can use the name Tony Stark why did you do export default so so uh basically uh do you see there is a bug in your app bug in my app but can you please improve your code a little no no no it is not a good way something uh random is happening over here okay okay I got it I got it got it got it got it so thank you for your introduction AE so can you tell me what is the difference between State and props

in react yes I can tell you about State and props so basically uh whenever you are building a react application you have to build uh components inside react and these small small components have to manage data and uh to to manage data inside a component we use uh State and uh so so and props is something which a component receives yes okay so can you uh show us some example yes I can give you an example uh but uh uh so should I do it in my laptop yes yes please do it in your laptop

yes okay so uh right so maybe uh should I create a new project or something for that so uh yes you can create a new project for that right yes you can show the code how will you create a new project by the way yes I know that so basically there are multiple ways to create a new project so one is you can just uh uh create a new create react app so create react app is a package which helps you uh build a new project right uh in react yes you can go ahead with

that okay we can do that so uh let me just share my screen once um so is my screen visible yes yes it is visible okay okay so so basically I will create a new create react app a new uh react scaffold uh so the command for that is npx create uh react app and then the name of the project so the name of the project right now uh let me give it uh uh demo right demo interview interview okay so uh let me give it the name as demo interview if I hit enter now

uh basically this is getting created okay what does this create react app do so a a a react project is getting created uh and we will code it inside it what will be there in this project so uh in in this project we have um in this project we will have a scaffold uh when I say scaffold that means um this create reacta package will build a dummy application for us and then we can code inside it inside this dummy application react will basically this package will give us bundlers and then it will give us

a setup of testing and it will give us was basically it will be a um it will be a uh what you'll say it will be ready ready to go live kind of an application react will give it to us and it be it it helps us to uh start developing very fast and uh you don't have to worry about packaging the content and all what do you mean by packaging of the content so packaging the content means um so see there are many when when you develop react application there are so many files so

many uh components so many uh JavaScript files so many CSS and everything so what happens is you can't directly host them on the web so basically you need to run that application into onto a server so uh it creates a server for us it helps us host those uh the our application onto a server on Local Host and it also will help you to create build how it will create a build yes so it has uh I I know uh how it does it basically uses something known as bundlers uh in create react app there

is a bundler which is known as webpack so uh create react app behind the scenes uses webpack and in this web pack uh uh its job is to basically compile our code and uh basically it uh it compiles our project and then runs it onto Local Host and there are some commands by which you can uh build this project uh so uh all those things are done by uh bundler and apart from that you know when you create this uh uh create react app then it also sets up testing for you it sets up a

lot of SEO things for you right uh we can see that inside our project also uh yes can you please show me yes I can I can show you so now it has created right so now I can go and open that project in vs code so we have this demo interview let me open this up so if you will see right here uh yes I trust authors so if you will see right there are multiple folders which are created and uh you know right and in SRC folder see there is there are a lot

of things which are created so here you can write test cases and then uh so basically it's a goto application which is developed okay what is there in that public folder so inside public folder yes so this public folder will have a lot of things uh which will help us in um what you'll say if you want so this public folder basically has content which we will need in our application uh such like uh like our icon of the app right so icon that you see on the top of the browser and uh in manifest.json

you can put some extra things um it will help us create PWS and a lot of stuff what is PWS so PWS are pre PW are uh uh Progressive web applications so uh yes you can when you create a create app it creates a pwa if you do it properly here what is robots.txt see robots.txt uh will be helpful for SEO and uh to make your um website crawlable for search engines yes yes what is node modules here that node modules folder that you see okay so uh um okay yes so node modules contains so

see mod modules is a place uh which uh which has all the dependencies of our project so uh when I say dependencies there are see when you develop a react application uh it needs help from a lot of JavaScript packages so uh those JavaScript packages uh are installed inside this node module so basically it has a lot of JavaScript code libraries these are all libraries which are being used by our uh code uh by react uh webpack it they are used by webpack to make our application run uh so uh those are the packages these

are extra you can say help helper packages which can be used uh inside uh our react application yes now we can just move to the demo of the state and props okay so let's start the coding yes so uh what we can do is now we can run the project and we can start uh I I can show you the demo so to run the project I can just have to run npm start and it will start our project on Local Host so uh yes so this Local Host 3000 and uh yes so our project

is now running so this is a demo application which create react app has given to us so I have to now show you the demo of St props I will give it to you so basically there is a file uh app.js here uh the basic code is written so I don't want that code so I'm just deleting that right so uh if I save this now it is an empty app now I can create a component and then I can show you the uh State and props okay so uh let me create a header component

maybe or a heading component right uh so let me name it as header. JS so if I have this component uh so I am creating a functional component here uh what is the functional component uh so so see the the functional comp there are two types of component in react one is class-based component one is uh functional component so functional component basically are uh just like normal JavaScript functions and you can create it using functions inside JavaScript class based components are U uh created using class uh keyword in JavaScript uh so there are two ways

so uh so see I am creating function component because this is a new way and this is a like lot more better way you have to write less code while doing functional components are you aware of class components yes I am aware of class components also uh okay let me go ahead with functional component so if I can write it using constant header and if I have this header uh and so uh this header and then I can create an AR function here right to create a functional component uh this functional component is just like

a normal JavaScript function but uh uh it just returns jsx from here so uh what is jsx so basically see jsx is uh is Javascript XML and uh uh so basically it is like it is used to um create the uh uh create the uh tags HTML tags and all is it HTML no it is it is not HTML but it is a HTML like structure uh it is not exactly HTML but it is a HTML like structure it is used to create the nodes inside our Dom uh Dom tree and uh that is what

we will return from here like how the header will look like the uh structure of header will be defined over here so uh we can just uh do that I can write a div tag over here and basically over here I can do a lot of things uh let me just put a hello world here right uh to start with if I put a hello world here so so this is my uh component this is a basic component and uh so uh and and you know you can export it here and then use it in

our app.js right here we can we can import it here but before I import it in our app.js I have to export from here uh so for that I will write export default default uh the name of our component here and then uh what I will do is I will import it in our app.js so I have deleted this I don't want this line right let me remove this and then let me import my header here uh import header from header uh so this header file is this and uh uh and then I can just

put a header here right and uh yes so this is how we will import our application and now my header will be rendered inside this div so whatever will be there inside this header will be rendered over here here from here right so hello world will should come onto our page uh let me save the file if I go back to our browser see this hello world has come over here so this is uh this is how uh this works now you can can you please show us what is State and yes now I can

show you what is state so uh so basically uh state is how you manage data inside your component so basically um suppose if we need some data inside our header uh we can create a state over here I can create a state variable uh uh let me create a state variable by let's call it uh name right so let me create a variable which is name and it will contain name of people right so uh I have a variable right you create a state like this uh name and then set name and then I use

a use State and uh use State and then in this use State I can give it a value right so uh let me give it uh the paa okay so uh this is UST State and this use state will come from my react Library so I will import um import from my uh react Library uh use State use state from my react Library so this is how you do it and when you create this state uh uh you can use this variable anywhere right instead of hello world I can say uh hello and then the

name of the uh person so this is how you can uh do that right if I if I save this up so um now if you will go to my page so this is a state variable so whatever will be there inside so DPA is inside the state variable and uh now now hello Deepa will be printed onto our page so see this hello Deepika came in so this is my state variable this is known as State uh in our uh uh in our uh component react application what is use State over here yes so

use State over here is a hook uh use State over here is a hook and uh this so basically there are react hooks react gives us hooks which we can use uh these are like uh these are nothing but like some utility functions so to create a special Dynamic variable we use Hooks and we create a variable like this is this variable different than a normal variable it it is different so basically if you need to create a dynamic variable then only we use state if we don't need Dynamic variable if we not see if

a variable can be changed then we use it as use state but if we don't want to change then it no use can you just show a difference between both of them okay you can use the name Tony Stark maybe okay and here name one yes so uh yes there is a difference so it will come Tony Stark over here but uh see see uh it is different because see you create State variables when you have to create Dynamic variable Dynamic value so suppose if I want to change name one letter I cannot change it

but suppose if we want to change this name I can change that I will I will show you an example wa suppose if there was a button right here let me create a button to change the name right if we want to create a change name right uh if we if we want to change the name right on click of this button right then I cannot change this name right if I cannot change this name react will not allow so basically uh um I I I will I will show you an example so uh suppose

if I want to on change right on change when we click on that button on click sorry uh when I click on this button on click so on click of this button I want to change this name right this Tony Stark so suppose if I if I want to modify this name one I cannot do it this or and if I even do this right name one is equals to maybe something else right uh XYZ so it it will not work like this right so name one so basically on click takes a uh click Handler

right a function here and if suppose if I change uh inside my function also suppose if I change this name one right so it will not it will not change over here right it will not become XYZ see uh if I click on this button see it gave a error because assignment to constant variable uh okay so if even if it is not a constant variable if it is a let variable and if I click on this see it it it will not change on the web page internally name one would have changed to XYZ

but it will not reflect on the page it will not reflect on the page because react did not uh uh reender this component right so uh uh so in react application uh your component rerenders again and again um so whenever there is a state change react component reenders so basically uh uh and if you use a normal variable it it will not reender right over here it will not reender right not re render on change reender on change right so uh the component will not uh render again on change okay so uh this is how

it is and uh you know what uh so basically now if I uh if I change so see if if I change this variable nothing will happen like this but if I change the state variable then our component will rerender I will show you I will show you suppose um and we will use set name to use that right so instead of this name let me put name and over here uh I will use set name set name to change the name over here right this name has uh default value of the so so see

whatever we will pass inside this use State over here this is a default value which we have given to this variable name okay and uh you know and then if whenever we use set name so this will modify this value to whatever we will pass over here so suppose initially it is dipika and now suppose if I have put in simran over here so what will happen this simran will go inside this name and react will rerender our component right react will rerender our component so if if you refresh the page if I click on

change name see siman got changed right so um so what I'm trying to say is when you need Dynamic value inside a component uh then you use uh this use State and State variable and this used State hook so uh that's that's how it is so can't we modify this uh name variable directly no so so if you want to directly change it if you will do name and uh name is equals to no so uh so react hooks have a specific purpose so react keeps a track of these variables and this is a syntax

which is given by react to us we cannot directly modify this and uh it it is not uh it is not uh what you'll say advisable it is not allowed by react to uh uh modify these State variables directly it it it it will not change if you will do that right so this won't work no that won't work it is it is like this why are we using those square brackets there on line number four so why we are uh why we are using Arrow over here so this is a syntax which is given

to us by react uh uh so let let me explain you basically see uh this used State this used State hooks basically returns a array and the first um first element of that array is a variable which contains this data and the second uh second element of this array is a function uh which uh which is a modifier function for this variable and the structure is always the same whenever you use this UST state so basically uh you can do it like this and if I have to explain you you can also do it like

this see uh so this can you please explain once so this basically uh so this use state will return an array over here right this is an array right and uh you can also do see you can write name is equals to array of the first index is basically the variable right this Thea this name right constant name over here is array zero and this is this second variable uh uh set name uh is is is array of one right so this will also work yes this will also work if I will save it and

if I will refresh the page and if I click simrun this will also work see and the the the thing is this is a function and this is a variable this is a normal value right this Thea value so you can do it like this but uh uh but you know what happens is uh this set name function is uh uh yes we can uh so basically but a good practice and a recommended way is to destructure here only right so instead of uh creating two variables here we do it like this this is same

thing and this is known as destructuring in a JavaScript yes this phenomena is known as destructuring in JavaScript and I can destructure on the Fly this uh uh this is how it is is it mandatory to use this set name over here this set name variable can we change it to something else no no it is it is not mandatory to use uh set name or something I it is just a recommended way that we uh put set in front of this name and uh yes so it is a recommended way it is uh not

a mandatory thing but it is a recommended way here yes s so can you now please explain us about what is props in react okay so so one uh so now I have to talk about prop props so Props is a way how you get data inside the component so basically suppose if this component needs to uh get uh the uh data uh inside this component right so uh that is how that is where we use props how to use props is suppose this app.js is the header so is the parent of this header component

now suppose if this app.js wants to send some data here right to data to my children component then uh you can uh use this right so then you can basically uh modify uh then you can pass data from here right so basically suppose if there is a data right uh let's call this as uh data maybe let's call this as uh uh let's call this as uh data is country right Country and this country is suppose India okay and I want to pass this information inside over here in my header so I can pass it

like this right so I can pass this value of country uh uh as country right country right over here so uh now this country will be this country which is passed and now in my header I can receive that data how will I receive over here in props right so uh this props will contain that data so uh uh now uh what I can do I can just write here right from uh right so name and then I can write hello Deepika from and then I can write the country right country or basically not the

country I can write props do country so basically uh I I can just write like this props do country that means um country will be shown see Hello DEA from India and if I change the name hello simran from India so basically uh whenever you have to pass data from one component to another uh we can pass it using props so basically it's a way how uh yeah this this component receives data right this this is how it it works yes and uh and you know there is one more way uh sometimes people also do

like this right you can also destructure over here like this country and you can use this uh country here right so uh some people do it like this also it is also the same thing right if I refresh my page and if I change see it is it is also the same thing so uh that's how this is what is State and prop so AE now let us move to another question so uh have you seen a carousal can you build a carousal for us okay yes I have seen that um I have seen uh

that so um so basically it is like a uh uh so there are images and then when you click on these left and right buttons uh it changes right uh it changes slider image slider um I have seen that in a lot of websites so can we build it yes we can build that yes yes yes we can build that so uh okay uh where where should I get the images from for suppose if I need images I can um get images from some API or somewhere so you can take the images uh anywhere from

the internet yes you can keep it hardcoded okay for now we can keep it hardcoded uh uh yes okay okay okay so let so so I will not write over here I let me create a new component for it so uh if I have to create a new component it's again a new file let me call it as image slider. JS right so uh and then uh so again I'm creating a functional component here uh constant image slider and then it is a arrow function uh okay and uh then uh it also returns some piece

of jsx uh return jsx uh and let me call this as uh div and uh so uh so uh over here right uh in this image slider I will have images right so uh so so let me get the data for the images uh let me create some data it is dummy data uh and uh how how should I keep the data you can keep it however you want to can I keep uh array of uh strings URLs image URLs yes yes go ahead keep it yes yes yes okay so uh you can take any

random images okay okay I can take random images uh random wallpapers Maybe random wallpapers wallpapers just you can choose so I can I can choose random wallpapers uh okay so now uh okay let me take these wallpapers uh okay copy image address and uh I can put it inside a string how many should we take you can take five okay five uh five is a good number okay so let me take five images for now right let me take this one uh copy image address and uh this and then I can take uh one more

two is uh done uh let me take this one uh okay so uh so basically uh uh this will be an array of strings and three and uh then I can take uh this image uh add address here uh and and and and uh no no let me not take this uh and uh let me take this okay and then copy image address and okay so uh okay so so uh here we have like five uh wallpapers with us and uh now I can uh create my slider so to create a slider first of all

I will have to uh get this images in in my image tab so if I have a s RC and then I can do a data of uh zero here and uh and then I can just put it let me I I'm just trying to render and see how how it looks uh here uh so if I go back to my application I will make it below this okay so uh uh yes so I will need this image slider to be inside my app below my header right so uh I I'll have to export uh

this image slider here right I will uh use something known as export uh default default uh export default export default image slider and I can import what is this default over here why did you do export default so so uh basically uh yes I can uh so there are two two ways of exporting either I can export default image slider from here like this uh and one more uh I can do is one more way of exporting is export constant like this right two ways of exporting yes so if what is the difference so if

we export uh so see we exported this Header by default right so that means um see it is used when mostly one only suppose if a file if any Javascript file over here exports one thing then generally it is preferred to use default right uh so only one thing is exported uh and suppose if uh we have uh multiple things uh which needs to be exported from the file then we generally can do something like this see there can be uh there cannot be two default statements right suppose if uh there was one more constant

X is equals to 10 so I cannot make two default statements I cannot do this right so I cannot uh write export default X also this is invalid so basically you cannot do this but suppose uh so suppose but but if if we have multiple then I can do two two times export like this right export constant something and it it will be it will be work right so if there are multiple then we do like this so the only difference will be when importing suppose if you want to import like this if you want

to import like this here so I will have to use these curly braces uh to import from my uh file from suppose if I say dot slash image slider so I will have to use uh these curly brushes like this right and if it is default if it is default then I will not need this right then I will import it like this if we make it default over there okay so uh so a preferred way over here is to use default right uh let us go ahead with the preferred way okay okay yes so

uh let me use default only then right so export uh default image slider yes so this is a preferred way and if I will do over here uh and let me just use this image slider here so if I use this image slider like this uh yes see image came in over here right so uh I can make a slider now just you can go ahead and build it huh so uh now I can make this image a little uh small also right I can uh put uh some uh style over here and I can

just put uh uh the maybe the width and height of the image uh by using style uh and uh style uh uh style maybe width and height with is equals to maybe uh uh 500 PX 500 PX or something 500 PX and uh yes so I can create a slider like this is this a good good way of adding styles to your components if you will ask me uh this is not a good way uh so this is basically uh uh not a good way of writing uh CSS over here so one way is we

can give it a class name and then uh I can uh write inside app. CSS here uh another way is to use some uh component Library not component Library basically uh some uh CSS framework um maybe we can use Tailwind CSS and other stuff so Tailwind CSS what is Tailwind CSS yes so so Tailwind CSS is a CSS framework uh it gives us pre-built classes we can use them uh it is good for large scale products uh large scale projects where we have to write a lot of CSS so it it will it helps us

to optimize CSS it is a larger chunk size and and uh so instead of writing this style and all this we write uh CSS classes over there can you use Tailwind CSS uh right now yes yes I can I can use this in our project yes yes we can use this right we can use Tailwind CSS uh but but I I am not aware of uh the installation instructions like fully I don't know how to install it uh fully right I I don't uh remember it's okay you can Google it yes I can I can

take help of Google and show it to you okay okay so Tailwind uh Tailwind CSS create react app so if I will do here uh yes so install Tailwind with your create react app so uh create a project uh no this not yes install Tailwind so I will have to copy these commands uh and let me just install it quickly so uh let me just copy paste this so it will install Tailwind CSS for us over here it installed uh and then we will have to do some configuration in our tail. config.js yes so let

me do this in my tail. config.js so um yes so um here we have this and now uh yes so we have to do this also right in my app. CSS I will copy paste this I don't need any other CSS uh right now I can just use uh these three classes and uh I think that's it right so this is all we need for installation so why are we doing that yes so basically see Tailwind uh uh see when when you do this right so all the csss which will be compiled by Tailwind uh

will will come from these packages right these are three Tailwind packages base component and utilities so uh whenever we write some Tailwind classes uh so so it it will uh it will generate CSS for us basically so it will generate CSS for us yes so uh so now we can use this so suppose if I have to give width of 500 PX so now I will not use style over here I will use class name so whenever we use uh class names here so uh so suppose if I have to set with so I can

write w and it gives me some options see this so uh with 0.25 RM right uh with uh one one RM 2 R you can you can choose W Hy anything right whatever we want to so suppose if I choose uh w96 right so it will basically uh put w96 basically it will put with 24 RM right uh 384 PX onto my page so uh let me show it to you let me run the project npm start and uh see if I if I refresh my page here see if I refresh my page see everything

got distorted because uh uh everything got distorted because we we used uh Tailwind CSS right now I will have to I have deleted all the previous CSS that is why this happened uh and this button also became like this right so uh we can put CSS but wait I will I will show it to you and but this width became 96 right so uh maybe uh I can just uh use make it Center align right uh how will I make it Center Line I can do something like Flex and then uh justify Center justify Center

so see the image came in center right now uh I can increase the width of the image also see see uh if I can increase the width of the image also see uh if I go see it does not give you class is beyond 96 you can basically uh suppose if you have to write custom over here right so you can put uh custom here like this right suppose if I don't find any class so I can do something like the 700 PX so it will take the width as 700 PX see this so This

Is How uh we can put Dynamic values over here right so now see 700 PX is the width now so now I can create the left and right button and we can uh do previous and next okay so uh so I can create uh a left and right button you can go ahead that okay so let me create a button here uh let's call this as uh uh button and let's call this as a previous right so previous button will take to previous image and the next button button next will take me to the uh

next image so uh previous and next let me bring this next button on the right side uh so uh let me bring this next button to the right side over here uh so uh something like this so previous button and next button so uh I can improve the CSS over here or I can just use those uh left and right images also if you if I want right uh for now this is fine yes for now we can stick to button only uh that is fine uh so I can put some CSS onto button also

let me put some CSS uh maybe I can make the font as bold or something right font bold uh maybe and then give some padding and margin uh padding of uh maybe four or and then margin of maybe 10 uh and uh what I can do is uh so let me see how it looks yes see this is the previous previous button and uh uh and similarly I can give the same to this next button also right instead of previous I can put next over here see this is my previous and next now you don't

have to worry much about CSS right you can uh just focus on the logic yes yes yes thank you yes so so now let us build the functionality so uh so now I will have to make this Dynamic so right now this data is zero but I when you click on next I want this data to be one right this data to be one uh why it is complaining uh it is complaining oh I don't have an ALT tag here so I let me give that alt tag so alt tag uh is there right uh

let me make it as wallpaper okay so uh yes so now that error has gone so basically now image SRC data zero um now I will have to change right I will have to add interactivity so uh on click on next I want this value to be uh upgraded so now again we will need to create State uh in my image slider uh so let me create State uh State again so I can create and so uh so basically uh we will keep a track of the U uh active image on the tab so suppose

if active image is zero then we will show the first image if active image is one then we will show the second image if active image is three then we can uh two then we can show this three so similarly 1 2 3 4 5 we will maintain an active image Index right so let me also create this active image index index here and I can also do set active image Index right set active image index and I can use use state right and uh I can uh by default I can put zero over here

right so uh and this Ed state will be imported right uh will be imported from my library import uh uh use uh state from react okay so now this active image index is zero uh so if I I will use active image index over here instead of this zero yes yes so uh now I will uh modify this active image index and when I uh so so let me show it to you uh so on click of next on click of next I want to uh uh I want to make this set active image index

to + one okay I will have to go to next image right so uh so I can write a Handler over here uh I can create a function uh handle uh next click handle next click right so I can create this function over here and inside this function I can do set active image index to uh the current active image index uh + one okay plus uh one I can say that and over here on click of this I can just call my handle next click okay so when you click on this next button uh

this uh will change my active image index to + one right so uh and you know uh yes so let us see if it works let me go to the page if I click on next if I click on this next see this image changed right so basically uh uh yes I I can tell you what happened behind the scenes is uh see uh the active image index over here was zero and when I click on next so uh active IND BEC one and react rendered our component right react rendered our component and this time

when it rendered uh this image SRC changed to a new image which is the second image right so that's how it was if I click click on next once again see this the third image came in right and click on next the fourth image came in right so similarly I can also uh build it for our uh previous right uh previous handle previous click so um so uh handle uh previous click previous uh click right and now I will have to do just I will have to do minus one here right uh and uh yes

so it is easy right so uh I I can do on click on click of U handle previous click right so similarly we can do previous we can do next so if I will click on previous see it g gets me to previous if I click on next it takes me to the next so uh this is how we can develop image slider but do you see there is a bug in your app do you know that bug in my app uh bug in my app let me tell you can you just refresh your page

okay and now click on the previous button okay oh god oh oh oh oh oh yes yes I understood I understood so basically uh uh my bad sorry uh so basically um uh sorry uh so basically I I know why why this is bug uh I know this bug so uh I know because because see active image index is zero initially and uh we are trying to minus it so it is going to uh uh it is going to a negative value and we don't have a negative data over here and similarly an error will

also happen when we go beyond uh one four right so it has five images 0 1 2 3 4 if I go beyond four index it will again create a bug right so if if I'll go to next next next next next so it will again uh create a bug uh because it is trying to fetch the um um the index which is not there in in this can you now please solve it yes I can I can solve this bug so basically I will have to write logic uh so um if uh this goes

below uh zero right uh so if my active uh if my active index is zero right if my active index is equal equal to zero right right uh then I can what I can do my uh then I can set active image index to then I can write set active image index to uh basically uh basically if that is zero I want it to be the maximum right uh so if I click on back so it will it should it should be cyclic right so if if it is so 0 1 2 3 4 and

if it goes before zero it should be four again right so uh basically it should be four right it should be four over here no we should not hardcode this uh it's not a good way so uh basically basically suppose if tomorrow there are multiple if there are uh if there are 10 images then we should not hardcode it instead I can do data. length right so data do length uh length length minus one right minus one because data length will be five and then minus one will set to the last okay and if uh

and else uh and else I can just do set active image index to minus one yes I can I can write it like this if I will refresh the page now if I click on previous okay see this it is going uh before that next right next uh if I if I refresh the page once right if I click on previous yes so it is going to the last page right but I will have to handle for next also so in the next if it goes beyond four I should go to one four and then

one so basically uh to write that logic I can do a uh uh modulus right I can use modulus if I modulus it by five uh data. length it should work so basically if I do anything greater than four mod by 5 it will again take me to uh the uh first image right I I think this should should work let me just check it once let me just test it once next next next next next see now you can click on next anytime and it works right so see this previous and next one yes

yes yes this is fine but can you please uh improve your code a little do you see a chance of improvement yes so over here one thing which I can see to improve code is uh uh I can just use Turner operator over here it is looking a little ugly I can use tary operator and I can just use one set image active image Index right I can do set active image index and then I can write a ter tary operator inside this right so uh something like this and I can also skip this right

so I can write if uh not of active image index then uh uh put data do length minus what otherwise um otherwise put active image index dot uh length minus one right uh or this right uh this should also work let me just check it once uh let me just so if if this will be zero so uh data R length minus one if uh active image index is uh otherwise active image index minus one so if if I do a refresh and if I go to previous so do you see that that previous button

is moving up and down can you fix yes this previous button is moving up and down yes so I can fix this also this will be fixed by uh putting a so just like we have width over here I can also put a height of um height should be fixed right uh let me make it height of uh 500 maybe right 500 PX height yes it is stretching this image so uh I can uh use uh a a CSS which is known as object object contain object contain right object fit do contain so this should

fix it see now it will keep the resolution and it won't move up and down so so basically it will maintain the resolution and uh whatever the image will be it will be contained inside that box of uh 700 cross 500 right so object contain will do you see any other bug inside your application on any other improvements that you would want to do any other bug inside my application uh or any improvements uh let me see once so uh I can't uh so let me think about it once uh okay let me tell you

can you please just do a right click and inspect go to developer console okay uh right go to the network tab once over here if I go to Network tab uh yes and then please go to that image image filter over there now if I click on image over here right yes so IMG now now can you just please click on next and next again again I should click on next if you click on next again again again again again click it keep keep clicking it keep clicking it okay okay okay yes yes yes keep

clicking it yes yes yes I can improve do you see a problem yeah yeah so so B basically it is making problem see it is making the same network call once again right if if even if the images are repeating uh yes so so I know why it is doing that um so yes this is this is kind of like a bug it is it can be improved so so what is happening is uh so uh I I I I understand this so uh uh what is happening over here is suppose if we have uh

one image here right if I refresh the page so see first time first image is loaded if I click on the next right so a new uh the component is rendered and a new image tag is created right a new image tag is created and uh when you uh create a new image tag uh it basically uh when you create a new image tag uh uh so so it makes another Network call uh and the previous one is gone so what I'm trying to say U when you click on this next the component rerenders the

older image tags is removed from the Dom and a new image tag uh comes in uh and due to this uh uh a new image tag a new API call is made and similarly when the next time the older image also comes it it is kind of like a new image tag and a new network call so we we can improve this so uh how can we improve this is uh sh uh so how can I improve this is um yes so uh I know why it is happening it is because only one image is

present at a time and when I generate a new image it uh goes it uh goes outside so this image tag is deleted and a new image tag is created with a new URL so uh yes one solution I can think of is uh I can uh you know I can instead of having just one image I can have all the images onto my dom and I can just show and hide with respect to Index right so uh what I'm trying to say is U suppose if uh we have five images loaded inside our Dom

and if I uh if I just I will just maintain visibility status true and false but all the images will be there on our page uh yes I can I can write code for it I can write code for it so basically I want all my images to be over here so if I want to render all the images I can use a do map function over here to generate all the images to display all the images so what I can do is data do map right this map function will and uh okay so I

can use the same image tag uh command X or maybe wait so I can use data do map and then in this map I can have a function right uh this function will basically uh uh it is kind of like a loop and it will map over the images so uh URLs for each URL what I will do I will generate this image right so this is my image tag and now this URL will be this URL will be dynamic over here right URL will be dynamic so uh right so now this URL will come

over here uh now now all my images should be there on the page see we have got all the images now what we will do we have requested all the images now all the images are on my app now I will just show hide on the basis of Index right so uh I can just show hide on the basis of index how can you please write code for it yes so what I will do is I will check if that index of this image is equal equal to active image index uh if the index matches

uh uh then only I will show otherwise I will not show so what I will do is uh I will have to maintain the visibility status by this class class name so what I will do is I will make this class name class name Dynamic okay so what I will do is uh I can add this right so if my active image index is equal equal to the index over here index so how will I find the indexes URL and there is a second parameter over here which is known as index right or let me

call this as I so if the index over here is equal equal to active image Index right then what I can do is then I can make this uh visible or else I can hide it right so to make to hide this I can put a CSS class hidden right so if you will see it will do display none and over here I can do display block right I can do display block so uh uh with this uh now I think it should it should behave properly okay I I think I I have done some

mistake let me save this file and Let me refresh the page so uh it is still not happening uh uh uh so what is happening is class name is uh a string and uh it is adding uh okay what is the issue here it it should have worked can you please go to elements check it's a very small thing you're missing okay okay I can check any elements oh okay okay okay got it got it it is it is because it is I have not given a space between these classes okay okay my bad yes

yes okay so I have not given a space thank you thank you for your help uh so yes see now now it works so if I go to network tab over here if I clear this up uh if I open this if I go to next image see so if I refresh my page see initially all the five images will load but if I click on next next next next next any time it won't make any extra Network call now this is good which one is the better way like uh doing this or the previous

one that you did yes this is of course the better way to handle this right this is this is of course the uh a better way to handle the network calls and it will optimize our app what else can you optimize in your app so see uh See on the web page optimization can happen at different level we can optimize JavaScript we can optimize CSS we can optimize images we can optimize other resources so uh if we talk about optimizing uh images so uh you can compress the image you can load the image from CDN

so right now see these images are coming from uh uh random different URLs I can random different URLs domain names servers right so I can uh um request these images from single CDN uh right that will CDN are uh uh basically the content delivery networks and uh these content delivery networks are uh uh they load the image faster and uh uh uh there is caching also right CDN can cach the image they are faster than uh random servers uh so uh uh so generally uh there are CDM such as you can keep the image on

S3 right Amazon S3 bucket so um we can do like that right and if uh we want we can also compress the image before going that right uh because uh uh compressing the image makes it uh makes the size less uh even if the image size is huge what about optimization of uh JavaScript and CSS for optimizing JavaScript and CSS see optimizing JavaScript is like you write better react code and then minimize Minify those CSS and jav JavaScript files and uh uh uh and you know when you use Tailwind uh Tailwind automatically takes care of

uh minifying the CSS and uh uh removing unnecessary see when you have Tailwind right it will only ship the uh CSS which is required it will not uh put extra CSS onto your page so this is the advantage of uh Tailwind that we can use right uh go just check once are you missing something in your code right is there anything that you can improve what I can improve in my code is uh what I can improve in my code is uh uh are you aware of key something known as key in react yes yes

yes yes sorry sorry my bad yes yes we should always use that right we should always use Keys we should always always use keys that is uh the um uh best way so whenever you are using map uh whenever you are iterating over the similar elements we should always have a key over here uh right enter and we will we should have a key I am aware of it uh why do we need keys so key is basically used to uniquely identify this IMG tag so so when I say uniquely identify that means uh see

uh if there are multiple components if there are multiple same tags on the same hierarchy Suppose there are five images or you can say siblings five siblings of images so to uniquely identify react needs a unique identifier that is key and key should always be unique right key should always be unique uh over here right and we should always have key it optimizes the performance of our app right it optimizes the performance of our app uh a lot right so uh so if if I if I'll do like this right uh so uh so react

has to see whenever react has to modify uh make Dom changes or render cycle so if you have key it will uh it will only it will optimize it properly right it will understand that which image tag see uh I can explain you with the with this and see you will get a warning also in the console if you if you don't put key um right I am aware of it so see if there are five image tags so react does not know whenever render uh which which image tag changed so you you have to

uniquely identify this so that is why you need to put key over here so what I will do is I will put a key over here and this key will be uh uh unique so whatever unique so right now I can give a unique URL over here uh or I can also give index over here what should be the value inside these Keys yes so I I am aware of it so basically Ive learned this uh when I was studying react so I have learned this everything so uh so key should never be index uh

no so key you can keep index but uh it is not advisable to keep Index right uh if you don't find anything you can keep index otherwise something unique so for now I can keep the URL that is at least unique it is better than keeping Index right so uh I can keep URL so if I refresh my error would have been gone and now uh now this looks good so can you just quickly build a feature where the slider automatically slides after 5 Seconds it changes the slide keeps on changing the slide after 5

Seconds uh can you please build it quickly yes yes I can do that quickly yes so uh suppose if you want to move this uh after 5 seconds so I will have to use a set timeout uh so yes I can I can write that code so for that I will need one more hook which is use effect so you know um so I I I'll show it to you so we will use something known as use effect so this use effect hooks takes a function over here and uh this function uh and what will

happen is uh so uh so let me tell you so basically see use effect hook uh uh use effect hook see react has a render cycle when the component renders after the render use effect Hook is called right so whatever you pass this function inside use effect hook this will be called after my rendering and uh so uh so I will write over here when my component renders then I will do a set timeout over here uh and uh in my set timeout I will put that uh right uh so after 5 Seconds that means

5,000 means 5,000 after 5,000 milliseconds inside a function what I want to do now I want to do the same uh I want to bring the next image so basically uh it is EXA so I can directly call this handle next click here right so so what will happen is after 5 Seconds it will call this handle next click and the next next image will pop up right and uh uh and an important thing in use effect which I have learned is uh that you have to always put a dependency array right uh right dependency

array so this is the function after this function you have a dependency array why do we need this dependency array uh whatever is this code is happening is dependent on uh active image index so I will put active image index over here so this is how it will work right um uh okay so uh I I'll tell you why we are doing this can you please explain why do we even need this dependency uh array over here so you know the major advantage of this dependenc index is right see whenever my active image index changes

whenever my active image index changes this uh uh this this will be called right this will be whenever my active image changes this set timeout will be called right and it forces to reender the page right so uh this will be helpful like this and if I go over there so every time I click on next a new in New Image is created and active image index is changed and a new set timeout is created after 5 Seconds it again does that so after every 5 Seconds it will start creating a set timeout for us

right it will keep creating a set timeout for 5 seconds so if I will go over here in this page if I refresh my page so let me wait for 5 seconds one uh hope it works right uh yes see after 5 seconds it's changed to new image and now after 5 Seconds it should change to another New Image see see it is happening and if I see the inspect if there is some error there is no error in the console uh see after 5 Seconds it will change uh yes and if I click on

next and previous it works like this also and after 5 Seconds it will again change see there's a bug right okay see it is happening something uh random is happening oh yes yes you are right see see this it is it is happening random things so see there there is some random things happening over here right it is not coming after 5 Seconds this is a bug can you just fix this bug okay okay okay okay okay I got it I got it got it got it got it so this is happening because I am

uh when I do fast fast right so it is creating multiple set timeout and uh uh yes I am aware of this issue so I I'll tell you why this issue is happening is because I am not clearing the set time out now right so a good practice is to clear the set timeout also uh so basically how to clear the set timeout I will do this in return return return we can do a return function and I can clear so basically see whenever uh Whenever there is a new render so basically what happens whenever

uh so whenever the component is unmounting we should clear this timeout we should clear the existing timeout before creating a new timeout right uh we should clear the existing timeout before creating a new timeout right this is what we have to do so first of all I will so whenever I creating a new timeout let me call this as a constant timer right whenever I am creating a new timer I should clear this when the component unmounts right so I do a clear timeout clear time out clear time out of my uh timer right uh

this I will do uh what else I can do is um okay okay okay okay I think this should solve this issue let me just check it once Let me refresh the page uh Network tab uh yes it has loaded now if I click on next next next next next next fast so it is it is creating a lot of set timeouts I guess so uh see it works right it works after 5 Seconds it is loading properly after 5 Seconds it is loading properly is it mandatory or optional like cleaning up clean up is

mandatory and uh yes so it is like uh cleaning cleaning up and uh uh so you know react has a component life cycle what is the life cycle of react component yes I I'll tell you quickly very quickly so component life cycle means like the when you load a component it goes through a life cycle so there is uh so initially a component is created then a component mounts then uh updates happen and then uh component unmounts right uh so when we use class-based components so there are different functions for all of these life cycle

methods uh over here uh in use effect whatever you do over here so how how this code works is initially the code will be rendered whatever you have written over here will be rendered then the use effect function will be called this function will be called this function and after uh the code when the component is unmounting so it it will clear it will call this function so there I will clear my time out so basically uh so this thing happens on every rerender uh kind of thing so uh uh so so that's that's how

it will work and uh this is the life cycle of react and uh you it will work like if you refresh the page after uh after 5 seconds so one more quick thing like is it a good way to keep the data over here like this right uh the data are that you have no no no it is not a good way it is not a good way to keep data over here see we should never keep hardcoded data over here I should ideally create a constant file right constants file because of hurry I was

doing that constants file constants DJs and over here I should keep my data right I can do it very quickly so uh so uh okay okay okay yes so so basically I can just export it from here and uh I I can just import over there and we can use it right uh I can I can do it uh no that's fine you can I I can do it I can do it just it will take one minute right uh I can do it I can do it uh data from my/ constant file and refresh

the page and uh see see it works right yes so now it looks like a better code right it's much more optimized than before yes it is now much more optimized than before and uh this is this is a better code than uh how we we had earlier okay okay okay okay thank you thank you so much right uh that's all for now and we are running out of time also actually so uh let's just wrap it up one one last question I have is like uh where did you study all this from where did

you learn this react from I have learned all these topics from uh Namaste react series by AI [Music]