Rastree por qué un componente React se vuelve a representar

¿Existe un enfoque sistemático para depurar lo que está causando que un componente se vuelva a procesar en React? Puse un simple console.log () para ver cuántas veces se procesa, pero tengo problemas para descubrir qué está causando que el componente se procese varias veces, es decir (4 veces) en mi caso. ¿Existe una herramienta que muestre una línea de tiempo y / o todos los componentes del árbol y el orden?

Si desea un fragmento corto sin dependencias externas, me parece útil

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`)
    );
  }
}

Aquí hay un pequeño gancho que uso para rastrear actualizaciones a componentes de funciones

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>;
}

Aquí hay algunos casos en que un componente React se volverá a representar.

• Componente padre rerender
• Llamando this.setState()dentro del componente. Esto dará lugar a los siguientes métodos de ciclo de vida de componentes shouldComponentUpdate> componentWillUpdate> render>componentDidUpdate
• Cambios en los componentes props. Este disparador voluntad componentWillReceiveProps> shouldComponentUpdate> componentWillUpdate> render> componentDidUpdate( connectmétodo de react-reduxgatillo esto cuando hay cambios aplicables en la tienda Redux)
• llamando this.forceUpdateque es similar athis.setState

Puede minimizar la shouldComponentUpdatedevolución de su componente implementando un cheque dentro de su y devolviendo falsesi no es necesario.

Otra forma es usar React.PureComponent componentes sin estado. Los componentes puros y sin estado solo se vuelven a renderizar cuando hay cambios en sus accesorios.

La respuesta de @ jpdelatorre es excelente para destacar las razones generales por las que un componente React podría volver a renderizarse.

Solo quería profundizar un poco más en una instancia: cuando cambian los accesorios . La resolución de problemas que está causando que un componente React se vuelva a procesar es un problema común, y en mi experiencia, muchas veces rastrear este problema implica determinar qué accesorios están cambiando .

Los componentes de reacción se renderizan cada vez que reciben nuevos accesorios. Pueden recibir nuevos accesorios como:

<MyComponent prop1={currentPosition} prop2={myVariable} />

o si MyComponentestá conectado a una tienda redux:

function mapStateToProps (state) {
  return {
    prop3: state.data.get('savedName'),
    prop4: state.data.get('userCount')
  }
}

Cada vez que el valor de prop1, prop2, prop3, o prop4cambios MyComponentserá volver a hacer. Con 4 accesorios, no es demasiado difícil rastrear qué accesorios están cambiando colocando un console.log(this.props)al comienzo del renderbloque. Sin embargo, con componentes más complicados y más y más accesorios, este método es insostenible.

Aquí hay un enfoque útil (usando lodash por conveniencia) para determinar qué cambios de utilería están causando que un componente se vuelva a renderizar:

componentWillReceiveProps (nextProps) {
  const changedProps = _.reduce(this.props, function (result, value, key) {
    return _.isEqual(value, nextProps[key])
      ? result
      : result.concat(key)
  }, [])
  console.log('changedProps: ', changedProps)
}

Agregar este fragmento a su componente puede ayudar a revelar al culpable que causa reprocesamientos cuestionables, y muchas veces esto ayuda a arrojar luz sobre los datos innecesarios que se canalizan a los componentes.

Es extraño que nadie haya dado esa respuesta, pero me parece muy útil, especialmente porque los cambios de accesorios casi siempre están profundamente anidados.

Ganchos fanboys:

import deep_diff from "deep-diff";
const withPropsChecker = WrappedComponent => {
  return props => {
    const prevProps = useRef(props);
    useEffect(() => {
      const diff = deep_diff.diff(prevProps.current, props);
      if (diff) {
        console.log(diff);
      }
      prevProps.current = props;
    });
    return <WrappedComponent {...props} />;
  };
};

Fanboys de la "vieja escuela":

import deep_diff from "deep-diff";
componentDidUpdate(prevProps, prevState) {
      const diff = deep_diff.diff(prevProps, this.props);
      if (diff) {
        console.log(diff);
      }
}

PD: Todavía prefiero usar HOC (componente de orden superior) porque a veces has desestructurado tus accesorios en la parte superior y la solución de Jacob no encaja bien

Descargo de responsabilidad: ninguna afiliación con el propietario del paquete. Simplemente hacer clic decenas de veces para tratar de detectar la diferencia en objetos profundamente anidados es un dolor en el.

Ahora hay un gancho para esto disponible en npm:

https://www.npmjs.com/package/use-trace-update

(Divulgación, lo publiqué) Actualización: Desarrollado en base al código de Jacob Rask

El uso de ganchos y componentes funcionales, no solo el cambio de apoyo, puede causar una nueva recuperación. Lo que comencé a usar es un registro bastante manual. Me ayudé mucho Puede que también te resulte útil.

Pego esta parte en el archivo del componente:

const keys = {};
const checkDep = (map, key, ref, extra) => {
  if (keys[key] === undefined) {
    keys[key] = {key: key};
    return;
  }
  const stored = map.current.get(keys[key]);

  if (stored === undefined) {
    map.current.set(keys[key], ref);
  } else if (ref !== stored) {
    console.log(
      'Ref ' + keys[key].key + ' changed',
      extra ?? '',
      JSON.stringify({stored}).substring(0, 45),
      JSON.stringify({now: ref}).substring(0, 45),
    );
    map.current.set(keys[key], ref);
  }
};

Al comienzo del método mantengo una referencia de WeakMap:

const refs = useRef(new WeakMap());

Luego, después de cada llamada "sospechosa" (accesorios, ganchos), escribo:

const example = useExampleHook();
checkDep(refs, 'example ', example);

Las respuestas anteriores son muy útiles, en caso de que si alguien está buscando un método específico para detectar la causa de la devolución, encontré esta biblioteca redux-logger muy útil.

Lo que puede hacer es agregar la biblioteca y habilitar la diferencia entre estados (está en los documentos) como:

const logger = createLogger({
    diff: true,
});

Y agregue el middleware en la tienda.

Luego coloque un console.log()en la función de renderizado del componente que desea probar.

Luego, puede ejecutar su aplicación y buscar registros de la consola. Donde sea que haya un registro justo antes, le mostrará la diferencia entre el estado (nextProps and this.props)y podrá decidir si realmente se necesita renderizar allí

Será similar a la imagen de arriba junto con la tecla diff.