Как отменить перерисовку функциональных компонентов?

Question

[Артур Кудашев]

Здравствуйте, у меня есть глобальное хранилище наподобие Redux. C помощью контекста я раздаю состояние на все приложение:

<StoreProvider>
    <Router>
        <Fragment>
	        <Header />
	        <Main>
	            <Literature />
	        </Main>
        </Fragment>
    </Router>
</StoreProvider>

В компоненту Literature есть input который меняет это состояние. Из-за этого все приложение начинает перерисовываться. Как мне отменить перерисовку если компонент не зависит от состояния. Пытался использовать React.memo, но он сравнивает пропсы. Например, компонент Header не принимает вообще пропсы.

Comments

[Павел Диденко]

Попробуй компоненту Header задать пропсы типа ({ props = 1}) и так же в React.memo оберни. Ну или переделать в компонент класс и задать

shouldComponentUpdate() {
    return false;
}

[Артур Кудашев]

Павел Диденко, memo не помог. Мне нужен именно функциональный компонент, поэтому я не могу его переделать в класс)

[Павел Диденко]

Артур Кудашев, так а пропсы по умолчанию пробовал?

[Артур Кудашев]

Павел Диденко, да.

[Павел Диденко]

Артур Кудашев, попробуй как тут написано https://ru.reactjs.org/docs/react-api.html#reactmemo
Создай свою функцию сравнения и передай ее вторым аргументом, или сразу true, если примет boolean

[Артур Кудашев]

Павел Диденко, не помогло.

[Антон Спирин]

Артур Кудашев, что-то неправильно делаете. Выложите код в песочницу.

[Артур Кудашев]

Антон Спирин, сейчас.

[Артур Кудашев]

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

[Артур Кудашев]

Антон Спирин, может я скину ссылку на github репозиторий?

[Артур Кудашев]

Антон Спирин, вот ссылка: https://github.com/art-kudashev/bibliography-dev

[Антон Спирин]

Артур Кудашев, а где именно вы пытались использовать memo?

И навскидку вижу ошибку:

const { state, dispatch } = useStore();
const searchInputs = state.inputs.search;

Должно быть:

const { getState, dispatch } = useStore();
const searchInputs = getState().inputs.search;

А по-хорошему:

const { getState, dispatch } = useStore();
const searchInputs = searchSelector(getState());

Деление на "глупые" и "умные" компоненты - плохая идея.

[Артур Кудашев]

Антон Спирин, memo пытался использовать хотя бы для Header.

[Артур Кудашев]

Антон Спирин, а что за функция getState? Можете показать на моем коде?

[Антон Спирин]

Артур Кудашев, memo, в вашем случае, надо использовать так:
export default React.memo(Header);
Должно работать.

[Антон Спирин]

Артур Кудашев, по поводу getState, тут.

[Артур Кудашев]

Антон Спирин, а что мне дает эта ссылка? Я не понимаю, что за функция getState.

[Антон Спирин]

Артур Кудашев, не сразу увидел, что вы redux не используете.

[Артур Кудашев]

Антон Спирин, у меня подобие. Нашел статью и от туда взял. У меня небольшой проект и я не знаю Redux.

[Антон Спирин]

Артур Кудашев, в этом проблема.

[Артур Кудашев]

Антон Спирин, а как мне допилить мой велосипед? У меня времени в обрез. Можете хотя бы объяснить как лучше обновлять состояние правильно?

[Антон Спирин]

Артур Кудашев, вам надо передавать в value один и тот же объект, а вы постоянно передаете новый.

[Артур Кудашев]

Антон Спирин, я это давно понял, но я не могу передать именно тот объект а не новый. Я все способы перепробовал, но каждый раз возвращается новый объект.

[Антон Спирин]

Артур Кудашев, посмотрите как эта проблема решена в react-redux.

[Артур Кудашев]

Антон Спирин, ок

Answer 1

[Антон Спирин]

export default React.memo(Header);

Comments

[Артур Кудашев]

Антон Спирин, не помогает. Включаю флаг highlight updates и у меня Header по прежнему мигает

[Антон Спирин]

Артур Кудашев, все ясно. Дело в вашем методе обновления состояния. Не сразу увидел, что вы redux не используете. React.memo учитывает обновление контекста. Тут могу посоветовать вместо велосипеда использовать redux, либо попробовать довести его до ума.

[Роман Александрович]

Артур Кудашев, а зачем вам нужен велосипед? Думаю что чем дальше тем больше будут возникать таки вопросы.

Answer 2

[Филипп Гапоненко]

Можно попробовать использовать https://reactjs.org/docs/react-component.html#shou...
Возвращать всегда false в этом хуке.

Comments

[Филипп Гапоненко]

В компоненту Literature есть input

По идее как раз change событие инпута и триггерит перерерисовку своего родителя.
Если инпут убрать/перенести в другое место memo сработает?

[Павел Диденко]

Филипп Гапоненко, это же метод lifecycle, а не хук

[Филипп Гапоненко]

Павел Диденко, имел ввиду хуки жизненного цикла, сори за путаницу, lifecycle, конечно.