Что заставляет или может заставлять перерисовываться компонент?

Question

[Дима Паутов]

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

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

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

function AZoneContainer({id: zoneId, number: numberId}: TProps) {
    const dispatch = useDispatch();
    const {canClickZone, zoneProps} = useZoneContainer({zoneId});
    const useZoneClickCommand = useZoneClickCommandFactory();
    const onZoneClick = useZoneClickCommand({zoneId});

    const handleClickZone = React.useCallback(() => {
        if (canClickZone) {
            onZoneClick();
        }
    }, [canClickZone, onZoneClick]);
    
    const ZoneComponent = useAZoneFactory({zoneId});
    const ZonePreviewComponent = useZonePreviewFactory();

    const injectedProps = {
        ...zoneProps,
        onDoubleClick: handleClickZone,
    };

    const ToRender = ZoneComponent || ZonePreviewComponent;
    const {threatResult} = Boolean(zone && state) && selectZoneBet(state, zone.id);
    const isMobileSize = window.innerWidth <= 900;

    const stageTutorial = localStorage.getItem('stageTutorial');
    const stage = useSelector(selectActiveStage);
    const zone = useSelector(selectActiveZone);
    const zoneList = useSelector(selectZoneList);
    const presBlocks = useSelector(selectPresentationBlocks);
    const state = useSelector((state) => state);

    const isGameReport = stage && stage === STAGE_LIST.GAME_REPORT;
    const isThreatOpened = stage && stage === STAGE_LIST.THREAT_OPENED;
    const isShowingZone = stage && stage === STAGE_LIST.SHOWING_ZONE;
    
    console.log('render')

    let renderBG = () => {
        if (isShowingZone) {
            if (zone && zone.isThreat) {
                return <div className="a-zone-container__threat-bg" />;
            }
            if (zone && !zone.isThreat) {
                return <div className="a-zone-container__safe-bg" />;
            }
        }
        return <div className="a-zone-container__tutorial-bg" />;
    };

    const handleLearnMoreButton = () => {
        dispatch(showModal(LEARN_MORE_MODAL));
    };

    async function returnToAllMap() {
        if ('2' === localStorage.getItem('stageTutorial')) {
            await dispatch(startTimer());
            localStorage.setItem('stageTutorial', 'skip');
        }

        if (isShowingZone) {
            dispatch(goNextStage());
        } else {
            dispatch(actionReturnToBase());

            if (isMobileSize) {
                dispatch(setActiveZone(zoneList[0].id));
            } else {
                dispatch(setActiveZone(null));
            }
        }
    }

    const activePresBlock = presBlocks && zone && presBlocks[zone.ppSlideId];

    const slides = activePresBlock
        ? activePresBlock.slideList.map((slide) => {
              return slide.image;
          })
        : [];

    if (isShowingZone && zone && slides && threatResult) {
        if (0 > threatResult && zone.effectList.negative.imageRetina) {
            slides.unshift(zone.effectList.negative.imageRetina);
        }
        if (0 <= threatResult && zone.effectList.positive.imageRetina) {
            slides.unshift(zone.effectList.positive.imageRetina);
        }
    }

    return (
     ...
    )
}

Удалял весь html в return, но не помогло, в консоль всё равно выводится render.
Помогите понять, что в коде компонента исходя из кода выше, может вызывать обновление этого компонента?
Таймер к этому компоненту напрямую вообще никак не обращается и вроде как никаких данных ему не шлёт.

Надеюсь хоть как-то ясно описал, буду очень рад любой помощи

Answer 1

[Alexandroppolus]

Надо найти таймер. Он может быть либо в одном из хуков, которые вызываются в первых строках компонента. Так же он может находиться хрен знает где, и менять редуксовый стейт (неважно что именно, компонент будет перерисовываться на любое изменение в редуксе, потому что есть строка useSelector((state) => state);)
В функции returnToAllMap есть некий startTimer, но не видно где вызывается returnToAllMap

Comments

[Дима Паутов]

Timer это отдельный компонент, который лежит в отдельном npm пакете.

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

А можно получить доступ к state так сказать единоразово и не подписываться на его изменение?

[Alexandroppolus]

state получить можно. Точнее, редуксовый store, а из него уже взять getState(), когда понадобится
https://react-redux.js.org/api/hooks#usestore

Но даже если убрать useSelector((state) => state), всё равно могут быть перерисовки по таймеру, если этот таймер меняет ту часть стейта, которая селектится четырьмя useSelector выше

[Дима Паутов]

Alexandroppolus, Да, вы были правы. Покапавшись глубже, я выяснил, что таймер, хоть и будучи отдельным пакетом, присасывался к redux стору и добавлял туда значение(что странно, но т.к. это часть приложения, просто в отдельном пакете, то не мудрено) сколько осталось в секундах.

Заменив useSelector на getState у меня получилось решить задачу. Большое вам спасибо, вы меня очень выручили)))

[Alexandroppolus]

таймер, хоть и будучи отдельным пакетом, присасывался к redux стору и добавлял туда значение (что странно, но т.к. это часть приложения, просто в отдельном пакете, то не мудрено)

не мудрено, потому что редукс провоцирует неокрепшие умы к такому стилю кодинга.

DI? слабое зацепление? модульность? нет, не слышали...