Ars Dev

The useEffect clean-up callback executes on every render Most people think it executes only when the component unmounts, but that’s not true. On every render, the clean-up callback from the previous render executes just before the next effect execution. Let’s see an example:

function SomeComponent() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log('The current count is ', count)
    return () => {
      console.log('The previous count is ', count)
    }
  })

  return <button onClick={() => setCount(count + 1)}>Click me</button>
}

This logs the following:

// Component mounts
The current count is 0

// Click
The previous count is 0
The current count is 1

// Click
The previous count is 1
The current count is 2

// Component unmounts
The previous count is 2

🚀 Why This Matters? This behavior is essential for managing subscriptions, event listeners, and cleanup logic effectively. Adding a dependency array ensures the effect runs only when needed. React Native Hub

Minimize the Use of Inline Functions Defining functions inside JSX might seem convenient, but it can hurt performance by creating new function instances on every render. ❌ Bad Practice: Each re-render creates a new function, causing unnecessary child component updates.

<Button onPress={() => handlePress(item.id)} />

✅ Better Approach: Use useCallback to memoize functions and prevent unnecessary re-creation.

const handlePress = useCallback((id) => {
  // handle press logic
}, []);

<Button onPress={handlePress} />

🔥 Why It Matters? ✔️ Reduces re-renders ✅ ✔️ Improves performance 🚀 ✔️ Keeps code clean & maintainable 💡 React Native Hub

🚀 Optimize Functional Components with React.memo Unnecessary re-renders can slow down your React Native app. React.memo helps optimize performance by memoizing functional components and reusing the last rendered output if props haven't changed. 🔹 How It Works: - Skips re-renders when props remain the same. - Reduces performance overhead in frequently rendered components. 🔹 Example Usage:

import React, { memo } from 'react';

const Element = ({ value, setValue }) => {
  return (
    <TouchableOpacity onPress={() => setValue(value * 2)}>
      <Text>{value}</Text>
    </TouchableOpacity>
  );
};

export default memo(Element);

✅ Use React.memo when: - Components are rendered frequently. - Props remain unchanged across renders. ⚠️ Avoid Overuse: Memoization adds overhead if applied unnecessarily. Use it wisely! 🚀 React Native Hub

🔁 Building Reusable Components: Best Practices Creating reusable components is key to building scalable React Native apps. A well-structured component library ensures consistency and efficiency. Here’s how to do it right: ✅ Props-Driven Design: Pass styles, text, and actions via props instead of hardcoding. ✅ Use TypeScript: Define prop types for better maintainability and fewer runtime errors. ✅ Optimize Performance: Use React.memo to prevent unnecessary re-renders. ✅ Write Tests: Validate components using Jest & React Native Testing Library. ✅ Document Components: Tools like Storybook help visualize and test UI elements. Building reusable components saves time and keeps your app organized. What best practices do you use? Leave them below! ⬇️ 🚀 React Native Hub

Why you should use React Native in 2025 React Native continues to dominate cross-platform mobile development, offering speed, efficiency, and cost savings. Here’s why it remains a top choice: ✅ Faster Development & Cost Efficiency Code once, run on both iOS & Android—saving time and budget. Hot Reloading boosts productivity. ⚡ Better Performance With Fabric & TurboModules, apps are now 5x faster, rivaling native experiences. 🌎 Huge Ecosystem & Community Support React Native thrives with active contributions & robust libraries for every need. 💡 Used by Tech Giants Meta, Airbnb, Shopify, Tesla—trusted by the best for scalable apps. 🎯 Future-Proof Technology Built on JavaScript & TypeScript, ensuring long-term support and easy integration. 📖 Read more: Why React Native in 2025 React Native Hub

Avoid Overusing Inline Styles in React Native Using inline styles might seem convenient, but overusing them can hurt performance in large applications. ⚠️ The Problem: ❌ Inline styles are re-evaluated on every render, leading to: - Unnecessary recalculations - Slower rendering - Poor performance in large lists & complex components ✅ The Solution: Use `StyleSheet.create()` Defining styles separately improves efficiency:

import { StyleSheet, Text, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
  },
  text: {
    fontSize: 18,
    color: '#333',
  },
});

const MyComponent = () => (
  <View style={styles.container}>
    <Text style={styles.text}>Optimized Styling</Text>
  </View>
);

