Рендеринг реквизита, аполлона и JSX реквизита с функциями стрелок

Question

Многие примеры того, как Аполлон включает в себя что-то вроде

<Mutation
     mutation={YOUR_MUTATION}
     update={(cache, { data }) => {
         // do stuff to update Apollo store
     }}
 >
   { mutate => ( <UI mutate={mutate} /> ) }

  </Mutation>

Эти два правила противоречат правилам ESLint, а также на практике. Мы также знаем, что реквизиты JSX не должны использовать.bind() - как избежать использования bind? JSX поддерживает создание новых функций стрелок на каждом рендере, это не очень хорошая практика.

1. Как / где ты пишешь свой update обработчики?
2. Если цель состоит в том, чтобы сделать как можно больше "чистых" функций, как правильно прикрепить обработчик к update подпирать?

Answer 1

Создайте функцию обновления в компоненте, который вызывает Mutation составная часть. Вот так:

class Root extends React.Component {
  update = (cache, { data }) => {
    // do stuff to update Apollo store
  };

  render() {
    return (
      <Mutation
        mutation={YOUR_MUTATION}
       update={this.update}
      >
        {mutate => (<UI mutate={mutate} />)}
      </Mutation>
    )
  }
}

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

РЕДАКТИРОВАТЬ:

Если update это чистая функция, вы можете поместить ее вне объявления класса.

Answer 2

Проблема здесь заключается в новом обработчике каждого компонента повторного рендеринга, который может повлиять на производительность и привести к каскадному повторному рендерингу дочерних элементов.

Я думаю, что вы должны использовать один из следующих подходов:

1) Извлеките свою функцию в модуль global const, если внутри класса не нужен контекст

const handler = () => {//asdfasdf}
const component = () => {
  return <Mutation
     mutation={YOUR_MUTATION}
     update={handler}
 >
   { handler ) }

  </Mutation>
}

2) Класс со стрелками

class Component extends React.Component {
  update = (u) => this.props.update;
  render () {
    return <Mutation
     mutation={YOUR_MUTATION}
     update={this.update}
 >
   { etc... }

  </Mutation>
  }
}