Я использовал функциональные компоненты, когда заметил страшную вещь - постоянные рендеры у компонента!
Так у меня была задумка, что по нажатию на кнопку у меня должен появиться определённый список. Он изначально не создан и создаётся один раз при вызове. Далее функция получения списка не нужна, так как список будет хранится в памяти. Для этого я пробовал использовать хуки useEffect и useMemo, но функция ( пока что console.log()) отрабатывает при каждом внешнем рендоре. Как бы исправить это?
Код родительского компонента:
import React, {memo, FC, useState} from 'react';
// @ts-ignore
import classes from "./../../styles/MainPart.module.css"
import TitleInMainPart from "./MainPart/TitleInMainPart";
import {AllFriends} from "./MainPart/FC/AllFriends";
const MainPart: FC = memo(() => {
const [NeedleList, SetNeedleList] = useState("");
return (
<div id="MainPart" className={classes.MainPart}>
<TitleInMainPart SetNeedleList={SetNeedleList}/>
{NeedleList === "AllFriends"
?
<AllFriends/>
:
NeedleList === "OnlineFriends"
?
<>Онлайн</>
:
NeedleList === "Other"
?
<>Прочее</>
:
<>Общие</>
}
</div>
);
});
export default MainPart;
Код < AllFriends/> :
import React, {FC, memo, useEffect, useMemo, useState} from 'react';
import {useDispatch} from "react-redux";
import {useTypesSelector} from "../../../hooks/useTypesSelector";
export const AllFriends: FC = memo(() => {
const Dispatch = useDispatch(),
// @ts-ignore
page = useTypesSelector(state => state.page.ThisPageState1),
[AllFriendsList, SetAllFriendsList] = useState([]);
useMemo( () => {
console.log("Отрабатало!")
}, [AllFriendsList])
return (
<div className="AllFriends">
</div>
);
});
P.S. список должен создаться в < AllFriends/>