📌 Key Takeaways: ✅ Avoid inline styles in every component ✅ Use `StyleSheet.create()` for better performance ✅ Keep styles reusable & maintainable ⚡ Write cleaner, faster, and more efficient React Native code! 🚀 React Native Hub

Handle Asynchronous Code 🔴 The Problem: Many developers neglect proper error handling in asynchronous operations like API calls. This can lead to unhandled promise rejections, app freezes, and unpredictable behavior. 🔹 Best Practice: Always use try/catch blocks to gracefully handle errors in async functions. ✅ Correct Approach:

const fetchData = async (): Promise<void> => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Failed to fetch data:', error);
    // Show an error message to the user
  }
};

❌ Don’t Forget: Ignoring errors can cause crashes in production. Always log and handle errors gracefully to improve user experience. 💡 Want to learn more about best practices in React Native? Follow the channel for expert tips! 🚀 React Native Hub

🎨 Explore the Latest in Mobile UI Design! 📱 Looking for fresh inspiration to elevate your app's user interface? Check out the latest compilation of flat and professional mobile app designs that emphasize clarity and functionality. These sleek designs showcase how minimalism and vibrant colors can create dynamic and user-friendly interfaces. Highlights: Minimalist Aesthetics: Clean lines and simple shapes that prioritize content. Vibrant Color Palettes: Use of bold colors to enhance visual appeal without overwhelming the user. User-Centric Layouts: Designs that focus on intuitive navigation and accessibility. Staying updated with current design trends is crucial for creating engaging and effective user experiences. These examples provide valuable insights into how to implement flat design principles effectively in your projects. Dive into the full collection here: Mobile UI Design Examples: Flat & Professional — vol. 219 Elevate your app's design by embracing these modern UI trends! 🚀 React Native Hub

⚡ Optimize Performance with `useCallback` Using hooks incorrectly can lead to performance issues and memory leaks. One common mistake is redefining functions inside components, which causes unnecessary re-renders. ❌ Incorrect Usage 🔴 Functin recreated on every render, causing performance issues:

const renderItem = ({ item }) => (
  <ItemComponent data={item} onPress={() => handlePress(item.id)} />
);

✅ Optimized Usage with `useCallback` ✅ Memoizes function references to prevent unnecessary re-renders:

const renderItem = useCallback(({ item }) => (
  <ItemComponent data={item} onPress={handlePress} />
), [handlePress]);

const handlePress = useCallback((id) => {
  // operations
}, []);

Using useCallback ensures that renderItem remains the same across renders, significantly improving list performance in React Native apps. 🚀 React Native Hub

Implementing Dark Mode Support 🌙 Dark mode is no longer just a trend—it’s an essential feature for accessibility and user comfort. Modern apps are expected to adapt to system preferences seamlessly. 🛠 Easy Implementation with React Native Thanks to React Native’s useColorScheme(), your app can automatically switch themes:

import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
import { useColorScheme } from 'react-native';

function App() {
  const scheme = useColorScheme();

  return (
    <NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
      {/* Your app content */}
    </NavigationContainer>
  );
}

For manual theme toggling, use the Appearance API:

import { Appearance } from 'react-native';

// Toggle theme manually
Appearance.setColorScheme('dark');

React Native Hub

Boost Your List Performance in React Native! ⚡ Problem: Low scroll performance and frame drops in lists with large data sets (1000+ items) ✅ Solution: - FlashList implementation instead of FlatList - getItemLayout implementation - ViewabilityConfig optimization - Item render caching 🔥 Gains: - Scroll FPS: Increased from 30fps to 58fps - Initial render time reduced by 40% - Memory usage decreased by 25%

import { FlashList } from "@shopify/flash-list";

const optimizedList = () => {
  const getItemLayout = (data, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  });

  return (
    <FlashList
      data={items}
      renderItem={renderItem}
      estimatedItemSize={100}
      getItemLayout={getItemLayout}
      viewabilityConfig={{
        waitForInteraction: true,
        viewAreaCoveragePercentThreshold: 50
      }}
      windowSize={5}
    />
  );
};

React Native Hub

Unlock the Power of Nullable Types in React Native Mishandling null and undefined in TypeScript can lead to unexpected bugs and low-quality code. Understanding their differences and using them properly can make your React Native apps more robust and maintainable. 📌 In this article, you’ll learn: ✅ The key differences between null and undefined ✅ How to enable strictNullChecks for better type safety ✅ Best practices for using nullable types in interfaces ✅ How to gracefully handle missing values in your app React Native Hub

