import { useState, useRef, useEffect } from "react";

Условие

import { useState, useRef, useEffect } from "react";

const useDebugRender = ({props}) => { const prevProp = useRef(props)

useEffect(() => {

}, []) }

const ParentComponent = () => { const [random, setRandom] = useState(0); // Передаем в дочерний компонент в виде Пропса const [text, setText] = useState(""); // Передаем в дочерний компонент в виде Пропса

const createRandom = () => setRandom(Math.floor(Math.random() * 100)); const onTextChange = (e) => setText(e.target.value);

const [count, setCount] = useState(0); const incrementCount = () => setCount((prev) => prev + 1); // эта функция передается в виде пропса в дочерний компонент return ( <> <Count: {count} /> <input type="text" onChange={onTextChange} /> <button onClick={createRandom}>Generate Random <ChildComponent random={random} text={text} incrementCount={incrementCount} /> </> ); };

export default ParentComponent;

Ответ

В JSX есть синтаксическая ошибка у Count, а useDebugRender пока ничего не делает и нигде не вызван. Для сравнения props нужны предыдущий снимок и эффект после каждого commit.

Исправьте разметку на <div>Count: {count}</div> и подключите hook в существующем ChildComponent. Пример поверхностной диагностики:

const useDebugRender = ({ props }) => {
  const previous = useRef(props);
  useEffect(() => {
    const before = previous.current;
    const keys = new Set([...Object.keys(before), ...Object.keys(props)]);
    for (const key of keys) {
      if (!Object.is(before[key], props[key]) ||
          Object.hasOwn(before, key) !== Object.hasOwn(props, key)) {
        console.log(key, { before: before[key], after: props[key] });
      }
    }
    previous.current = props;
  });
};

incrementCount создаётся заново при каждом render; стабильность через useCallback полезна при соответствующей мемоизации ребёнка. Hook сравнивает props, а не объясняет все причины render, и предполагает отсутствие мутаций прежнего объекта.