Как предотвратить ререндеринг React.FC при изменении стейта с хуками?

Question

[BMaks_N1]

Есть Компонента - функциональная компонента.
Есть Хранилище.

Работаю с хранилищем через Хуки.

Как предотвратить Ререндеринг страницы при неизменном состоянии?

К примеру код:

import React, {memo, useEffect} from "react";
import {useDispatch, useSelector} from "react-redux";
import {State} from "../../store/reducers/reducer";
import {setUserData} from "../../store/actions/user.actions";
import {createSelector} from "reselect";
import {UserState} from "../../store/reducers/user.reducer";
import {User} from "../../utils/types/user-types";

const selectUser = createSelector(
    (state:State) => state.user,
    (user:UserState) => {
        return user;
    }
)

const homePageFC : React.FC = () => {
    const user:User = useSelector(selectUser);
    const dispatch = useDispatch();

    useEffect(() => {
        console.log(user);

        dispatch(setUserData({id:2}));
    })

    return (
        <>
            HOMEPAGE
        </>
    )
}

const HomePage = memo(homePageFC);

export default HomePage;

Как избежать зацикливания?
А именно как избежать рендера при отсутствии изменения стейта? (как с memo)
P.S. втащил reselect, но видимо проблема в другом.

Comments

[Kirill Makarov]

А почему у useEffect вторым аргументом не передаешь ничего?

[BMaks_N1]

Kirill Makarov, искусственный тест, чтоб специально, при каждом рендере срабатывало

проблема именно в перерисовке, когда стейт по факту не изменился

[BMaks_N1]

Kirill Makarov, к примеру если без хранилища сделать что-то типо

import React, {memo, useEffect, useState} from "react";
import {useDispatch, useSelector} from "react-redux";
import {State} from "../../store/reducers/reducer";
import {setUserData} from "../../store/actions/user.actions";
import {createSelector} from "reselect";
import {UserState} from "../../store/reducers/user.reducer";
import {User} from "../../utils/types/user-types";

const selectUser = createSelector(
    (state:State) => state.user,
    (user:UserState) => {
        return user;
    }
)

const homePageFC : React.FC = () => {
    const user:User = useSelector(selectUser);
    const dispatch = useDispatch();

    const [count,setCount] = useState(0)

    useEffect(() => {
        console.log(count);

        //dispatch(setUserData({id:2}));
    })

    return (
        <>
            HOMEPAGE
            <button onClick={()=>setCount(1)}>Click Me</button>
            <button onClick={()=>setCount(0)}>Click Me</button>
        </>
    )
}

const HomePage = memo(homePageFC);

export default HomePage;

за счет memo никаких лишних выводов в консоль нет если 10 раз кликнуть на одну кнопку

а как решать проблему с redux?

Answer 1

[BMaks_N1]

Окей

Лажа где-то в сравнении

Нужно добавить в хук useSelector - shallowEqual и все будет хорошо

import {shallowEqual} from "react-redux";
...
const user: User = useSelector((state: State) => state.user, shallowEqual);