React Most Asked Interview Question pt1 😎

Get my Interview notes - frontendsecret...
This video contains the Most asked Reactjs Interview Questions.
Join Whatsapp group - chat.whatsapp....
Subscribe for more upcoming Interview Questions.
LIKE | SUBSCRIBE AND SHARE
ADD ME ON :
Instagram - / akash_sandip
LinkedIn - / sandipguchait

[@coder0015]

As a dev (who's in love with React), I need more of these shorts!!

[@rafinha0206]

@MARCVS ANTONIVS chill bro

[@coder0015]

@MARCVS ANTONIVS I've just started learning React. That's why!

[@harishramakrishnayatham7210]

how is it going bro now

[@GGHH-cf1bo]

@@coder0015 Good luck with the learning!

[@Korrow]

@@harishramakrishnayatham7210react took over his soul.

[@hasanalshareef5047]

1- i use function call On parent calling expect props by children 2- use Context 3- redux

[@chiragsingla.]

bad practice to pass data from child to parents in most cases. In this example imagine how much effort would have been saved if he did it in one component

[@ИванАукин]

​@@chiragsingla.ahahahha. One file with 10000+ lines?) Joke, but decomposition matter

[@chiragsingla.]

I would have made a component called Rectangle or Box which takes color name as prop. This is the right way to do this lol imo

[@chiragsingla.]

@@ИванАукин This was not good example of decomposition.

[@chiragsingla.]

@@ИванАукин Imagine using 2 useState hooks for doing this

[@assuraworkwalker9640]

I think that calling this child component Callback is not the best Idea, evenmore in an interview context. Because Callback is a concept and components should not be named as concepts. The sub component that takes a function as a prop could be named as in my opinion this is more obvious than Callback... As a recruiter I will also expect from candidate to be conscious of the naming aspect because this is often a negliged aspect. Of course you're right this question of props drilling up and down is important. :) My coment is only my opinion.

[@henriquecabralferraz4632]

He is naming it as Callback to explicitelly pass the idea in the video, but I do not underestimate a newby to actually think this is a great name kkk

[@CDob]

May I ask who do you recruit for, and if you are currently recruiting? Thanks!

[@ilovepizza8263]

if someone is watching this youtube video then you can assume they know what a child component is and could tell the callback.js was the child component

[@cognitivebubble4272]

Wish you more of strength! For making react Interviewee's life easier

[@heysandip]

Thanks for the constant support!

[@MVSBAND]

Another solution is just passing the setUIcolor into child and set the color in handleChange… :)

[@cookieman.19]

Was it the most efficient solution, any drawbacks?

[@ValeriaTiourina]

Yeah, this is what I would have done!

[@oovoo1995]

yup, why making another function to just to set lol

[@juggles5474]

yeah why do we need to complicate it more than that?

[@gustavogomez2570]

Agreed, no need to wrap the set state function. Just pass it directly to the child in the props.

[@ambupadamuduli3794]

Thanks Sandip. It's really helpful . Want more shorts like this

[@heysandip]

Sure!

[@tt4m]

Why

[@ikevin127]

better ways: - lift state up (parent only) and pass through props - wrap children with forwardRef, and controll it from parent

[@Charles-d5g8g]

If you want, you can avoid the useState all together in the child component and just pass the data back directly.

[@saxtonvasquez9519]

Context is the best thing to use for react state management. You would set the state in a provider file which will be used as a component to wrap your entire project (or everything it’s relevant to) and then you import what you need into the child components including values and functions

[@mannumannu9200]

Don't you know, local variables are always preferred over global variables. Context API provide global state which will stop you to make your project scalable, more problems in debugging & testing.

[@ak2s]

​@@mannumannu9200 As OP mentioned, context isn't inherently global. You only have access to it in child components. That being said, in this scenario prob makes sense to use a callback or pass the setter function. Using context is like killing a spider with a hammer

[@sohigh7433]

