Иной взгляд на React компоненты

Как мы все знаем, в React есть функциональные и классовые компоненты. Каждый вид имеет свои плюсы и минусы.

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

Функциональные компоненты, в свою очередь, для оптимизации заставляют нас оборачивать объекты в useMemo, а функции в useCallback. Что уменьшает читаемость кода, а при большом количестве вызовов также понижает производительность (как бы это не было парадоксально).

Вы можете задаться вопросом: «Разве у нас есть иной вариант?». Да, он существует!
Что, если взять функциональный компонент и добавить ему функцию «конструктор», подобно одноимённому методу в классах?. Тогда нам не потребуется оборачивать в useMemo и useCallback, так как объекты и функции будут создаваться один раз. Также мы не потеряем удобное переиспользование логики и нам не потребуется this на каждой строке.

Довольно заманчивые условия, но разве это возможно сделать без «костылей»?
Я задался этим вопросом и нашёл решение: использовать замыкания для реализации «конструктора». После нескольких вечеров на просторах интернета «родился» npm-пакет react-afc.

Как мог выглядеть компонент со сложной логикой на чистом React:

import React, { useMemo, useState, useCallback, memo } from 'react' import ComplexInput from './ComplexInput' import ComplexOutput from './ComplexOutput'  function Component(props) {   const [text, setText] = useState('')      const config = useMemo(() => ({     showDesc: true,     title: 'Title'   }), [])    const onChangeText = useCallback(e => {     setText(e.target.value)   })    const onBlur = useCallback(() => {     // hard calculations   })    return <>     <ComplexInput value={text} onChange={onChangeText} onBlur={onBlur} />     <ComplexOutput config={config} />   </> }  export default memo(Component)

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

Тот же пример, но с использованием react-afc:

import React from 'react' import { afcMemo, useState } from 'react-afc' import ComplexInput from './ComplexInput' import ComplexOutput from './ComplexOutput'  function Component(props) {   const [text, setText] = useState('')      const config = {     showDesc: true,     title: 'Title'   }    function onChangeText(e) {     setText(e.target.value)   }    function onBlur() {     // hard calculations   }    return () => <>     <ComplexInput value={text.val} onChange={onChangeValue} onBlur={onBlur} />     <ComplexOutput config={config} />   </> }  export default afcMemo(Component)

Что же изменилось?

Теперь функция компонент является «конструктором» и вызывается только один раз в течение всего жизненного цикла компонента. Это значит, что onChangeText, onBlur и config одинаковые каждый рендер (без использования обёрток), то есть они не вызывают перерисовку «детей» при обновлении компонента. Конструктор возвращает рендер-функцию, которая вызывается каждый рендер.

Что насчёт производительности?

Пакет максимально переиспользует React-хуки: при нескольких вызовах useState из react-afc используется лишь один хук из React. Это ломает просмотр состояний компонентов в ReactDevtools, но такова цена производительности.

В целом, разница в производительности незначительна. Но чем сложнее компонент, тем выше разрыв между обычными и afc-компонентами (react-afc может быть до 10% быстрее).

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

Жду вашего мнения в комментариях 🙂