Estoy obteniendo algunos datos de una API, pero dado que estoy usando estos datos para actualizar un estado dentro de un useEffect , este estado se convierte en una dependencia requerida, lo que provoca un bucle circular.

state is updated -> useEffect is called -> state is updated ...

Leí muchas respuestas y artículos sobre eso, pero no pude encontrar una respuesta a mi pregunta específica.

Este es mi código inicial:

 let [state, setState] = React.useState<IDataSource[]>([]) React.useEffect(() => { let dataSource: IDataSource[] = [] dataFetched.forEach((item, index) => { // Some logic }) setState(state.concat(dataSource)) }, [dataFetched, state])

Luego decidí actualizar el estado usando una función llamada useEffect y pasando un argumento:

 let [state, setState] = React.useState<IDataSource[]>([]) const updateData = (arg: IDataSource[] => { setData(state.concat(arg)) } React.useEffect(() => { let dataSource: IDataSource[] = [] dataFetched.forEach((item, index) => { //Some logic }) updateData(dataSource) }, [dataFetched, updateData])

Esto funciona, pero como tengo updateData como una useEffect depency , tengo que envolver la función con useCallback :

 const updateData = React.useCallback((arg: IDataSource[]) => { setData(state.concat(arg)) }, [state]) React.useEffect(() => { let dataSource: IDataSource[] = [] dataFetched.forEach((item, index) => { //Some logic }) updateData(dataSource) }, [dataFetched, updateData])

Pero en este caso también tengo el state como una useCallback depency y vuelvo al problema inicial, un bucle circular.

Aparentemente, debería usar React.useRef cuando tengo una matriz como useEffect dependency , pero state no es solo una matriz, en realidad es un estado, que se configura con useState , por lo que no sé cómo hacer eso en este caso o incluso si esto es posible.

¿Hay alguna manera de resolver eso?