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

@rafinha0206

2 жыл бұрын

@MARCVS ANTONIVS chill bro

@coder0015

2 жыл бұрын

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

@harishramakrishnayatham7210

Ай бұрын

how is it going bro now

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

@chiragsingla.

29 күн бұрын

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

@user-qi7th9vk2k

28 күн бұрын

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

@chiragsingla.

28 күн бұрын

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.

28 күн бұрын

@@user-qi7th9vk2k This was not good example of decomposition.

@chiragsingla.

28 күн бұрын

@@user-qi7th9vk2k Imagine using 2 useState hooks for doing this

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

10 күн бұрын

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

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

@heysandip

2 жыл бұрын

Sure!

@tt4m

Жыл бұрын

Why

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

@cookieman.19

9 ай бұрын

Was it the most efficient solution, any drawbacks?

@ValeriaTiourina

2 ай бұрын

Yeah, this is what I would have done!

@oovoo1995

2 ай бұрын

yup, why making another function to just to set lol

@juggles5474

Ай бұрын

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

@gustavogomez2570

24 күн бұрын

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

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

@heysandip

2 жыл бұрын

Thanks for the constant support!

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

Thanks alot, your video popped up at right time 💖

Subscribed!! Keep sharing your good work brother

@heysandip

2 жыл бұрын

Thanks for the support! Much Love

Thank you Sandip for the video 🙏

@heysandip

2 жыл бұрын

Hopefully it helps!

@tt4m

Жыл бұрын

♥️♥️

@pradyotsinha1959

Жыл бұрын

@@heysandip which code editor are u using

Sinple yet effective. You are smart.

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

@proletar-ian

2 ай бұрын

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.

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

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

Well well well well done !!!👏👏👏

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

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

4 ай бұрын

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

3 ай бұрын

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

3 ай бұрын

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

@user-vt4eh1os3m

3 ай бұрын

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

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

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

2 ай бұрын

@@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. 😭

this was something that i was thinking abt

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

Nice well explained, good job mate

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

Super amazing short 🎉

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

Super ga cheppav Bro 👌👌

In simple words it is not call back it props

Awesome work 👍keep uploading...

@heysandip

2 жыл бұрын

I hope its useful as refresher!

@AbhishekKumar-vl3cb

2 жыл бұрын

@@heysandipthese are quick refresher👍🥭

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

Wow brother this is amazing

More videos like this ✨

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

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

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

@proletar-ian

2 ай бұрын

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

@altintasutku

2 ай бұрын

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.

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

Well explained Ty!

Helpful, Thanks!

Great Sir!Can you please tell me which font style and theme are you using in vs code?

Good explanation 👏 can u also specify the font you have used 😄 it's really cool ..

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

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

thank you, just did this !

Best example in internet of pass data from child to parent

Pretty good explanation

@heysandip

2 жыл бұрын

Thanks!

If someone understands useState hook properly, that is more than sufficient to explain . Don't confuse or get confused .

Nice! All the best!

@heysandip

2 жыл бұрын

Thanks

It’s advised to not pass state from children, control it on the parent

Thank you! Would setColor be a better name for the callback or no?

@mitchelline

5 ай бұрын

Yes it would be

Thankyou so much!!!!

Props bro!

What about lifting state up

Your vscode theme looks great, can you which one it is?

@thecoolnewsguy

8 ай бұрын

Ok so I use a similar one called one dark darker

Informational !

Do you have, a crash course off react js for beingger to pro??

bhai ek react js ki series bnao jisme react ko real world project ke bases pr bato

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

Nice example. 😍

What font and color theme is that?

Make more videos on react

In my opinion lifting the state up is one of the most easy thing in this scenario,

Amazing bro

This is awesome

What’s your VS Code font family and Color theme?

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

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

Bro what about Namaste Frontend System Design

An excellent video.

Please how many interviews questions do they get to ask you? Also please share all… too

yes its inmportant :)

Bro how is you macbook's screen matte? What cover /thing have you used?

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

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

👏👏thanka a lot

🔥🚀🇿🇦Dankie

Thank!

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

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

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

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

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

At what point does the use of context become more efficient? I figured “prop drilling” would be the main factor regarding that decision, but don’t know of any others.

what is the theme you used?

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

I have used it to pass grid data to parent component

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

Thanks bhai 🎉

Nice! Or useContext 👍

What's name of the themes ?

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.

excelent video

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.

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👍

Hate passing single functions though. It’s much better to pass an object with methods and properties once and manage state in parent

New sub's is here

What is the VS code theme you're using?

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

You just got a subscribe from me my man

But you can still create Callback as a pure function component and have the value passed and the onchange too No need to declare extra lines of codes

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.

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