Как тут использовать React.memo?

Question

[вовчек]

Здравствуйте, есть совсем маленькое приложение, которое состоит из 1 контейнера и 2 компонентов.
Один из компонентов это кнопка, и нужно сделать так, чтобы он не рендерился при изменении 1 компонента,
В пропсах у кнопки есть лишь один обработчик, который меняет булевое значение у стейта.
Пытался использовать React.memo, useMemo, и не получилось, может что то делаю не так? Помогите пожалуйста,
буду благодарен)

import React from 'react';
import './Button.css';

const Button = props => {
    return (
        <button
            className="jokes-btn"
            onClick={props.onClick}
        >
            Get 5 jokes.
        </button>
    );
};

export default Button;

Answer 1

[Дмитрий Тычинин]

Сам компонент необходимо обернуть в memo. Этот HOC предотвращает ре-рендер компонента, если не изменились пропсы.
export default React.memo(Button);
Если пропсы меняются, компонент в любом случае перерендерится (если только не подставлен второй аргумент - сравнивающая пропсы функция). onClick, по идее, менятся не должен. Если же в текущем коде он все-таки меняется, попробуйте обернуть этот callback в React.useCallback, где первый аргумент - функция, а второй - при изменении каких переменных она перезаписывается.

const handleMyButtonClick = React.useCallback(
  ([arg1, [arg2,..]]) => {...}, 
[[dep1, [dep2,..]]]);

В итоге должно получится что-то вроде этого:

const onClick = React.useCallback(() => {
  setJokes(prevValue => prevValue + 5);
},
[]);

useCallback
memo

Comments

[Ne7Le4Der]

Что-то у вас мухи вместе с котлетами

useMemo - hook, React.memo - HOC

[Дмитрий Тычинин]

Ne7Le4Der, "Сам компонент необходимо обернуть в useMemo" - имелось ввиду просто memo) Спасибо, исправил.

[вовчек]

Большое спасибо, возможно у меня не работал memo и за того что когда я вызывал компонент, и в пропсы я передавал <Button onClick={() => setStatus(!status)} />
А теперь вынес этот обработчик в отдельную функцию и все работает нормально)

[HealSpirit]

глубокий старец, при такой записи при каждом ререндере в компонент Button улетает новая ссылка на функцию, memo у Button будет бесполезен.
Как написали выше, завернуть функцию в useCallback

Answer 2

[Denioo]

import React, { memo } from 'react';
import './Button.css';

const Button = props => {
    return (
        <button
            className="jokes-btn"
            onClick={props.onClick}
        >
            Get 5 jokes.
        </button>
    );
};

export default memo(Button);

Comments

[Gary_Ihar]

Чет мне подсказывает что там сверху onClick новый на каждый рендер

[вовчек]

Gary_Ihar, да, поэтому всеравно будет рендерится по новой