What causes or can cause a component to rerender?

Question

React

Good evening. I have such an attack, I don’t know react well, you can say I don’t know it at all. But by the will of fate, the task came to me, to make a couple of edits in the react application.

I made edits in the required component, but it turned out that the parent component is being redrawn, because The logic of the game is tied to a timer.

I studied the code base very thoroughly, but I could not understand why. console.logI went a simple way, began to display labels in the hierarchy of components in order to accurately find the component that is being redrawn in order to start studying it. Only the parent component is redrawn, as described above.

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 (
     ...
    )
}

I deleted all the html in return, but it didn’t help, render is still displayed in the console.
Help me understand what in the code of the component, based on the code above, can cause the update of this component?
The timer does not directly access this component at all and does not seem to send any data to it.

I hope I explained it in some way, any help would be greatly appreciated.

Answer 1

We need to find a timer. It can either be in one of the hooks that are called on the first lines of the component. It can also be the hell knows where, and change the redux state (it doesn’t matter what exactly, the component will redraw on any change in the redux, because there is a useSelector((state) => state);)
line There is a startTimer in the returnToAllMap function, but it is not visible where returnToAllMap is called