React Custom Hook: useEffectOnce

In this article series, we embark on a journey through the realm of custom React hooks, discovering their immense potential for elevating your development projects. Our focus today is on the "useEffectOnce" hook, one of the many carefully crafted hooks available in the collection of React custom hooks.

Github: https://github.com/sergeyleschev/react-custom-hooks

import { useEffect } from "react"

export default function useEffectOnce(cb) {
    useEffect(cb, [])
}

The useEffectOnce hook is designed to streamline the process of running effects only once when a component mounts. With just a few lines of code, you can eliminate the need to manually specify an empty dependency array ([]). Here's how it works:

By encapsulating the repetitive useEffect pattern, useEffectOnce allows you to focus on the logic within the effect function itself. This elegant solution saves you from writing boilerplate code repeatedly and helps keep your component files clean and concise.

To showcase the power of useEffectOnce, let's consider a practical example:

import { useState } from "react"
import useEffectOnce from "./useEffectOnce"

export default function EffectOnceComponent() {
    const [count, setCount] = useState(0)
    useEffectOnce(() => alert("Hi"))
    return (
        <>
            <div>{count}</div>
            <button onClick={() => setCount(c => c + 1)}>Increment</button>
        </>
    )
}

In this case, when EffectOnceComponent mounts, the useEffectOnce hook triggers the alert "Hi" exactly once. It frees you from manually managing the effect dependencies and ensures your effect runs efficiently.

This custom hook is incredibly versatile and can be utilized in various scenarios. Whether you need to fetch initial data, set up event listeners, or initialize third-party libraries, useEffectOnce simplifies the process and promotes cleaner code organization.

#webdevelopment #webdev #javascript #typescript #frontend #react #reactjs #reactnative

Начать дискуссию

Альфа-банк ответит за убытки клиента

Верховный суд рассмотрел спор о взыскании убытков с банка за неисполнение поручения клиента.

2222

Правительство разрешило добывать криптовалюту в регионах, где введён запрет на майнинг — но генерировать электричество надо самим

Майнинг запрещён в 13 регионах России.

1515

Владимир Комаровский

2ч

Обзор крупнейших криптобирж 2025 года с поддержкой для пользователей из России

2025-й окончательно поставил точку в споре — крипта в России уже не маргинальная тема, а инструмент, которым активно пользуются и инвесторы, и фрилансеры, и крупные бизнесы. Только вот с одним вопросом всё ещё приходится разбираться вручную: где торговать безопасно, выгодно и без головной боли?

Батюшка Бизнесменский

Личный опыт

04:57

Честно о бизнесе: Что я понял, владея сетью вендинговых аппаратов с кофе. Прибыль — это хорошо, но где рентабельность?

Реальный опыт предпринимателя, который не один год занимается вендинговым бизнесом. Вся правда из первых уст.

1919

neuroAnn

07:27

130 лет мы писали сценарии, снимали людей и монтировали, пока не пришла нейросеть

Первый кадр фильма показывает человека с плакатом, протестующего против пришельцев. Этот репортаж прямо с улицы, мы прямо на пикете.

1010

Алексей Силуанов

Инвестиции

1ч

Российские и европейские компании в частном порядке обмениваются активами: санкции санкциями, а бизнес есть бизнес

Пока политики грозят друг другу пальцем и вводят все новые пакеты санкций, компании по обе стороны баррикад нашли остроумный способ обойти ограничения и разморозить хотя бы часть своих активов. Да, речь идет о бартере, но не о банальной "нефти в обмен на матрешки", а о более изощренных схемах.

Как маркетинговые агентства зарабатывают на вас – и как не стать их жертвой?

Китайская Baidu оказалась в центре скандала — 13-летняя дочь топ-менеджера «сливала» данные пользователей, которые критиковали корейскую поп-звезду

Компанию заподозрили в нарушении конфиденциальности данных.

2626

Дочь совсем уже *@%*&. Думает что она типо крутая может что-то. Не понравилось ей что-то. Да пошла ты *****

Никита Ерофеев // AI менеджеры

вчера

Пошаговый гайд по созданию лендинга с помощью AI

________________
Время создания сайта: 40 минут
Стоимость: 1000 руб
________________

▪— Планирование и структура
▪— Генерация сайта в Durable
▪— Наполнение контентом
▪— Кастомизация
▪— Публикация сайта

Пошаговый гайд по созданию лендинга с помощью AI

4141

1313

Создаёте контент, но не зарабатываете? Вся правда о монетизации в Telegram!

Зарабатывать на небольших Telegram-каналах сложно. Почти 80% владельцев каналов зарабатывают на них менее 60 тыс. руб. в месяц. Telegram как платформа быстро растет, но привлечь аудиторию сложно. Что делать?