How to handle the dependent array in useEffect

Question

I am new to react and just learned how to use useEffect and useState/useReducer. Now I am facing a problem. Assume I have a useEffect like below and states A,B,C,D:

React.useEffect(() => {
   D = fetchReq(A, B, C);
}, [A, B, C])

React.useEffect(() => {
   B = fetchReq(A)
}, [A])

React.useEffect(() => {
   C = fetchReq(B)
}, [B])

The problem is B also depends on A, so everytime A gets update, B needs to update by an async req accordingly i.e B = fetchReq(A). And C depends on B, C = fetchReq(B). So once if A change, it may trigger incorrect behavior like fetchReq(A,B_old,C_old) or fetchReq(A,B,C_old), which is unwanted.

How should I fix this problem?

Answer 1

I don't know why you would want to chain it like this as this is causing multiple re-renders for no real gain. You do not mention that B,C,D are being managed using useState. If this is purely a chain of requests that need to be performed on A updating, I would do something like this:

useEffect(() => {
    async (() => {
        const B = await fetchReq(A);
        const C = await fetchReq(B);
        const D = await fetchReq(A, B, C);
    })();
}, [A])

Answer 2

Is ABCD an object? If so, look for a more specific property value on that object to use inside of useEffect's trigger condition[]. By doing so, if the value does not change, even if useEffect runs through an dependent structure, there will be no circularity.

I am sure that the value of the variable required for fetch, does not keep changing every time when it is fetched again.

If that is the case, please write a more specific code example.

Answer 3

I would remove the dependency on A and B in your first effect. C will only update if A is updated (and subsequently B). So, you will not need to listen for changes to A and B, because their change will be a given.

Try that:

React.useEffect(() => {
   D = fetchReq(A, B, C);
}, [C])

React.useEffect(() => {
   B = fetchReq(A)
}, [A])

React.useEffect(() => {
   C = fetchReq(B)
}, [B])