react-native-best-practices

🥈Silver

Proven React Native best practices for 2026 covering performance optimization, memory leak prevention, testing strategies, and cross-platform debugging. Includes Metro bundler optimization, Hermes engine setup, TurboModules implementation, and fast refresh patterns for developers building performant iOS and Android apps.

1,245383,091installsUpdated Yesterday

Intermediate30min to implementdevelopment

Saves ~45 min per use

Quick InstallView Source

git clone https://github.com/callstackincubator/agent-skills.git

Works with:

Claude

Overview

About This Skill

React Native best practices 2026 guide for developers building production-grade iOS and Android applications. The ecosystem has evolved significantly with Metro bundler v0.80+, Hermes engine adoption, TurboModules maturity, and improved tooling. This guide covers essential patterns that reduce app crashes, memory leaks, and build times. Performance optimization is critical. Use FlatList with keyExtractor and removeClippedSubviews, avoid unnecessary re-renders with React.memo and useMemo, and profile with Hermes engine enabled (reduces app size 40-50% and startup time 20-30%). Implement code splitting with dynamic imports and lazy load screens. Monitor performance with react-native-performance-monitor and Sentry's mobile SDK. Memory management prevents production failures. Profile heap usage with Xcode's Memory Graph and Android Studio's Profiler. Fix memory leaks by cleaning up subscriptions in useEffect cleanup functions, removing event listeners, and using WeakMap for internal caching. Avoid creating new objects in render methods. Test memory with jest --detectOpenHandles and --maxWorkers=1. Testing strategies ensure reliability. Use detox for end-to-end testing (platform-agnostic), testing-library for component testing, and jest for unit tests. Mock native modules with jest.mock('@react-native-camera/camera'). Test on real devices, not just simulators. Implement CI/CD with EAS (Expo Application Services) or fastlane for automated testing and deployment. Debugging and monitoring in production requires the right tools. Integrate Sentry for crash reporting, LogRocket for session replay, and NetInfo API for network state handling. Use Redux DevTools with Redux middleware for state debugging. Implement remote logging to catch production issues before users report them. Common pitfalls to avoid: don't run heavy computations on the main thread (use InteractionManager or Workers), don't import entire libraries when you need specific functions, avoid Animated.timing loops without cleanup, and don't hardcode dimensions (use Dimensions API and useWindowDimensions). Test on low-end devices to catch performance issues early. Implement these patterns to ship faster, reduce crashes, and maintain code quality across teams. Whether building new apps or optimizing existing codebases, React Native best practices are essential for competitive app performance in 2026.

How to Use

1. **Identify Key Areas**: Start by identifying the key areas of your React Native app that need optimization. This could be performance, maintainability, or scalability. 2. **Research Best Practices**: Research the best practices for the identified areas. Use reliable sources like the official React Native documentation, blogs, and community forums. 3. **Implement Best Practices**: Implement the best practices in your app. Start with the most critical areas and gradually move to less critical ones. 4. **Test and Iterate**: Test the changes thoroughly to ensure they have the desired effect. Iterate on the implementation based on the test results. 5. **Document and Share**: Document the best practices you have implemented and share them with your team. This ensures that everyone is on the same page and can contribute to maintaining the best practices.

Use Cases

Reducing app crashes and memory leaks using React Native memory profiling and native module optimization.

Accelerating build times with Metro bundler caching and Hermes engine configuration.

Implementing reliable testing strategies with detox, testing-library, and native module mocking.

Fixing performance bottlenecks in cross-platform apps with FlatList optimization and code splitting.

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/callstackincubator/agent-skills

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Provide a list of 5 essential React Native best practices for [SPECIFIC APP FEATURE] development. Include code examples for each practice. Focus on [PERFORMANCE/MAINTAINABILITY/SCALABILITY] to improve [APP NAME]

Example Output

1. **Use PureComponent for Performance Optimization**: In React Native, using PureComponent can significantly improve performance by preventing unnecessary re-renders. For example, in the [APP NAME] app, we can optimize the ProfileScreen component by converting it to a PureComponent. This ensures that the component only re-renders when its props change, reducing the number of renders and improving performance.

```javascript
import React, { PureComponent } from 'react';

class ProfileScreen extends PureComponent {
  render() {
    return (
      <View>
        <Text>{this.props.user.name}</Text>
      </View>
    );
  }
}
```

2. **Avoid Inline Functions and Variables**: Inline functions and variables can lead to performance issues and make the code harder to maintain. Instead, define functions and variables outside the render method. For instance, in the [APP NAME] app, we can refactor the inline function in the HomeScreen component to improve performance and maintainability.

```javascript
class HomeScreen extends Component {
  // Define the function outside the render method
  handlePress = () => {
    // Function logic here
  }

  render() {
    return (
      <Button title="Press Me" onPress={this.handlePress} />
    );
  }
}
```

3. **Use FlatList for Long Lists**: When dealing with long lists in React Native, using FlatList instead of ScrollView can greatly enhance performance. FlatList only renders the items that are currently visible on the screen, reducing memory usage and improving performance. For example, in the [APP NAME] app, we can optimize the MessagesScreen component by converting it to a FlatList.

```javascript
class MessagesScreen extends Component {
  render() {
    return (
      <FlatList
        data={this.props.messages}
        renderItem={({ item }) => <Message message={item} />}
        keyExtractor={(item) => item.id}
      />
    );
  }
}
```

4. **Use PropTypes for Type Checking**: PropTypes can help catch bugs early by ensuring that the props passed to a component are of the correct type. In the [APP NAME] app, we can add PropTypes to the UserProfile component to improve code quality and maintainability.

```javascript
class UserProfile extends Component {
  static propTypes = {
    user: PropTypes.shape({
      name: PropTypes.string.isRequired,
      age: PropTypes.number.isRequired,
    }).isRequired,
  }

  render() {
    return (
      <View>
        <Text>{this.props.user.name}</Text>
        <Text>{this.props.user.age}</Text>
      </View>
    );
  }
}
```

5. **Use Navigation Best Practices**: Following navigation best practices can improve the user experience and make the app more maintainable. In the [APP NAME] app, we can use the React Navigation library to implement a stack navigator for the main app flow. This ensures that the navigation is predictable and easy to maintain.

```javascript
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
```