Tengo un componente reutilizable que toma un accesorio editable que se puede alternar desde el exterior. El problema es que cada vez que se activa ese conmutador, todo el componente se vuelve a renderizar, incluidas las llamadas a la API, que solo deben llamarse una vez. ¿Cómo puedo evitar volver a renderizar si cambia el objeto editable específico? ¿O cuál es la manera de resolver este problema?
Lo que me gustaría obtener es obtener la llamada API solo una vez en el componente, sin importar cuántas veces cambie la propiedad editable . ¿Cómo puedo conseguir esto?
Código a continuación:
export const EditableTableList: React.FC<EditableTableListProps> = React.memo(({ columns, editEnabled, keyName, getData, sendChangeToParent }) => { ... // THIS RERENDERS EVERYTIME EDITABLE CHANGES useEffect(() => { const getTableData = async () => { setLoadedData(false); setOriginalData(await getData()); setLoadedData(true); } getTableData(); }, [getData]); ... }getData() se volverá a procesar cada vez que lo haga el componente principal, puede enviarlo como una expresión de función useCallback para que conserve la misma identidad incluso si el componente principal se vuelve a procesar.
El efecto se ejecuta nuevamente solo porque su función getData está cambiando, tal vez no su contenido, pero definitivamente la instancia/referencia.
Tendrá que memorizarlo en su componente principal, por ejemplo, usando useCallback . Si proporciona el componente principal, podría darle un ejemplo.