Sobes.tech
Назад к задачам
Junior — Senior
54

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

Получайте помощь с лайвкодингом в реальном времени с Sobes Copilot
Условие задачи

Необходимо реализовать 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>
)