agosto 15, 2022

Compruebe el motivo por el que su página se vuelve a renderizar cambiando los componentes prop y state

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.

Deja un comentario