Back to tasksGet help with live coding in real time with Sobes Copilot
Junior — Senior
53
Создание пользовательского хука для определения первого рендера
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>
)