Что такое react-afc
react-afc— библиотека для более простого (чем в простом react) уменьшения количества ненужных ререндеров дочерних компонентов.
Задачи и применение
В обычном react функциональный компонент вызывается каждый раз когда изменяется его состояние или пропсы, что вызывает повторное создание всех callback’ов и переменных.
Так как передаваемые данные из предыдущего и текущего рендера не равны, это порождает ререндер дочерних компонентов.
пример
Функционал компонента не несёт конкретного смысла. Просто пример.
import { useState } from 'react'
import Title from 'title-lib'
import HardCalcHeader from './header'
import NameInput from './name-input'
import AgeInput from './age-input'
function App() {
const [name, setName] = useState('')
const [age, setAge] = useState(1)
const onChangeName = value => setName(value)
const onChangeAge = value => setAge(value)
const closeWindow = () => window.close()
const titleArgs = {
color: 'blue',
size: 20
}
return (
<>
При изменении имени происходит перерисовка Title, NameInput, AgeInput, а также HardCalcHeader, что приводит к зависанию приложения.
Для избежания этого поведения мы разбиваем логику на множество компонентов (не всегда удобно), либо используем useCallback и useMemo (стоит дополнительных затрат при многократном вызове, ухудшает читаемость кода и требует отслеживания зависимостей функции).
пример с использованием хуков
import { useState, useCallback, useMemo } from 'react'
import Title from 'title-lib'
import HardCalcHeader from './header'
import NameInput from './name-input'
import AgeInput from './age-input'
function App() {
const [name, setName] = useState('')
const [age, setAge] = useState(1)
const onChangeName = useCallback(value => setName(value), [])
const onChangeAge = useCallback(value => setAge(value), [])
const closeWindow = useCallback(() => window.close(), [])
const titleArgs = useMemo(() => ({
color: 'blue',
size: 20
}), [])
return (
<>
Вся суть работы библиотеки лежит в одном, но значительном изменении структуры функционального компонента — добавлении аналога конструктора классового компонента.
сравнение
import { afc } from 'react-afc'
// обычный компонент
function CommonComponent(props) {
// вызывается каждый рендер
// ...react-хуки
return обычный компонент
}
// afc компонент
const AdvancedComponent = afc(props => {
// вызывается один раз за весь жизненный цикл компонента
// afc-хуки
return () => {
// render-функция, вызывается каждый рендер
// ...react-хуки (только по необходимости)
return afc
}
}Данное изменение позволяет нам во многих случаях не использовать useCallback и useMemo, а также не думать о зависимостях.
пример с использованием библиотеки
import { afc, useState } from 'react-afc'
import Title from 'title-lib'
import HardCalcHeader from './header'
import NameInput from './name-input'
import AgeInput from './age-input'
const App = afc(() => {
const [getName, setName] = useState('')
const [getAge, setAge] = useState(1)
const onChangeName = value => setName(value)
const onChangeAge = value => setAge(value)
const closeWindow = () => window.close()
const titleArgs = {
color: 'blue',
size: 20
}
return () => (
<>
Работает аналогично примеру с хуками, никаких лишних перерисовок.
Побочным эффектом является то, что мы больше не нуждаемся в использовании useRef для передачи данных между рендерами.
пример
import { useRef } from 'react'
import { afc } from 'react-afc'
// обычный компонент
function CommonComponent() {
const renderCount = useRef(0)
renderCount.current++
return (
Рендер вызван {renderCount.current} раз
)
}
// afc компонент
const AdvancedComponent = afc(() => {
let renderCount = 0
return () => {
renderCount++
return (
Рендер вызван {renderCount} раз
)
}
})Примечание: в библиотеке имеются аналоги для useState, useRef, useMemo, useEffect, memo. Их применение узкоспециализировано, читайте доку.
Пример работы можете найти на codesandbox.
Принцип работы
При первом рендере библиотека вызывает переданную в afc функцию, определяет какие хуки используются и сохраняет возвращённую рендер-функцию.
При последующих рендерах обновляются свойства в объекте пропсов (если они изменились), выполняются определённые ранее react-хуки и вызывается рендер-функция.
Принцип прост как пробка и требует незначительных вычислений только при первом рендере.
