Почему компонент в React постоянно перерендеривается?

Question

[Артем Рассадин]

Доброго времени суток!
Я учусь React-у, на данный момент изучаю получение данных с сервера и вывод на страницу. Мне необходимо при нажатии на картинку, получить информацию о другом пользователе сайта и перенаправить себя в его профиль. Я пользуюсь react, react-redux и redux.
Проблема в том, что когда я нажал на картинку, получил данные о человеке и перенаправился в его профиль, мой компонент профиля постоянно перерендеривается.

UserProfileContainer

import UserProfile from "./UserProfile";
import { connect } from "react-redux";
import { changeProfile } from "../../redux/redux-store";

const mapStateToProps = (state) => ({
    profile: state.users.profile,
})

const mapDispatchToProps = (dispatch) => ({
    customizeProfile: (profile) => {
        dispatch(changeProfile(profile))
    },
})

const UserProfileContainer = connect(mapStateToProps, mapDispatchToProps)(UserProfile)

export default UserProfileContainer;

UserProfile

// imports...

const UserProfile = (props) => {
    let computeLink = `https://social-network.samuraijs.com/api/1.0/profile/3`;

    console.log('rerender')

    axios.get(computeLink).then((response) => {
        props.customizeProfile(response.data)
    })

    return (
        <div className="main">
            {props.profile.userId}
            <ProfileInfo />
            <ProfileFormContainer />
            <Posts />
        </div>
    );
};

export default UserProfile;

Функция ChangeProfile ( используется в компоненте UserProfileContainer )

export const changeProfile = (profile) => ({
  type: "CHANGE_PROFILE",
  profile: profile,
})

Результат функции обрабатывается в redux

switch (action.type) {
     case "CHANGE_PROFILE":
          return {
                ...state,
                profile: action.profile,
          };
}

Я пытался решить проблему через useEffect, но у меня не получилось. Помогите пожалуйста.

Answer 1

[Aetae]

Чего тут непонятного? UserProfile у вас не memo, а значит обновляется всегда когда хоть что-то обновилось в родителе.

А дальше у вас цикл:
1. UserProfile рендерится.
2. При рендере запрашивает данные и кидает их в customizeProfile.
3. customizeProfile диспатчит обновление profile в redux.
4. Состояние profile в redux поменялось - вызывается обновление связанного с ним UserProfileContainer.
5. goto п.1.

Вообще ни в коем случае нельзя в рендере выполнять никаких запросов, кан нельзя и ничего диспатчить.

Comments

[Артем Рассадин]

Это я понимаю. Я не понимаю как решить эту проблему. Что мне нужно передать вторым параметром в useMemo?

[Aetae]

Артем Рассадин, то что будет меняться когда нужно и не будет когда не нужно. Если никогда не нужно - пустой массив.