Estoy optimizando mi proyecto React según los resultados de Sonarcloud. Está en bastante buen estado, sin embargo, obtengo una alta puntuación de duplicación (20,5 %). Cuando lo examino, veo que efectivamente hay bloques de código recurrentes en diferentes archivos. El problema es que estos bloques se utilizan para establecer estados localmente después de llamadas API exitosas. Aquí hay un par de ejemplos:

1. Categoría predeterminada.tsx:

 const handleUpdate = () => { let copyCategories = JSON.parse(JSON.stringify(categories)); copyCategories.map((c) => Object.assign({}, c, { url: encodeURIComponent(c.url) }) ); setDisabledButton(true); apiCall(path, copyCategories) .execute() .then((_r) => { setDisabledButton(false); setSuccess(true); }) .catch((_e) => { handleError(); }); };

2. Categoría detallada.tsx:

 const handleUpdate = () => { let copyCategories = JSON.parse(JSON.stringify(categories)); copyCategories.map((c) => Object.assign({}, c, { url: encodeURIComponent(c.url) }) ); setDisabledButton(true); apiCall(path, copyCategories) .execute() .then((_r) => { setDisabledButton(false); setSuccess(true); }) .catch((_e) => { handleError(); }); };

No estoy seguro de cómo reducir estos bloques a un solo gancho o una función, ya que configuré estados en ellos. No quiero mover los componentes a un solo componente, ya que cada uno tiene comportamientos diferentes y se volvería muy complicado e imposible de mantener.

He considerado:

1. Escribiendo un enlace personalizado donde paso los métodos setState como parámetros. Parece terriblemente ineficiente.

2. Cambiar los nombres de estados y funciones duplicados. Esto probablemente afectaría la puntuación de Sonarcloud, pero ¿existe una mejor práctica real para esta situación?