Могу ли я определить функцию в родительском функциональном компоненте, чтобы дочерний PureComponent, получающий функцию в качестве реквизита, не перерисовывался?

Question

У меня есть функциональный компонент, который отображает коллекцию простых дочерних компонентов. Родительский компонент имеет функцию, которая обновляет состояние и передается дочерним компонентам. Из-за некоторых проблем с производительностью я решил превратить дочерние компоненты в чистые компоненты, чтобы уменьшить количество повторных обращений. К сожалению, поскольку функция определена в родительском функциональном компоненте, функция переопределяется всякий раз, когда состояние обновляется, а родительский перерисовывается. Это заставляет дочерние компоненты думать, что передаваемая функция является новой функцией и безусловно вызывает повторное рендеринг.

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

В моем первом решении я превратил дочерние компоненты в обычные компоненты на основе классов и определил пользовательский shouldComponentUpdate, чтобы в основном просто игнорировать функцию prop. Это менее чем идеально, так как этот вариант использования действительно должен обрабатываться PureComponent или pure из пакета перекомпоновки.

Во втором решении я сделал родительский компонент компонентом на основе классов и определилфункция, которую я хотел передать как метод-прототип. Однако я пытался держаться подальше от компонентов на основе классов.

Это код на основе классов, который я хотел бы воссоздать в качестве функционального компонента:

class Parent extends Component {
  state = {
    children: [1, 2, 3, 4] // populated by an api normally
    selectedChildren: []
  };

  handleChildClick = childId => {
    // adds or removes childId from this.state.selectedChildren
    // based on if it's already in the array or not
  };

  render() {
    const children = this.state.children.map((child) => (
      <Child
        key={child}
        id={child}
        onClick={this.handleChildClick}
        selected={this.state.selectedChildren.includes(child)}
      />
    ))

    return (
      <div>
        {children}
      </div>
    );
  }
}

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