Как решить jsx-no-bind ошибку на функциональном компоненте?

Question

У меня есть небольшой компонент для изменения языка моего сайта. Поскольку eslint настроен на jsx-no-bind, это приводит к появлению ошибки, указанной ниже.

const ChangeLanguage = ({ toggleLanguage }) => {

    const toggle = () => {
        console.log('hi')
        toggleLanguage()
    }

    return (
        <IconButton
            onClick={toggle}
        >
            <Language /> // this is an svg-icon
        </IconButton>
    )
}

export default connect(null, { toggleLanguage })(ChangeLanguage)

Я погуглил использование jsx-no-bind. Кто-то сказал, что мы должны включить его, так как в каждом рендере javascript генерирует новую функцию, и это вызывает ненужный рендеринг (например, соглашение по коду airbnb [link] ). Но некоторые другие считают, что улучшение производительности незначительно и снижает читабельность кода (например, [ссылка] ). Вот два вопроса:

1. Как устранить ошибку (т.е. без отключения jsx-no-bind).
2. Что вы предлагаете по поводу конфигурации jsx-no-bind (т.е. я должен полностью / частично удалить ее из конфигурации eslint или нет?).

PS: Существует больше документации о передаче функции стрелки или методов привязки в качестве реквизита в Интернете. Но я упомянул только два из них в постановке вопроса.

Answer 1

Это происходит потому, что вы передали функцию в операторе возврата вашего компонента, и она создает новую функцию каждый раз, когда компонент выполняет рендеринг.

, чтобы избежать этого, вместо этого вы можете использовать только его ссылку. вот так

const ChangeLanguage = ({ toggleLanguage }) => {
return (
    <IconButton
        onClick={toggleLanguage} // <----->
        <Language /> // this is an svg-icon
    </IconButton>
 )
}

export default connect(null, { toggleLanguage })(ChangeLanguage)