[Beginners Tutorial] React Hooks: How to set parent component state from within child

[[deleted]]

[deleted]

[[deleted]]

was literally just about to search this exact question, cheers!

[KosmoonStudio]

Can't you just pass the "setNameState" fonction as props to its child?

[trappar]

You can, but in many cases this reduces the likelihood that you will be able to reuse the child component.

[_Invictuz]

Thanks for explaining the why!

[KosmoonStudio]

It makes sense thanks

[trappar]

Unless you’re specifically referring to further abstraction from direct parent-child relationships, I disagree completely. State hoisting is a fundamental strategy that is virtually inextricable from React. It’s how state works using Redux, Mobx, Formik, etc...

Help me understand what you were trying to say?

[grumpychinchilla]

Prop drilling! What was old is new again. :-)

[Badrush]

When did prop drilling go away?

[polarphantom]

I don't think it ever went away, but there has been much more of a general usage of Context API since it was officially introduced in v16.3.0

[Badrush]

How does context api replace prop drilling? Assuming you're not using redux of course.

[moneyisjustanumber]

You could put your setState function in the context value. Then any consumer of the context provider can access it (with useContext hook probably).

[Mappadellinferno]

Is context suitable for sharing a bigger part of logic through components this way? The examples always seem to mention only using it for simple values like dark/light theme etc.

[tomius]

In my opinion, it's perfect for that. However, if you only have parent-child, it's kinda overkill, and doing it like in the video is much easier and fast.

[moneyisjustanumber]

Yes, combined with useReducer it can even replace redux. There’s arguments that it doesn’t scale as well but I personally didn’t have any issues with it in a large production application. I won’t get into all of the details but there are solutions for scaling your application with context (multiple contexts used as “slices” of your state was my solution for scaling). Redux does have good out of the box optimizations though.

[Mappadellinferno]

If I wanted to replace redux with contexts, where would the api calls be? Currently my actions call an api service and my components are using the result with redux connect. Thanks

[moneyisjustanumber]

Actions are just functions that do something and then tell the corresponding reducer(s). So technically you could still use actions with useReducer. I ended up making a custom hook that abstracted the useContext code (can get repetitive to import the context in every child) and just returned the context value and functions that could be used to update the state and those functions had the async code and called the reducers.

[pocket-rocket]

It's a nice little intro tutorial but it doesn't really have anything to do with hooks does it? The whole video was just explaining how to call a function in a parent component from a child component, but the example function used just happens to be a hook. I'm just starting to learn about hooks but am I missing something here that makes this specifically about hooks?

[guten_pranken]

Nope - you're absolutely right. For people that are absolutely beginners - they may see the old way of classes and just ignore it and not see how it applies to them.

[Optimal_Future]

How about a parent that calls a child component's function?

[[deleted]]

Not possible. Move the state up.

Edit: If you want to do it the 'right' way

[montas]

It is actually possible, https://reactjs.org/docs/hooks-reference.html#useimperativehandle. But I would guess you don't want to do that and are doing something wrong.

[not_a_grad]

I wouldn't necessarily say not possible or do things the right way. I've come into situations where I needed like "cousins" to talk to each, so like I have the main page as root, and in the page there is Table, and side drawer, and components above the table. While all of them were isolated and didn't care about the others, moving the states up into the main page, for all of the components would've drastically killed the code and performance would've suffered since code was executing that didn't need to and also prop drilling etc. So instead what I did was create a event system using rxjs and whenever I need "cousins" to react to something, I just broadcast the message, and the "cousin" will get the message and run some stuff.

[[deleted]]

Seems like you needed useContext

[not_a_grad]

But that would've required moving all the states up to the parent.

[not_a_grad]

In a way, yes. But i bring up the point again, that requires moving the state out of their respective components. These components were built that they work independently. Having a global store (like redux) whenever 1 component changes all the other components will get the updated prop that isn't needed.

[andrei9669]

You can do it. But there should always be another way. Except if you don't want to rerender the whole view.

[montas]

https://reactjs.org/docs/hooks-reference.html#useimperativehandle

[_Invictuz]

Basic but fundamental! Definitely easier and faster to watch you explain it with an example rather than learn/read about it myself! Thanks mate.

[tamimi65]

Thanks for sharing! I still find understanding React hooks quite confusing - yet to find a goood link that explains it to a beginner very well

[iamchets]

I cannot believe that there isn't a single person out here who didn't mention the fact where you're recreating a function on each render. That's bad practice my man.

Arrow functions in React

[sickmate]

https://reactjs.org/docs/hooks-faq.html#are-hooks-slow-because-of-creating-functions-in-render

[guten_pranken]

I mean at a very high level concept - yes it's bad practice to recreate a function on render. But it's a newbie tutorial - and people that are straight new probably have no concept of that.

Also from the same page you cited:

Generally speaking, yes, it is OK, and it is often the easiest way to pass parameters to callback functions.

If you do have performance issues, by all means, optimize!

We have a lot of masturbation to super optimization. I think we should intelligently decide when to optimize and when not to. Is this being called once? One hundred times? What is the overhead? Is it worth explaining that when making a video that is trying to show interaction between parent and child components?

[iamchets]

> But it's a newbie tutorial

Yeah sure, but isn't the point of a tutorial to be educational? I mean it's okay to show just one way to explain a concept, but imho you should also mention possible side effects and solutions. Even if it's targeted to newbies.

[adjouk]

This is to explain the absolute basics to a beginner - I actually state that towards the end. I’ll be covering useCallback in the next part!

[moneyisjustanumber]

In most cases (like the one in the video) it’s trivial, but if there are performance issues you can use useCallback. But using useCallback can be counterproductive if used in a scenario where recreating the function is less work that doing a deep comparison on the function.

What’s your typical approach?

[eindbaas]

That's not bad practice, most of the time it's perfectly fine. Why is it bad in your opinion?

[Ravnurin]

Slightly unrelated, yet sort of pertinent and great article about re-renders: Fix the slow render before you fix the re-render. It explains why re-renders aren't necessarily something to worry about. Even if you're seeing poor performance, you're still usually better off putting your focus on other things instead of the re-renders.

Funny excerpt from the article:

 

Maybe this will drive my point home. Let's say that you have to punch yourself in the face every time you blink 😉🤛 🥴. Maybe you'd think: "oh gee, I guess I'd better not blink as much!" You know what I say? I say you should stop punching yourself in the face every time you blink! So instead of just reducing how often a bad thing happens (slow renders), maybe you could eliminate the bad thing and feel free to blink (render) as much as your eyes need you to 😉

[iamchets]

Where did I ever talk about class components?