Evitar que su página se vuelva a renderizar innecesariamente es algo muy importante para optimizar el rendimiento de su aplicación.
A menudo me preocupo de observar console.log y determino qué estado y propiedades cambiaron innecesariamente. Después de eso, me encargo de ese problema.
Hay dos puntos de enfoque: console.log y el componentDidUpdate. Se trata de averigüar la razón por la que nuestro componente se vuelve a renderizar (específicamente se trata de buscar esos estados y propiedades cambiadas). Esta publicación será un ejemplo de ambos estilos: Class y Hook.
Con Class
Aplicaré este código de bloque a componentDidUpdate:
componentDidUpdate(prevProps, prevState) {
Object.entries(this.props).forEach(([key, val]) =>
prevProps[key] !== val && console.log(`Prop '${key}' changed `)
);
if (this.state) {
Object.entries(this.state).forEach(([key, val]) =>
prevState[key] !== val && console.log(`State '${key}' changed `)
);
}
}
Con Hook
Aplicamos la función useTraceUpdate a nuestra función principal que neceitamos rastrear:
function useTraceUpdate(props) {
const prev = useRef(props);
useEffect(() => {
const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
if (prev.current[k] !== v) {
ps[k] = [prev.current[k], v];
}
return ps;
}, {});
if (Object.keys(changedProps).length > 0) {
console.log('Changed props:', changedProps);
}
prev.current = props;
});
}
// Usage
function MyComponent(props) {
useTraceUpdate(props);
return <div>{props.children}</div>;
}
Conclusion
Esa es una forma que puede ayudarnos a rastrear la razón por la cual nuestro componente se vuelve a renderizar innecesariamente. Después de buscar el motivo, podemos solucionarlo y mejorar el rendimiento de la aplicación.