fix(AppRoot): Use memo for AppRootContext value

[andrey-medvedev-vk]

• Release notes

Описание

Выяснилось, что если AppRoot по какой-то причине ререндерится, то это вызывает ререндер компонентов, основанных на Tappable/Clickable компонентах, даже если они обернуты в React.memo.
Виной тому пересоздающийся объект контекста.

Когда может ререндерится AppRoot?
Например, когда он обернут в компонент, который слушает изменения стора, бывает нужно для того, чтобы менять тему самого AppRoot. Тогда получается, что каждое обновление стора вызывает ререндер AppRoot и компонентов VKUI.

Пример с вспроизведением: https://7zmxhp.csb.app/

Нужно посмотреть что происходит в react profiler при каждом ререндере AppRoot.

До	После

Код:

import React, { FunctionComponent, memo, useEffect, useState } from 'react'
import { createRoot } from 'react-dom/client'
import { AppRoot, Button } from '@vkontakte/vkui'

const rootContainer = document.getElementById('root')

if (rootContainer === null) {
  throw new Error('React #root element does not exist')
}

const root = createRoot(rootContainer, { identifierPrefix: 'vkm' })

root.render(<App />)

function App() {
  const [_, setState] = useState(0)

  useEffect(() => {
    setInterval(() => {
      setState((state) => ++state)
    }, 1000)
  }, [])

  return (
    <AppRoot>
      <MyButtons isVKUI />
      <MyButtons />
    </AppRoot>
  )
}

const MyButtons: FunctionComponent<{ isVKUI?: boolean }> = memo(
  function MyButtons({ isVKUI }) {
    return isVKUI ? (
      <div>
        <Button>VKUI button 1</Button>
        <br />
        <Button>VKUI button 2</Button>
        <br />
      </div>
    ) : (
      <div>
        <button>not VKUI button 1</button>
        <br />
        <button>not VKUI button 2</button>
        <br />
      </div>
    )
  },
)

Изменения

Используем React.useMemo для объекта, который мы передаем как значение контекста AppRootContext.

Release notes

Исправления

• AppRoot: мемоизируем контекст AppRootContext, чтобы компоненты, зависящие от него, лишний раз не ререндерелись при ререндере AppRoot.

[github-actions]

size-limit report 📦

Path	Size
JS	385.35 KB (+0.01% 🔺)
JS (gzip)	116.62 KB (+0.02% 🔺)
JS (brotli)	95.79 KB (+0.01% 🔺)
JS import Div (tree shaking)	1.46 KB (0%)
CSS	331.15 KB (0%)
CSS (gzip)	41.51 KB (0%)
CSS (brotli)	32.9 KB (0%)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[github-actions]

e2e tests

Playwright Report

[github-actions]

👀 Docs deployed

• ✅ Styleguide
• ✅ Storybook

Commit 06fdff3

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.16%. Comparing base (9ac63e2) to head (06fdff3).
Report is 12 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #7667      +/-   ##
==========================================
+ Coverage   95.13%   95.16%   +0.03%     
==========================================
  Files         383      383              
  Lines       11347    11335      -12     
  Branches     3726     3714      -12     
==========================================
- Hits        10795    10787       -8     
+ Misses        552      548       -4     

Flag	Coverage Δ
unittests	95.16% <100.00%> (+0.03%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[inomdzhon]

👍

[vkcom-publisher]

✅ v6.7.2 🎉