Sobes.tech
Back to tasks
Junior — Senior
53

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

Get help with live coding in real time with Sobes Copilot
Task condition

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