callstack / callstack/react-native-paper

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

Open
#4,788 1 comment 8 reactions 0 assignees View on GitHub
feature request
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.