# Expo React Native Javascript Best Practices

> Expo React Native JavaScript best practices for clean code, functional components, performance optimization, and Expo Router navigation.

- Skill: `mindrally/expo-react-native-javascript-best-practices` (Agent Skill)
- Install (CLI): `npx skillmds@latest add mindrally/expo-react-native-javascript-best-practices`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mindrally/expo-react-native-javascript-best-practices/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: mindrally (https://skillmd.com/u/mindrally)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/mindrally/expo-react-native-javascript-best-practices

---


# Expo React Native JavaScript Best Practices

Guidelines for building high-quality Expo React Native applications with JavaScript, focusing on clean code, modularity, and performance.

## Code Style and Structure

- **Clean, Readable Code**: Ensure your code is easy to read and understand. Use descriptive names for variables and functions.
- **Functional Components**: Prefer functional components with hooks (useState, useEffect) over class components
- **Component Modularity**: Break components into smaller, reusable pieces with single responsibility
- **Feature-Based Organization**: Group related components, hooks, and styles into feature directories (e.g., user-profile, chat-screen)

## Naming Conventions

- **Variables and Functions**: Use camelCase (e.g., `isFetchingData`, `handleUserInput`)
- **Components**: Use PascalCase (e.g., `UserProfile`, `ChatScreen`)
- **Directories**: Use lowercase hyphenated names (e.g., `user-profile`, `chat-screen`)

## JavaScript Usage

- Minimize global variables to prevent unintended side effects
- Leverage ES6+ features like arrow functions, destructuring, and template literals to write concise code
- Use PropTypes for type checking if not using TypeScript

## Performance Optimization

- Avoid unnecessary state updates; use local state when needed
- Apply `React.memo()` to prevent unnecessary re-renders
- Optimize FlatList with the following props:
  - `removeClippedSubviews`
  - `maxToRenderPerBatch`
  - `windowSize`
- Avoid anonymous functions in `renderItem` or event handlers

## UI and Styling

- Use `StyleSheet.create()` for consistent styling or Styled Components for dynamic styles
- Ensure responsive design across screen sizes and orientations
- Use optimized image libraries like `react-native-fast-image`

## Best Practices

- Follow React Native's threading model for smooth UI performance
- Use Expo's EAS Build and OTA updates for deployment
- **Expo Router**: Use Expo Router for file-based routing in your React Native app. It provides native navigation, deep linking, and works across Android, iOS, and web