0

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.

4
  • 1
    Por lo que yo entiendo, no los está usando, solo los crea. Luego faltaría el código donde los usa y eso si debería de estar dentro de los componentes de React
    – Suso
    el 18 abr. a las 8:04
  • claro, pero que pasa con las reglas de la documentacion de react? donde dice que no debes usar o crear hooks fuera de componentes react, ni tampoco en funciones anidadas. el 18 abr. a las 14:17
  • No es técnicamente incorrecto usar hooks fuera de los componentes de React. Los hooks son solo funciones de JavaScript y pueden ser llamados desde cualquier lugar donde se admita el código de JavaScript. No obstante, su uso fuera de los componentes de React puede llevar a problemas de mantenimiento y comprensión del códigoa futuro.
    – juancruz
    el 18 abr. a las 14:25
  • investigue al respecto y menciona que puede ocasionar memory leaks y mas bugs o comportamiento no esperado. el 18 abr. a las 23:26

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.