callstack / callstack/react-native-paper
Better performance by enabling the React Compiler (standard memoization of components)
- 主要言語
- 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