Галоўная / Артыкулы / Рэакцыя на выконанне за межах ручнага выкарыстоўвання memo: структура і планаванне

react performance memo compiler scheduling frontend

Рэакцыя на выконанне за межах ручнага выкарыстоўвання memo: структура і планаванне

Парадыгма кампайляра: размешчай стан усёў, аддзельна выконвай тыя задачы, якія трэба адразу, выдаўай менш JS-кода, а пасля запісваў результаты выкарыстоўвання найчастае коду.

803 слоў

Прывычна ўжо гады рэкамендацыя ўжываць React для падвышэння працэздатнасі заключалася ў тым, каб усё абгортваць за дапамогою API memo:

const value = useMemo(() => expensiveCalculation(data), [data]);

const handleClick = useCallback(() => {
  doSomething(id);
}, [id]);export default React.memo(Component);

function ProductList({ products, onSelect }) {
  const processed = useMemo(
    () => processProducts(products),
    [products]
  );

  const handleSelect = useCallback(
    (id) => onSelect(id),
    [onSelect]
  );  return (
    <List
      products={processed}
      onSelect={handleSelect}
    />
  );
}

App
 │
 ├── Header
 ├── Sidebar
 ├── Search
 ├── ProductList
 └── Footer

function App() {
  const [query, setQuery] = useState("");

  // large component tree
}

App
 │
 ├── Header
 ├── Sidebar
 ├── Search
 │    └── query state
 ├── ProductList
 └── Footer

const [query, setQuery] = useState("");
const [isPending, startTransition] = useTransition();

function handleChange(event) {
  const value = event.target.value;  setQuery(value);  startTransition(() => {
    setSearchResults(filterProducts(value));
  });
}

User input
    │
    ├── urgent ───────► keep UI responsive
    │
    └── non-urgent ───► transition

const AnalyticsDashboard = lazy(
  () => import("./AnalyticsDashboard")
);

Initial JavaScript
       │
       ▼
┌─────────────────────┐
│ Everything          │
│ Dashboard           │
│ Analytics           │
│ Editor              │
│ Admin               │
└─────────────────────┘

Initial load
    │
    ├── Core UI
    │
    └── Later
          ├── Analytics
          ├── Editor
          └── Admin

"This component renders often."
        │
        ▼
Add useMemo

"This component renders often."
        │
        ▼
Why?
        │
 ┌──────┼───────────┐
 ▼      ▼           ▼
State  Expensive   Large
flow   work        subtree
 │      │           │
 ▼      ▼           ▼
Colocate  Optimize  Restructure

1. Measure
      ↓
2. Find the expensive work
      ↓
3. Fix component architecture
      ↓
4. Reduce unnecessary JavaScript
      ↓
5. Prioritize updates correctly
      ↓
6. Let React Compiler handle memoization
      ↓
7. Manually optimize only when evidence says you should

Толькі мемаўванне не вылечыць медленных прыкладоў програм. Абсалютна мемаўваныя структуры все равно можу працаваць неэфективна з-за занадта вялікаг колькасці данных, тэрміновых апдэйтаў, якія выканываюць не тыя задачы, чыя ўжо трэба, або з-за важкаг JavaScript на галоўнай сцыялке.

React Compiler зменіў стандарт

Кампайлер автаматызуе багато процэсаў мемаўвання. Чыныцаючы, адпаведальнасць за структуруранне коду і планаванне выконання задач пераходзіць на людзя, а не на ручныя вызывы useMemo у кожнай частцы коду.

Перша практыка: размістыце данні ближэй да месца ўжывання

Высокі статус у дрэве занова атрыбутуе шырокія паддрэвы. Размешчайце статус разам з лістамі, якія яго патрабуюць; паднімайце яго толькі тады, калі для спільнага викорыстоўвання гэта неабходна.

Друга рэкамендацыя: не дазволяйце трыбутным апдэтаў выплываць некалькітабельную работу

Зберагаюце чутлівасць до клавішных натысканняў і анімацый. Адкладзіце некалькітабельную работу за дапамою пераходаў/адкладзеных значэнняў, каб натысканні клавіш не блакалі дорогія фільтры.

Трэцяя рэкамендацыя: разглядзіце JavaScript, які вы аплываеце

Большыя ціклы сінхронізацыі, дорогія форматары і необмежаныя лісты прадомінуюць, прычыму не можа дзеяць механізм супраўляння React. Аналізуйце код JavaScript, а не толькі падсвечванні ў інструментах React DevTools.

Тады калі трэба вжываць `useMemo`?

Ён яшчэ корыстны для падтрымкі стабільнасці значэнняў між дзецкімі элементамі, якія не прымаюць прапсы, а таксама для сапраўдна дорогіх чыстых вычысленняї — пасля ўзяць співваротнасці. Не як стандартны атрыбут для кожнага значэння.

Новы падход да аптимізацыі выконвання ў React

Структура → планаванне → адкаліненне JS → пасля чаго мікромемацыя актуальных элементаў. Мемацыя за дапамогай кампіляра ўжо яе падказчык, а не замена дизайну.

Да PR-аў трэба дадаць бюджет на выконання: час адзінаковай перработы галоўнага форму і кадр з профілярам React для вядомай навантажанай стазы.

Спісы павінны вярчуванаць перш чым мемаваць кожны ряд. Мемацыя 10-тысячнага спісу все равно прызводзіць да втрат.

Да PR-аў трэба дадаць бюджет на выконання: час адзінаковай перработы галоўнага форму і кадр з профілярам React для вядомай навантажаной стазы.

Даўце бюджет на выконання для PR-запросаў: вялічыну часу, неабходную для наступной перамальвання главнай формы, а таксама кадр з інструменту профілювання React для вядомага траекторыю з вялікай навантажэнням.

Спісы павинны вярчуванніцавацца раней, чым запам’ятовваць кожны рядок. Запам’ятовванне дадзеных для 10 тысяч рядкоў у момент стварэння все равно прызводзіць да втрат.

Усе артыкулы Даслаць брыф