Задать вопрос
@BMaks_N1

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

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

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

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

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

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, но видимо проблема в другом.
  • Вопрос задан
  • 130 просмотров
Подписаться 1 Простой 3 комментария
Решения вопроса 1
@BMaks_N1 Автор вопроса
Окей

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

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

import {shallowEqual} from "react-redux";
...
const user: User = useSelector((state: State) => state.user, shallowEqual);
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы