import React, { useEffect, useRef } from 'react';
 
function PropsLogger(props) {
  const prevProps = useRef(props);
 
  useEffect(() => {
    const changedProps = Object.entries(props).reduce((result, [key, value]) => {
      if (prevProps.current[key] !== value) {
        result[key] = value;
      }
      return result
    }, {});
    console.log('Props changed:', changedProps);
    prevProps.current = props;
  }, [props]);
 
  return null;
}
 
export default PropsLogger;
 
 
/* 
В этом компоненте мы используем хук useRef, чтобы сохранить предыдущие значения пропсов. Внутри эффекта мы сравниваем текущие пропсы с предыдущими, используя метод 
Object.entries для перебора объекта и метод reduce для создания нового объекта 
с измененными пропсами. Затем мы выводим этот новый объект в консоль и обновляем значение предыдущих пропсов с помощью prevProps.current = props. 
 
Этот компонент также не рендерит никакого контента на странице, поэтому мы возвращаем null.
*/

Назад