Supongamos que tenemos un HOC withWidth y un gancho useWidth que inyecta el ancho de la ventana actual como accesorio en un componente.

withWidth :

 const MyFunctionComponent = withWidth(({width}) => { return width === 'mobile' ? // render mobile version : // render desktop version });

useWidth :

 const MyFunctionComponent = () => { const width = useWidth(); return width === 'mobile' ? // render mobile version : // render desktop version };

¿Cuáles son los pros y los contras de ambos patrones? ¿Cuándo debo preferir uno sobre el otro?

¿La solución withWidth HOC no es mejor desde la perspectiva del principio de inversión de dependencia? Es más fácil burlarse de la dependencia del width y escribir pruebas, y el componente en sí no tiene que manejar la creación del width .

Y si es así, ¿por qué priorizamos el uso de ganchos? Al menos a menudo veo este enfoque, priorizando el uso de ganchos en lugar de HOC cuando sea posible.

Todavía estoy aprendiendo sobre conceptos de inversión de dependencia y esas cosas. Estos conceptos a menudo se ejemplifican usando Java, por lo que la transposición a JS y React world es bastante difícil para mí.