​@@mannumannu9200 if the component isn't within the context provider's scope, it won't have access to the context.

[@Charles-d5g8g]

False, although a way, for such a simple example, you wouldn't need context.

[@jasonnares9634]

Idk why but I'm not really a fan of context API

[@hajimeippo804]

This is the kind of shorts I want to see! Thanks for the tip sir! Susbscribed :)

[@benstov2]

A get function that calls a set function is not a good practice

[@proletar-ian]

It's not that bad as long as the children aren't getting state setters passed directly and they aren't causing feedback loops. Passing callbacks to children allows for the state logic to remain in the parent component in this example.

[@mindbodyps]

Question should be how you will send data from child to parents without shifting the state from child to parents and the answer is there are multiple ways. 1. You can create a global state for which you can use redux toolkit, or redux by creating a slice and declaration a global state there and in whatever compound you want to use it you can use useSelector to select the state and useDispatch to dispatch the changes to global state created inside the slice

[@himanshuagarwal2712]

We can send function as a prop from child to parent And parent will call the prop function and access the data in function

[@allinone_747]

You can directly use useRef in parent and send it to child through prop....and use ref in input box....you will get current value of box through ref in parent ryt??

[@Monika_beauty_girl]

That is forwordRef not prop

[@evanserickson]

Excellent video. Keep in mind this one works when passing functions. You can’t pass objects and then update the object

[@randolphcarter8283]

Hi sir, interesting, i like your style to explain with your hands, feel like classroom with teacher exolaining in the blackboard, regards!

[@EthioProgramming-pj9mm]

Big Respect ❤❤❤

[@cpasneedles]

or just use onChange={function callback} on your input and in your function write what do you want to do

[@seeking9145]

I really needed that in past. Very good explained! I had hard times to understand how to manage that 😂

[@travelspurs]

It's so tough. C++ Java were easy back in our times!

[@kunaljoshi8038]

We could wrap the callback passed as prop in useCallback and then wrap the child component in memo to avoid unnecessary re renders of the child component. If I am not mistaken that is. Thanks for the video

[@nathanmedo]

I like this method but what I do is use the useState directly on the background of the div so no roundabout way in it👍

[@fullmetaltheorist]

Sinple yet effective. You are smart.

[@swarajgadre5630]

I guess we can also use context API for big stack project

[@midophriya3657]

Straight redux when things became nested

[@frogGames]

@@midophriya3657 redux toolkit is much simpler than context api now

[@floskater99]

@@frogGames what about zustand?

[@jasonnares9634]