Optimizing Image Loading Performance Improve your app’s perceived performance by providing placeholder images while the main image loads 🔹 How It Works:

<Image

source={{ uri: 'https://example.com/large-image.jpg' }}

defaultSource={require('./placeholder.png')}

style={{ width: 300, height: 200 }}

/>

This technique ensures users always see something while waiting for the actual image to load, creating a smoother experience ✨ React Native Hub

Flat Design in Mobile Apps – Why It Works! 🚀 Flat design is one of the most popular UI trends, focusing on clarity, simplicity, and speed. By using bold colors, clean lines, and minimalist elements, it enhances user experience while ensuring fast performance across all devices. Why Choose Flat Design? ✅ Faster Loading – No complex textures or heavy elements ✅ Better Readability – Prioritizes content over visual clutter ✅ Responsive & Adaptive – Works smoothly on all screen sizes ✅ Great for Low-Speed Networks – Perfect for mobile users How to Implement Flat Design in Your App? 🎨 Use vibrant colors and bold typography 🚀 Avoid gradients, shadows, and unnecessary textures 📱 Keep UI elements simple, functional, and intuitive 🔹 Prioritize content and usability over decorative effects This minimalist approach ensures a clean, modern, and user-friendly interface—perfect for mobile apps! What do you think about flat design? 🤔 Let’s discuss in the comments! 👇 React Native Hub

Google Fonts Integration with Expo Want to elevate your app’s typography? With the Expo Google Fonts package, adding custom fonts is quick and effortless! How to Use Google Fonts in Expo 1️⃣ Install the package:

npm install @expo-google-fonts/frank-ruhl-libre expo-font 

2️⃣ Load and apply the font:

import { useFonts } from 'expo-font';
import { FrankRuhlLibre_700Bold } from '@expo-google-fonts/frank-ruhl-libre';

export default function App() {
const [fontsLoaded] = useFonts({
'FrankRuhlLibre-Bold': FrankRuhlLibre_700Bold,
});

if (!fontsLoaded) return <LoadingScreen />;

return (
<Text style={{ fontFamily: 'FrankRuhlLibre-Bold' }}>
Custom Font Text
</Text>
);
} 

Try it out and share your favorite Google Font in the comments! 👇 React Native Hub

Enhance your app’s user experience with better keyboard interactions! Users often struggle to dismiss the keyboard in lists, especially in forms or chat apps. Here's how to fix it: 1️⃣ Use `keyboardDismissMode` Enable natural keyboard dismissal by adding a single prop:

<FlatList
    keyboardDismissMode="on-drag"
    // ... other props
/>

2️⃣ Add Smooth Animations Combine it with React Native Reanimated for a polished look:

import Animated from 'react-native-reanimated';

<Animated.FlatList
    keyboardDismissMode="on-drag"
    itemLayoutAnimation={LinearTransition}
    // ... other props
/>

These small changes make a big difference! Try it out and level up your app’s UX. 💻🔥 React Native Hub

React Native 0.77 has been released, bringing significant improvements across styling, platform support, and project templates. Key Highlights: - New CSS Features: Added support for display: contents, boxSizing, mixBlendMode, and outline properties. - Android 15 & 16KB Page Support: Improved memory handling and edge-to-edge UI compatibility. - Community CLI & Template Updates: Deprecation of react-native init`in favor of `npx create-expo-app. - Swift as Default for iOS: New iOS projects now use Swift instead of Objective-C. - Breaking Changes: Removal of console log streaming in Metro, updates to native animations, and more. React Native Hub

🚀 Welcome to React Native Hub! Hello, React Native developer! 👋 We’re thrilled to have you join React Native Hub, a space created to empower developers like you to build better apps, stay updated, and connect with the community. Here, you'll find everything you need to level up your React Native skills. 🗓️ Here’s our content plan to keep you informed, inspired, and engaged every week: - News / Updates - Tutorials / Guides / Tools - Showcase & Inspiration At React Native Hub, it’s all about learning, growing, and sharing knowledge as a community. Don’t hesitate to share your thoughts, ask questions, or suggest topics you’d like us to cover! Let’s build amazing apps together. 💻🔥