React.memo() is a Higher Order Component function that returns a child component, the problem of this is that it renders all the time if the father does, so to avoid this useMemo compare the old and new props of the child component to re-render or in case both are equal it will return the resulted component. As a second argument, you can assign a custom function to compare the props you are interested in.
It is recommended to use it when the props change frequently, these are the same variables and their render can slow the App.
link used —> learn more anout React.memo()
functionMyComponent(props) {
/* render using props */
}
functionareEqual(prevProps, nextProps) {
/*
return true if passing nextProps to render would return
the same result as passing prevProps to render,
otherwise, return false
*/
}
exportdefault React.memo(MyComponent, areEqual);
[ES]
React.memo () es una función de componente de orden superior que devuelve un componente hijo, el problema de esto es que se renderiza todo el tiempo si el padre lo hace, por lo que para evitar esto useMemo comparea los props antiguos y nuevos del componente hijo para volver a renderizar o en caso de que ambos sean iguales devolverá el componente resultante. Como segundo argumento, puedes asignar una función personalizada para comparar los accesorios que te interesen.
Se recomienda usarlo cuando los props cambian con frecuencia, las variables son las mismas y su renderizado puede ralentizar la aplicación.
enlace utilizado -> aprenda más sobre React.memo ()
functionMyComponent(props){
/ * renderizar usando accesorios * /
}
functionareEqual(prevProps, nextProps){
/ *
devuelve verdadero si pasar nextProps para renderizar devolvería
el mismo resultado que pasar prevProps para renderizar,
de lo contrario devuelve falso
* /
}
exportar React.memo predeterminado (MyComponent, areEqual);
