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
Research direction
Start with package.json and babel.config.js, then read the linked React Compiler documentation for compiling libraries. Enable the compiler for the library output, investigate any compilation issues, and verify that the components build successfully with the intended performance improvement.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- build-system, mobile, performance
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100