vovvkka
@vovvkka

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

Здравствуйте, есть совсем маленькое приложение, которое состоит из 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;
  • Вопрос задан
  • 333 просмотра
Решения вопроса 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
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@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);
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы