Создание пользовательского хука для определения первого рендера

Условие

Необходимо реализовать React‑хук useFirstRender, который будет возвращать true только при самом первом рендере компонента и false на всех последующих. Хук может быть использован в любой функции‑компоненте для условного отображения контента только после первого рендера.

Пример использования:

 const useFirstRender = () => { }
 
function RenderAfterFirstRender(props) {
    const isFirstRender = useFirstRender();

    if (isFirstRender) {
    return "Haviero";
    }

    return props.children;
}

export default () => {
    const [counter, setCounter] = useState(1);

    const incrementCounter = () => {
    setCounter(counter + 1);
};

return <div>
    <section>
    <h2>Hook</h2>

    <p>Peanw3O8aTb xyrx useFirstRender</p>

    <RenderAfterFirstRender>Pengep m{counter}</RenderAfterFirstRender>

    <div>
    <button onClick={incrementCounter}>next render</button>
    </div>
    </section>
</div>
)

Ответ

Для показа контента после первого commit используйте state, который эффект переключает с true на false. Это безопаснее счётчика вызовов функции рендера, поскольку React может повторять или отменять рендеры.

function useFirstRender() {
  const [first, setFirst] = useState(true);
  useEffect(() => { setFirst(false); }, []);
  return first;
}

Нужны импорты useState/useEffect. Такой хук сам инициирует следующий рендер после монтирования: сначала будет Haviero, затем children, даже без нажатия кнопки. Это семантика «до/после первого commit», а не гарантированно один вызов render-функции с true. Запись ref.current прямо во время рендера ради подсчёта попыток ненадёжна при прерванных рендерах и Strict Mode.