Как объявить общую переменную в React и использовать ее для рендера отдельных компонент?

Question

[McHack]

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

Имея такую структуру:

// MenuItem - отдельный дочерний компонент для каждого пункта меню
// showChild - переменная в которой хранится ID главного пункта, где должны отобразиться дочерние элементы

сonst [showChild, setShowChild] = useState(null)

const toggleMenu = (id, with_child, fl, e) => {
		if(with_child !== '' && fl) {
			if (showChild !== id)
				setShowChild(id)
			else {
				Fade.Out('.j_h_menu_child_sub[id="' + id + '"]', 200, function () {
					setShowChild(null)
				})
			}

			e.preventDefault()
		}
		else
			return true
	}

return (
		<div className="i_h_menu_react">
			{items.map((item) =>
				<MenuItem item={item} key={item.ID} showChild={showChild} setShowChild={toggleMenu} ww_mob={ww_mob}/>
			)}
		</div>
	)

P.S. Я специально выложил только часть кода, дабы упростить понимание процесса.

Через дочерний компонент я вызываю функцию, которая меняет showChild, подставляя туда другой ID. Такой подход мне необходим для того, чтобы дочерние элементы отображались только в кликнутом пункте, а в остальных были скрыты. При переклике на другой пункт, старые дочерки скрывались и появлялись в другом пункте.

Однако обновляя showChild React по новой рендерит абсолютно все компоненты. Грубо говоря запускает цикл в шаблоне по новой. Соответственно происходит Mount всех компонент по новой.

Как мне объявить переменную, которая хранилась бы в главной компоненте и не запускала перерендер при ее изменении. Но такую, чтобы я смог отследить ее изменение в дочерних компонентах и соответственно запустить перерендер только в нужной мне компоненте.

Answer 1

[Дмитрий]

Объявляете обычную переменную типа объект и просовываете ее в дочерние через свойства или через useContext. В любое из ее свойств пишете нужное вам значение, это не запустит обновления. И добавляете таймаут, который отслеживает изменение.

Это конечно если не использовать redux

Но вообще непонятно в чем проблема перерендеринга всех детей? У вас их так много, что приложение тормозит или что?

Comments

[McHack]

В каждом дочернем компоненте есть вычисляемая функция в которой задействован цикл. При каждом клике все 10 компонентов демонтируются и потом она отрабатывает по новой. Изначально все работает быстро, но такое положение дел быстро забивает оперативку и страница начинает тормозить.

[Дмитрий]

McHack, Используйте мемоизацию useMemo, если дело в орможении

[McHack]

Дмитрий, она не подходит, потому что компонент каждый раз демонтируется. useMemo работает только на протяжении жизненного цикла компонента.

[Дмитрий]

McHack, Почему не использовать useMemo для дорогостоящей вычисляемой функции в дочернем компоненте?