Encontré un código en el cual está usando ganchos fuera de los componentes de reacción, al final adjunto el código, mi pregunta es, ¿es correcto? porque entiendo que el uso de ganchos necesariamente debe ser dentro de los componentes, ya que los ganchos están relacionados con el ciclo de vida del componente.
/* eslint-disable react-hooks/rules-of-hooks */
import { useCallback } from 'react';
import { PAYMENTS } from 'src/constants/EventTypes'
import { createRequestFunction } from 'src/api/api-service';
const { add,filter,get_invoices } = PAYMENTS;
export const paymentsApiHooksConfig = {
addPayments: {
hook: () => useCallback((data) => createRequestFunction(add)(data, {}), [])
},
filterPayments: {
hook: () => useCallback((data) => createRequestFunction(filter)(data, {}), [])
},
getClient: {
hook: () => useCallback((data) => createRequestFunction(get_invoices)(data, {}), [])
},
};
/* eslint-disable react-hooks/rules-of-hooks */
import { useCallback } from 'react';
import { useListOrSearchCatalogsAPI } from 'src/hooks/catalogs/catalogs-api';
import { createCatalogProxy } from 'src/utils/update-catalogs-rows';
import { PAYMENTS } from 'src/constants/EventTypes';
import { createRequestFunction } from 'src/api/api-service';
import { creditNotesHooks } from '../creditNotes/endpoints'
import { catalogHooksConfig } from '../catalogs/catalogHooks';
import { paymentsApiHooksConfig } from '../Payments/payments-api';
const API_CONFIG = {
getAllClients: {
hook: () => useCallback(() => createRequestFunction(PAYMENTS.customers)(null, {}), [])
},
fetchCatalogs: {
hook: (type, setData, contextEnabled = true, context = null) => useCallback(async () => {
const catalogContext = contextEnabled && context ? context : { currentCatalog: null, setRows: null };
const listCatalogsAPI = useListOrSearchCatalogsAPI();
const effectiveType = type || catalogContext.currentCatalog;
if (effectiveType) {
try {
const { response } = await listCatalogsAPI(effectiveType);
const updatedRows = createCatalogProxy(response).updateRows();
if (setData) {
setData(updatedRows);
} else if (catalogContext.setRows) {
catalogContext.setRows(updatedRows);
}
} catch (error) {
console.error("Failed to fetch catalogs:", error);
}
}
}, [type, setData, contextEnabled, context]),
},
...catalogHooksConfig,
...creditNotesHooks,
...paymentsApiHooksConfig
};
export const useAPI = (type, ...params) => {
const config = API_CONFIG[type];
if (!config) {
throw new Error(`API type "${type}" is not supported.`);
}
return config.hook(...params);
};
y así es como lo estás usando dentro de un componente de reacción
const add = useAPI('useAddPayments');
Me gustaría saber dependiendo de su experiencia si tienes razón o yo me equivoco, si me equivoco aprendí algo nuevo.