Реализация пользовательского хука useFirstRender

Условие

Необходимо написать кастомный хук useFirstRender, который будет срабатывать сразу после первой отрисовки компонента.

 import RenderAfterFirstRender from "./book";

export default function App() {
    return (
    <div className="App">
    <p>реализовать хук userfirstRender</p>
    <RenderAfterFirstRender>
       контент после первого рендера
    </RenderAfterFirstRender>
    </div>
);
}

Ответ

Для показанного компонента нужен флаг готовности после первого commit: сначала false, затем true из useEffect. По нему можно отложить отображение children до следующего рендера.

import { useEffect, useState } from 'react';
function useFirstRender() {
  const [ready, setReady] = useState(false);
  useEffect(() => { setReady(true); }, []);
  return ready;
}
export default function RenderAfterFirstRender({ children }) {
  return useFirstRender() ? children : null;
}

Здесь контракт хука — «первый commit уже прошёл», а не «сейчас первый вызов функции». Эффект не гарантирует физическую отрисовку пикселей до выполнения. В Strict Mode разработка может повторно проверять эффекты; установка true идемпотентна. Сетевые или необратимые действия в таком хуке требуют отдельной защиты.