Роман Дворянов

useEffect(() => {
  // какой-то код
}); // без указания второго аргумента работает на каждый "чих"

useEffect(() => {
 // с пустым массивом зависимостей сработает аналогично componentDidMount, тут лучше фетчить
}, []);

useEffect(() => {
  console.log(props)
  // с зависимостями аналогично componentDidUpdate
}, [props])

useEffect(() => {
  // можно вернуть функцию, это будет аналогично componentWillUnmount
  return () => {
     // тут можно удалять всякие листнеры и слать события в стор, этот код сработает при размонтировании
  }
}, []);

// импортируем хук useMemo
import { useMemo } from "react";
// импортируем хук useLocation
import { useLocation } from "react-router-dom";

const ContenWrapper: FC<ElementsIds> = memo(({ ids }) => {
  // Добавляем хук перемещений
  const { pathname } = useLocation();

  // Если нужен например этот компонент, чтоб ререндерились изменения, оборачиваем в хук useMemo
  const DashboardContent = useMemo(
    () => (
      <>
        <TitleStyled id={ids.content.contentTitleId}>
          {messages.title.default}
        </TitleStyled>
        <DescriptionStyled id={ids.content.contentDesctiptionId}>
          {messages.description.default}
        </DescriptionStyled>
      </>
    ), 
    [pathname] // Зависимость, при изменении которой произойдет ререндер
  );

  const GameContent = () => <TitleStyled>{"блаблабла"}</TitleStyled>;

  return (
    <ContentWrapperStyled id={ids.content.contentWrapperId}>
      <ScrollWrapperStyled id={ids.content.contentScrollWrapperId}>
        <Route path="/" render={DashboardContent} />
        <Route path="/game" render={GameContent} />
      </ScrollWrapperStyled>
    </ContentWrapperStyled>
  );
});