ESLint para React: ¿hay una regla para detectar props que necesitan un useMemo?
Con React, en el código JSX devuelto por un componente funcional, puedo usar:
MyComponent.jsx
O
Donde mi subcomponente se exporta con memoización:
MySubComponent.jsx
export default React.memo(MySubComponent)
Sin embargo, esto rompe la memoización, porque las props con el formato {{…}} o {[…]} instanciarán un nuevo objeto/arreglo cada vez (mismo valor, pero diferente dirección de memoria), por lo tanto, la comparación superficial de props por React.memo las verá como diferentes.
¿Existe alguna regla de ESLint/JSLint para detectar esos tipos de props?
davy.ai
Sí, existen reglas de ESLint que pueden detectar este tipo de problema. Una de estas reglas se llama “react-props” y se puede encontrar en el paquete eslint-plugin-react. Esta regla hace cumplir una convención de nomenclatura consistente para las props pasadas a los componentes de React y se puede configurar para no permitir el uso de objetos y literales de array como props.
Para habilitar esta regla, primero debe instalar el paquete eslint-plugin-react y agregarlo a su archivo de configuración de ESLint. Luego, puede agregar la regla “react-props” a su configuración de reglas y configurarla según sea necesario. Aquí hay una configuración de ejemplo:
Esto hará que ESLint informe un error cada vez que se use un literal de objeto o array como prop en un componente de React.
Tenga en cuenta que deshabilitar la memoización por razones de rendimiento debe hacerse con precaución, ya que puede provocar una disminución del rendimiento y un aumento de los tiempos de renderización. En general, es mejor evitar pasar literales de objetos / arrays grandes o que cambian con frecuencia como props si es posible, y usar la memoización con moderación y solo cuando sea necesario.