callstack / callstack/react-native-paper
Better performance by enabling the React Compiler (standard memoization of components)
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
Description
**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
Contributor guide
Assessment
This issue has not been assessed yet.