Before addressing this question, I was studying the situation where functions enter the dependency array of useEffect.

Typically, when creating a custom hook, the hook receives state values from the component’s props and uses them in the dependency array of useEffect for handling operations

So, what happens when a function is received as a prop? I contemplated this.

Why Functions Are Included in the Dependency Array

Whenever a React component renders, functions are recreated.

• React Query efficiently manages data through unique keys, preventing duplicate fetch calls and improving performance.

For example, if you create a fetch function via a custom hook, it will be called each time it’s used, leading to unnecessary calls for the same data.

Query Keys

React Query manages cached queries using query keys, organizing complex objects and long strings as arrays.

Since these keys are serializable, they serve as unique identifiers for the cached data.

1. createAsyncThunk allows you to create actions for handling asynchronous operations.

const asyncUpFetch = createAsyncThunk('counterSlice/asyncUpFetch', async () => {
  const resp = await fetch('https://api.aergo.io/~~')
  const data = await resp.json()
  return data.value
})

• createAsyncThunk Flow
  
• While reducers automatically create action creators for you, this is not the case for asynchronous operations. You need to create the action creators manually within extraReducers.