Using context API for a big project is not scalable. And its hard to maintain. Im talking by experience. :( I once encountered a page with 20 context providers. Uses context for almost everything even for a drawer and modal state. 😭

[@muhammadhashim4105]

In simple words it is not call back it props

[@kevinturpin2273]

3 ways : callback as you said, provider with a context or using redux

[@FocusDream-h6y]

I need react soon😊

[@dark2520]

My only issue with this is that now instead of using one function to control a component. You have to use 3. The useState on the parent, child, and the callback. I’m not sure if that’s efficient which much larger apps

[@waleedtahir9933]

We can simply pass set function the simple answer would be by using props

[@DEVDerr]

From child to parent using props? What? 😅

[@altintasutku]

Bro if you pass a function to a child just pass the setter function

[@proletar-ian]

No no no haha. That's tightly coupled code. Children shouldn't have direct access to state setters.

[@altintasutku]

Because of what. In this case we are already giving them full access so what's the purpose

[@nidhishpareek]

​@@proletar-ian the function would get recreated again and again, reference would change and again and again rendering would happen for child.

[@michaelchen8910]

In the spirit of wording things, I think here the idea of passing data up from child -> parent isn't the way to think of things in React. Instead its more like the "child can tell the parent about something that happens". In this case, the child is telling the parent that color has changed. I think a very common question that most beginner React developers have is "How do I access the data in my child?" Which is generally answered with "you dont". Instead you own the data, and give it to the child. And u may have to move shit around to achieve that.

[@anuj12327]

In this method you are using more space by using two usestate() you can just use props to the child and use it in parent

[@danielvaladez3210]

It's unfortunate react is so popular. Svelte and Vue use significantly less code to do this 😅 but this is a neat explanation!

[@teknologene]

To put it simply. Callbacks are function props that gets executed and has an effect in the parent component.

[@kamalsharma2839]

Is he passing data from child to parent? I can see data being passed from parent to child, as the other way round is not possible at all with prop drilling, if I am right.

[@zongoboy]

I think the right answer is using state hook, you implement the state hook using a callback function. Lets be mindful of how we use these words

[@HabeebNG]

There is a simpler way…. Just pass the set function as a prop to the child component and update it… trust me it works…. I came up with it… the set function is just a function, so instead of creating a new function, you can pass the set function as a prop as well and destructive it in the child

[@kaifshaikh1608]

useImperativeHandle hook will work greatly for this one

[@Ganapamanoj]

Also no need of using template literal in parent component for backgroundColor property, you can directly assign the uiColor as value as it is a variable.

[@newtypetommy]

very important concept! thank you for sharing. please make a video about the importance of binding a function before passing it as a prop!

[@pedroborges5672]

Lift up the state up and keep only one state in the parent

[@sallbro786]

Data(props) moving from parents to child not from child to parents

[@CodeWithObservations]

why you are not passing setUIColor function as callback function?

[@dhawalparmar7117]

Parent to child : props Child to parent : maybe callback or redux

[@intotheunknown21]

It's called "Lifting state up" or "state lifting".

[@kunalshokeen4357]

For sending state from child to parent we can use state uplifting or context hook.

[@joelmilan7835]

This is equivalent to output binding in angular

[@prashantparmar2217]

Its not a callback function. You can refer it as a pointer at a function with arguments to be passed into

[@Techie_Sridhar]

You should follow a single source of truth for the react state. You can use only the UIcolor state alone instead of 2.

[@zul.overflow]

the forgotten one, event emitter, that's powerful

[@mahendrasinhgohil44]

And You can use refs to pass child methods to parent. Generally in a rare case

[@clashingtv2527]

useContext😂 And use it on every element as per use But useState work as ladder❤

[@udhayarajan_m]

This is how we shouldn't, this is called props drilling. Use context or redux or other state management library

[@juliochodaton6079]

I think this is manageable with useState only... Anyway, good explanation

[@Sean_entt]

Very nice 👍🏻

[@emilenev586]

There is something called Lifting State Up. Read react documentation before make this kind of tutorials

[@kaioneal6160]

It’s cool to know how something works but do you know why it works the way it does? Understanding how the ‘this’ context works in component is crucial to understanding JavaScript and react as a whole.

[@bluehawkfire55]

Thank you and to the comments. I needed this info :)

[@Dadaadad268]

Simplest answer is props surely

[@withanujmittal2800]

I know this but I like your video for motivating you to make this type of content

[@gustavogomez2570]

getColor is misleading. You aren't getting the color, but setting it in the local state of the parent. Wrapping the setColor function is not needed, as it leads to this type of confusion. Also setting the color in local state in both parent and child would indicate that this should be placed in either global state, or perhaps use the context hook, or keep it in the parents local state and pass as a prop, but this tightly couples the components, so is not ideal.

[@LedgeTurtle]

It’s a simple concept although your variables names are not easy to understand so your explanation is very confusing

[@ujwal_mahindrakar]

Would love to see something like this on angular

[@desoga]

We have the input and output decorator.

[@ujwal_mahindrakar]

@@desoga that's true, what i actually ment was tips and tricks vides on Angular

[@jimmygore8214]

Passing as props is easier

[@kishoreramana1]

I have used it to pass grid data to parent component

[@thuaneptrai9727]

