Tengo el siguiente código, donde extrae todos los datos del servidor como API

 export const apiExpenses = () => { //Get All Expenses, Realtime const { data: tableDataExpenses, error, mutate } = useSWR('/api/expenses/datatable', () => axios .get('/api/expenses/datatable') .then(res => res.data), ) return { tableDataExpenses, } }

Y usando la salida de esa API en otro componente con useEffect

 const { tableDataExpenses } = apiExpenses(); const [expenses, setExpenses] = useState([]); useEffect(() => { setExpenses(tableDataExpenses.data); return () => { setExpenses([]); }; }, [tableDataExpenses]);

Pero estoy terminando en los siguientes errores,

 Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Y debido a esto, no puedo obtener el valor de tableDataExpenses

Si setExpenses de useEffect no hay errores y nuevamente si escribo setExpenses carga datos.

Pero nuevamente en el siguiente render, falla con un error.

Entonces, ¿cómo puedo evitar este error con la función de limpieza?