He creado un ejemplo muy simple aquí ...

https://codesandbox.io/s/react-memo-with-function-props-09fgyo

Como puede ver, el ComponentB se procesa tantas veces como el ComponentB ... aunque está envuelto en un memo y no recibe un counter como accesorio.

Si abre la aplicación en su propia página ( https://09fgyo.csb.app/ ) y luego usa React DevTools para perfilar la página, verá que informa que la causa de la representación se debe a que la propiedad onClick cambia ( ver captura de pantalla)

Entonces... Sé que la razón por la que sucede es porque cada vez que se cambia el estado del HOC, se vuelve a representar y, al hacerlo, crea un nuevo handleButtonClick porque es una función de flecha. Así que React mira eso y dice, "oop... es una nueva función, ¡reprocesa el ComponentB !"

Mi pregunta es... ¿cuál es el mejor patrón para solucionar este tipo de problema de rendimiento?

Quiero decir ... Supongo que podría pasar setCounter a CompnentB , pero eso parece asqueroso ... acopla estrechamente el HOC y su estado a ComponentB . (Actualización: ahora que lo pienso, tampoco puedo hacer eso porque también tendría que pasar el counter hacia abajo para calcular el incremento, y dado que eso está cambiando, también causaría una repetición ... ugh).

Estoy seriamente perdido. ¿Alguien tiene alguna idea?