callstack / callstack/react-native-paper

Better performance by enabling the React Compiler (standard memoization of components)

オープン
#4,788 コメント 1 件 リアクション 8 件 担当者 0 名 GitHub で見る
feature request
主要言語
TypeScript
スター
14.5k
フォーク
2.2k
平均マージ
5日 23時間
マージ済み PR(30日)
12

説明

**Is your feature request related to a problem? Please describe.**
The React Native Paper components do have a performance impact on the app when they render. I think we can improve the performance by a lot if we output compiled code of this library with the React Compiler enabled. So they don't re-render at all when the props are stable (which happens a lot with react compiler)

**Describe the solution you'd like**
1. [Enable the React Compiler](https://react.dev/reference/react-compiler/compiling-libraries)
2. Optimize compiled code

**Describe alternatives you've considered**
We are trying this out on our fork:

package.json
```
"react-native-builder-bob": {
"source": "src",
"output": "lib",
"targets": [
"commonjs",
[
"module",
{
"esm": true,
"configFile": true
}
],
[
"typescript",
{
"project": "tsconfig.build.json"
}
]
]
}
```

babel.config.js
```
module.exports = {
plugins: [
[
'babel-plugin-react-compiler',
{
logLevel: 'verbose',

// compilationMode: 'all',
// panicThreshold: 'all_errors',
logger: {
logEvent(filename, event) {
if (event.kind === 'CompileSuccess') {
console.log('✔ Compiled:', filename);
} else {
console.warn('ℹ Compilation error in:', filename, event.reason);
}
},
},
},
],
],
presets: ['module:@react-native/babel-preset'],
};

```

**Additional context**
https://react.dev/learn/react-compiler

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

package.json と babel.config.js から始め、ライブラリのコンパイルに関するリンク先の React Compiler ドキュメントを読んでください。ライブラリの出力に対してコンパイラを有効にし、コンパイル上の問題を調査して、意図したパフォーマンス向上を伴ってコンポーネントが正常にビルドされることを確認してください。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
react-native, typescript
領域
build-system, mobile, performance
issue の種類
機能追加
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。