javascript - React useState hook: passing setter to child- functional update, callback and useCallback - Stack Overflow

admin管理员组

文章数量:1430077

I have a few questions related to each other regarding React hooks: useState and useCallback.

---

1. When exactly is a functional update required?

1.1. If the setter function receives a function its argument will ALWAYS be the previous state?

---

2. If I want to update the parent state from the child ponent, how should I pass the setter to the child- wrap it in another function as a callback as explained here? just pass it directly as suggested here?

2.1. What are the reasons and advantages/disadvantages of each approach?

---

3. If I can just pass it directly and I am using memo, is useCallback required as explained here?

---

4. If I want to use the most recent state data when updating the parent state from the child, how should I do this?

4.1. Is passing a callback to the child useful in that case?

I have a few questions related to each other regarding React hooks: useState and useCallback.

---

1. When exactly is a functional update required?

1.1. If the setter function receives a function its argument will ALWAYS be the previous state?

---

2. If I want to update the parent state from the child ponent, how should I pass the setter to the child- wrap it in another function as a callback as explained here? just pass it directly as suggested here?

2.1. What are the reasons and advantages/disadvantages of each approach?

---

3. If I can just pass it directly and I am using memo, is useCallback required as explained here?

---

4. If I want to use the most recent state data when updating the parent state from the child, how should I do this?

4.1. Is passing a callback to the child useful in that case?

• javascript
• reactjs
• react-hooks

Share Improve this question Follow asked Apr 21, 2020 at 11:57 RanSTRanST 50222 gold badges77 silver badges2323 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

1. When exactly is a functional update required?

You may need to update any state on your ponent. For example, you are getting user from server via api and you need to store that user on your ponent. To do so, you need useState to store that user object. Here is the example:

const [user, setUser] = useState({}); // declaration

let newUser = u; // u is ing from api
setUser(newUser);

1.1. If the setter function receives a function its argument will ALWAYS be the previous state?

Yes. setter function like setState is used in class ponent. Here is the example of only update a state field:

this.setState({username: 'khabir'});

here you are updating state using previous state:

this.setState(prevState =>{
   return{
        counter : prevState.counter +1
   }
})

2. If I want to update the parent state from the child ponent, how should I pass the setter to the child- wrap it in another function as a callback as explained here? just pass it directly as suggested here?

Both examples are same. you can use anyone.

3. If I can just pass it directly and I am using memo, is useCallback required as explained here?

If you pass any function reference to the child ponent from parent ponent, it is being created on every render of Parent and hence prevProps and props is not the same anymore even though they are.

To apply the memo, we need to make sure that function reference is not unnecessarily recreated on every render of Parent. That's why useCallback is used. Please read that article pletely for better understanding.

4. If I want to use the most recent state data when updating the parent state from the child, how should I do this?

You can not update parent state directly from child ponent but you can send function reference to child ponent and call that function from child ponent that defined (the function) on parent ponent. In that function body (in parent), you can update your state of parent ponent.

4.1. Is passing a callback to the child useful in that case?

Yes as I said on the answer of question number 4.

本文标签：