you are doing the things that very useful. keep going bro

[@tonkov4148]

I tell the child calmly to give it to his pops

[@DEEPAKKUMAR-jt9iv]

Best example in internet of pass data from child to parent

[@jamyit4736]

U can use context api ...this is the good and better than passing props to the function.. Why I m saying that .. suppose u have nested child nd u have to change anything let here be X ..so u have to pass x throughout the all the parent components this is the flaw The X components not use by parents by only use by one child so there is problem..... thx

[@prafulcharde2871]

Well well well well done !!!👏👏👏

[@typingforall]

🗝️ boarding is a great skill, keep it up 👍

[@P.Shivakrishna]

It's called a lifting state up

[@ДарьяОсипова-л6х]

How can you name your function “getColor” if it’s basically SETS color, it doesn’t return any color at all The same thing with Callback - it’s just input, why you name it like this? And why do you need to have a separate state inside the child component (Callback), if you can just use setState + value of the parent, why do you need to set state twice in both parent and child if it’s basically the same value?

[@floskater99]

No way this is asked in interviews. I never even used react and just guessed that "passing a callback from the parent" is how this is done. That's too easy for an interview question.

[@cynamonstudio]

Holy fuck, it is so complicated. Those components seem to be more confusing than useful.

[@pratapgavali4786]

You could've passed set function of useState, no need to write extra code.

[@harshad2870]

U just need to say pass a function as a prop to child and invoke that function in child component with the respective data... Tip.. u can also pass setState method as a prop in your example

[@rvs99]

logically that function name should be setColor instead of getColor

[@MerthanMerter]

I'd just create a custom hook and use spread operator to pass all props to be honest. with more complex scenarios ofc

[@TokyoWasTaken]

in simple terms they called prop drilling

[@ProgrammingWithExx]

great

[@AbhishekKumar-vl3cb]

Awesome work 👍keep uploading...

[@heysandip]

I hope its useful as refresher!

[@AbhishekKumar-vl3cb]

@@heysandipthese are quick refresher👍🥭

[@jafariqbalchoudhary3926]

U can pass setUIColor directly to the child component

[@GarfieLD-Mami]

I will use this method for my project after arrive to my home. I will answer if its work. 👊👊

[@ranjeet8082]

Use the camel case for these variables UIcolor, activecolor

[@FilipeLeonardoM]

Nice! Or useContext 👍

[@RAHULYADAV-rw4xj]

Great brother please make a full video on this type of questions helps a lot thanks 🙌😍

[@kazorecki9029]

Why bother wrapping setState with function that doesn't provide any additional value?

[@Julukevin]

Wow brother this is amazing

[@lautarolesniewicz2884]

Nice well explained, good job mate

[@gr5791]

Just going to add this... apparentally we can call this technique as "state hoisting".

[@kennjenga10]

Why does it look like an inner function(closure)

[@saivaraprasad9989]

Super ga cheppav Bro 👌👌

[@harbhajansingh9882]

Lifting state up

[@ranit76]

its call prop drilling

[@atalaguitare13]

You are using useState in Parent and Child which is redondant and verbose. Also you set the color to null then it passed to value input, you have a warning in the console saying to not set a value input to null. Instead set it as undefined or empty string. Child component should just have the logic of the input for a clear and clean code. I coded it in a shorter way: //Parent export default function App() { const [color, setColor] = useState(''); function handleColor(e) { setColor(e.target.value); } return ( ); } //Child export default function Child({ handleColor, newColor }) { return ( ); }

[@programmerhub447]

I think the simplest way is by lifting state up but im not very sure 😊

[@archlinux8390]

What about lifting state up

[@TheAppAlchemist]

Please don't wrap a setState() in another function Just pass the setState() as props

[@AbhishekSharma-fg1ho]

its lifting state up

[@jugalkumarseth7675]

Don't get demotivated by comments dude everyone does mistake. Cheers