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

Question

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

Answer 1

1. When exactly is a functional update required?

You may need to update any state on your component. For example, you are getting user from server via api and you need to store that user on your component. 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 coming 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 component. 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 component, 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 component from parent component, 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 completely 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 component but you can send function reference to child component and call that function from child component that defined (the function) on parent component. In that function body (in parent), you can update your state of parent component.

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

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